LoginForm

Login form with auto-completion and auto-fill for modern browsers

Important note: This add-on has been merged into the Vaadin 7.7 core and com.vaadin.ui.LoginForm has been undeprecated.

Unlike the deprecated LoginForm in the Vaadin core (up to Vaadin 7.6), this add-on works for all major modern browsers and not only for Firefox. Also, it does not load special HTML in an iframe, but you can build your own UI in plain Vaadin, using the components provided by the add-on.

In technical terms, the add-on wraps the login UI in an HTML form element that submits a POST request to a dummy resource. The text field for user name and the password field have special attributes so that they are recognized by the password manager.

Browser support:

Firefox: Auto-completion and auto-fill (auto-fill since Firefox 26) Chrome: Auto-completion and auto-fill Safari: Auto-completion and auto-fill IE: Auto-completion for IE 11+, no extra functionality for IE10 and below

The lower version bounds for Firefox,Chrome and Safari are not known.

Even if a browser does not support auto-complete or auto-fill, the login form continues to works as a regular Vaadin form - just without the extra functionality provided by the add-on.

Note that Chrome triggers the password manager only once per loaded page. If you dismiss the password manager after a failed login and then login again, the password manager will not be triggered again unless you reload the page first. This is a characteristic of Chrome and not a limitation of this add-on.

Sample code

// Add the loginForm instance below to your UI
DefaultVerticalLoginForm loginForm = new DefaultVerticalLoginForm();
loginForm.addLoginListener(new LoginListener() {
    @Override
    public void onLogin(LoginEvent event) {
        System.err.println(
                "Logged in with user name " + event.getUserName() +
                        " and password of length " + event.getPassword().length());

    }
});

    // Add an instance of this class to your UI
    public abstract class MyLoginForm extends LoginForm {
        @Override
        protected Component createContent(TextField userNameField, PasswordField passwordField, Button loginButton) {
            HorizontalLayout layout = new HorizontalLayout();
            layout.setSpacing(true);
            layout.setMargin(true);

            layout.addComponent(userNameField);
            layout.addComponent(passwordField);
            layout.addComponent(loginButton);
            layout.setComponentAlignment(loginButton, Alignment.BOTTOM_LEFT);
            return layout;
        }

        // You can also override this method to handle the login directly, instead of using the event mechanism
        @Override
        protected void login(String userName, String password) {
            System.err.println(
                "Logged in with user name " + userName +
                " and password of length " + password.length()
            );
        }
    }

Links

• Author Homepage
• Issue Tracker
• Source Code
• Discussion Forum

Compatibility