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

Found a bug or have a suggestion? Report it on GitHub

For bug reports, feature suggestions, or questions, please open an issue on GitHub. This makes it easier for us to track and respond efficiently, ensuring you get the best possible support. Your input helps us improve—thank you!

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