public class LoginScreen extends CssLayout { private TextField username; private PasswordField password; private Button login; private Button forgotPassword; private LoginListener loginListener; private AccessControl accessControl; public LoginScreen(AccessControl accessControl, LoginListener loginListener) { this.loginListener = loginListener; this.accessControl = accessControl; buildUI(); username.focus(); } private void buildUI() { addStyleName("login-screen"); // login form, centered in the available part of the screen Component loginForm = buildLoginForm(); // layout to center login form when there is sufficient screen space // - see the theme for how this is made responsive for various screen // sizes VerticalLayout centeringLayout = new VerticalLayout(); centeringLayout.setStyleName("centering-layout"); centeringLayout.addComponent(loginForm); centeringLayout.setComponentAlignment(loginForm, Alignment.MIDDLE_CENTER); // information text about logging in CssLayout loginInformation = buildLoginInformation(); addComponent(centeringLayout); addComponent(loginInformation); } private Component buildLoginForm() { FormLayout loginForm = new FormLayout(); loginForm.addStyleName("login-form"); loginForm.setSizeUndefined(); loginForm.setMargin(false); loginForm.addComponent(username = new TextField("Username", "admin")); username.setWidth(15, Unit.EM); loginForm.addComponent(password = new PasswordField("Password")); password.setWidth(15, Unit.EM); password.setDescription("Write anything"); CssLayout buttons = new CssLayout(); buttons.setStyleName("buttons"); loginForm.addComponent(buttons); buttons.addComponent(login = new Button("Login")); login.setDisableOnClick(true); login.addClickListener(new Button.ClickListener() { @Override public void buttonClick(Button.ClickEvent event) { try { login(); } finally { login.setEnabled(true); } } }); login.setClickShortcut(ShortcutAction.KeyCode.ENTER); login.addStyleName(ValoTheme.BUTTON_FRIENDLY); buttons.addComponent(forgotPassword = new Button("Forgot password?")); forgotPassword.addClickListener(new Button.ClickListener() { @Override public void buttonClick(Button.ClickEvent event) { showNotification(new Notification("Hint: Try anything")); } }); forgotPassword.addStyleName(ValoTheme.BUTTON_LINK); return loginForm; } private CssLayout buildLoginInformation() { CssLayout loginInformation = new CssLayout(); loginInformation.setStyleName("login-information"); Label loginInfoText = new Label( "

Login Information

" + "Log in as "admin" to have full access. Log in with any other username to have read-only access. For all users, any password is fine", ContentMode.HTML); loginInformation.addComponent(loginInfoText); return loginInformation; } private void login() { if (accessControl.signIn(username.getValue(), password.getValue())) { loginListener.loginSuccessful(); } else { showNotification(new Notification("Login failed", "Please check your username and password and try again.", Notification.Type.HUMANIZED_MESSAGE)); username.focus(); } } private void showNotification(Notification notification) { // keep the notification visible a little while after moving the // mouse, or until clicked notification.setDelayMsec(2000); notification.show(Page.getCurrent()); } public interface LoginListener extends Serializable { void loginSuccessful(); } }