I’d like to implement password reset view within my app, i.e., a component with 2 password fields and a button that applies some business rules (e.g., passwords > N chars long, both fields are identical, etc.) and then does the needful. The key is that I’d like the view to trigger the autosave heuristic in browsers, i.e., have browsers prompt the user to save the updated password (for autocomplete later into the login view)
What is the best approach? I’ve tried subclassing LoginForm, but there are issues. For one, LoginForm triggers the form’s submit action every time, which causes browsers to ignore submits after the first one (Chrome for example) – this means that if the user does not get both passwords EXACTLY right on the first try, the browser will not offer to autosave when they do. For another, one has to resorts to hacky kludges to replace the username field with a hidden input carrying the username. Ugh.
If I roll my own custom component, it looks like I’ll have to replicate a substantial part of LoginForm’s behaviour (in order to get browsers to detect the inputs and offer to save them)
Am I missing the correct approach?
Thanks in advance!
Hi Manu! … did you manage to overcome this?
If not, can you tell me what is the Vaadin version that you’re using? … LoginForm has changed significantly, so that information is important to know.
Can you post a snippet of your code?
Regards.
This is on Vaadin 8.0.6, I see the same behaviour.
My LoginForm subclass does only two non-standard things (in the overriden createContent() method):
Omit the passed-in username field and add a hidden input with the username instead (since this is a reset password form, we don’t want the username to be editable obviously)
Hi Manu!
I was analyzing the client side code of this component, and what I see, is that when you click the loginbutton, it submits a dummy form, to deceive the browser, and trigger the password manager to save the passwords. The real login is made through Vaadin rpc mechanism.
To change that behavior, the only thing left is to change the client side code, and try to invoke server side code, to validate the passwords, and then to this trick of posting the fake form.
But I was thinking and there is a simpler workaround that may serve to your needs: You could add valueChangeListeners to those TextFields, to check the password(s) and if everything is ok, make the change password button (loginbutton) enabled, otherwise it will be always disabled.
This will trigger the browser’s passwordmanager mechanism, only when you are able to click the changepassword button → only one time (and with this way will work in chrome and similar browsers that ask you to save the password only once).
Regards!