Directory

← Back

Extended Login Add-on

Vaadin Login component extension providing additional features

Author

Rating

Popularity

100+

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);

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Version available from maven central repository.

Released
2023-09-11
Maturity
TESTED
License
Apache License 2.0

Compatibility

Framework
Vaadin 24
Vaadin 24+ in 1.0.0
Browser
Firefox
Safari
Google Chrome
Android Browser
Microsoft Edge

Extended Login Add-on - Vaadin Add-on Directory

Vaadin Login component extension providing additional features Extended Login Add-on - Vaadin Add-on Directory
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
Online