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
Compatibility
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
Calling setInputPrompt on the password field breaks the functionality of the login form, so disable it from having any effect. The input prompt is not readable, so it does not make sense to use this feature in any case.
- Released
- 2016-02-12
- Maturity
- STABLE
- License
- Apache License 2.0
Compatibility
- Framework
- Vaadin 7.3+
- Vaadin 7.0+ in 0.3.3
- Browser
- N/A
LoginForm - Vaadin Add-on Directory
Login form with auto-completion and auto-fill for modern browsersIssue Tracker
Source Code
Discussion Forum
LoginForm version 0.1
Initial release
LoginForm version 0.1.1
Renamed client-side classes
LoginForm version 0.1.2
Password manager was not triggered if the application was deployed with a non-root context path
LoginForm version 0.2
* Added a submitCompleted method that can be overridden to be notified when the client side POST request has been fully handled by the browser
* Changed the visibility of the getters to make it clear that they cannot be used from outside the login form container
* Login form post message handler was not triggered on the server side if the application was deployed with a non-root context path
LoginForm version 0.3
* Revised the API to make the add-on more straight-forward to use.
* Added DefaultVerticalLoginForm and DefaultHorizontalLoginForm with a default layout.
* The keyboard shortcut for the enter key is not visible in the entire window anymore, it is now possible to have multiple login forms visible at the same time.
Migration from 0.2:
* Instead of building the layout in the constructor, override the abstract createContent and return the layout.
* Instead of calling the getters for the user name field and password field, use the new arguments of the login method.
* Instead of overriding submitCompleted, call setLoginMode(LoginMode.DEFERRED) in the createContent implementation.
LoginForm version 0.3.1
Calling the create... methods in createContent was not prevented
Do not overwrite manually set IDs for user name field and password field
LoginForm version 0.3.2
Hitting enter while in auto-complete submitted the form with empty user name and password
LoginForm version 0.3.3
Support for native login buttons. You can now override createLoginButton and return a NativeButton instance.
LoginForm version 0.4
Removed "direct" login mode, current browsers don't trigger the password manager in that situation.
Login is now triggered when the dummy request returns.
LoginForm version 0.4.1
In Firefox, typing a user name and then hitting enter without selecting a user from the popup or tabbing to the password field resulted in an empty password on the server side
Support compilation on Mac OS X
LoginForm version 0.4.2
In Firefox, typing a user name and then hitting enter without selecting a user from the popup or tabbing to the password field resulted in an empty password on the server side
Support compilation on Mac OS X
LoginForm version 0.4.3
Avoid wrong "Update password" questions in Firefox if the password field already contained characters before hitting enter
LoginForm version 0.4.4
There was no password manager functionality if the Vaadin servlet was not mapped to the root path
LoginForm version 0.5
Added login listener mechanism to handle the login, implementing login(...) is no longer required
The default login forms are no longer abstract
Use a more robust way of obtaining the context path to avoid an NPE if Page.getCurrent() returns null
LoginForm version 0.5.1
Fixed a memory leak when showing multiple login forms
LoginForm version 0.5.2
Added support for portlets
Added a "clear()" method to reset both text fields in the login form
LoginForm version 0.6
Changed the return type of DefaultHorizontalLoginForm::createContent and DefaultVerticalLoginForm::createContent to return an actual layout type. This makes it easier to override and extend those methods. If you have extended these classes, you will need to change the corresponding return types.
Fixed an NPE when LoginForm::clear() was called and the login form has not been displayed yet
LoginForm version 0.6.1
Fixed an NPE when instantiating a LoginForm outside of a request
LoginForm version 0.6.2
Calling setInputPrompt on the password field breaks the functionality of the login form, so disable it from having any effect. The input prompt is not readable, so it does not make sense to use this feature in any case.