Extended Login Add-on

Vaadin Login component extension providing additional features

View larger

Close

This add-on extends the Vaadin Login component adding new features.

Features

• Adds a LoginLayout that allows to create views with the same layout as the LoginOverlay
• Adds an extended LoginOverlay that allows to customize the appearance with more features than the base version

Sample code

@Route("value = "extended-login/login-layout-demo", layout = ExtendedLoginDemoView.class)
public class TestLoginLayoutView extends Div {

  public TestLoginLayoutView() {
    add(createChangePasswordForm());
  }

  private FormLayout createChangePasswordForm() {
    TextField username = new TextField("Username");
    username.setEnabled(false);
    PasswordField password = new PasswordField("Password");
    PasswordField confirmPassword = new PasswordField("Confirm password");
    Button accept = new Button("Accept", ev -> Notification.show("Password changed."));

    FormLayout formLayout = new FormLayout();
    formLayout.add(username, password, confirmPassword, accept);
    formLayout.setResponsiveSteps(
        // Use one column by default
        new ResponsiveStep("0", 1),
        // Use two columns, if layout's width exceeds 500px
        new ResponsiveStep("500px", 2));
    // Stretch the username field over 2 columns
    formLayout.setColspan(username, 2);
    formLayout.setColspan(accept, 2);
    return formLayout;
  }
}

    ExtendedLoginOverlay elo = new ExtendedLoginOverlay();
    elo.replaceFormComponents(
        new TextField("Email", "someone@company.com"),
        new ComboBox<String>("Branch", Arrays.asList("Santa Fe", "Rosario")),
        new PasswordField("Password"),
        new Button("Sign In", ev -> Notification.show("Login successfull")));
    Image image = new Image("/img/LogoChicoGlow.png", "Login image");
    image.setClassName("logo-image");
    image.setWidth("fit-content");
    image.setHeight("fit-content");
    elo.replaceHeaderComponent(image);
    elo.replaceForgotPassword(new Anchor("https://www.flowingcode.com", "Flowing Code Site"));
    elo.setOpened(true);

Links

• View on GitHub
• Online Demo

Compatibility