Vaadin comes with a LoginForm class that, by default, renders a username and a password field. It also adds auto-completion and auto-fill in the browser. The LoginForm class is a good candidate for extension (and you have to extend it if you want to override its defaults). For example, the following snippet of code creates a loginForm and a listener that is invoked when the user clicks the login button:

LoginForm loginForm = new LoginForm()
loginForm.addLoginListener(e ->  {
    String password = e.getLoginParameter("password");
    String username = e.getLoginParameter("username");
    ...
});

To add more fields to the form, override the createContent method. For example:

LoginForm loginForm = new LoginForm() {
    @Override
    protected Component createContent(TextField username,
            PasswordField password, Button loginButton) {

        CheckBox rememberMe = new CheckBox();
        rememberMe.setCaption("Remember me");

        return new VerticalLayout(username, password, loginButton,
                rememberMe);
    }
};

Despite its design for extension, it's always a good idea to hide implementation details by extending Composite and abstracting away the underlying LoginForm class. The following snippet of code shows a first iteration of the new LoginFormComponent class:

public class LoginFormComponent extends Composite {

    private TextField username;
    private PasswordField password;
    private CheckBox rememberMe = new CheckBox();

    public LoginFormComponent() {
        LoginForm loginForm = new LoginForm() {
            @Override
            protected Component createContent(TextField username,
                    PasswordField password, Button loginButton) {
                LoginFormComponent.this.username = userNameField;
                LoginFormComponent.this.password = passwordField;

                rememberMe.setCaption("Remember me");

                return new VerticalLayout(username,password,
                        loginButton, rememberMe);
            }
        };

        setCompositionRoot(loginForm);
    }
}

The createContent method is called internally by the LoginForm class. Notice how the username and password variables are assigned to references in the LoginFormComponent class. These references can be used later to retrieve the values in the fields.

Allowing clients of the LoginFormComponent class to be notified when the user clicks the login button can be implemented with a custom LoginListener interface:

public class LoginFormComponent extends Composite {

    public interface LoginListener {
        void logInClicked(LoginFormComponent loginForm);
    }
    ...

    private LoginListener loginListener;

    public LoginFormComponent(LoginListener loginListener) {
        this();
        this.loginListener = loginListener;
    }

    public LoginFormComponent() {
        ...

        loginForm.addLoginListener(this::logInClicked);
        ...
    }
 
    public void setLoginListener(LoginListener loginListener) {
        this.loginListener = loginListener;
    }

    private void logInClicked(LoginForm.LoginEvent loginEvent) {
        if (loginListener != null) {
            loginListener.logInClicked(this);
        }
    }
}

The LoginListener interface defines one method that accepts a LoginFormComponent. Now, it's easy to define getters to allow clients to obtain the values in the fields:

public class LoginFormComponent extends Composite {
    ...

    public String getUsername() {
        return username.getValue();
    }

    public String getPassword() {
        return password.getValue();
    }

    public boolean isRememberMe() {
        return rememberMe.getValue();
    }
}

If a new component is added to the login form in future, it's possible to add a getter to return the value in the added field without breaking existing clients of the class.