dotnetic 924 Posted June 20, 2018 Get rid of the confirm password field and use an unmasking button instead Many articles like http://uxmovement.com/forms/why-the-confirm-password-field-must-die and recent user studies show, that there are UX problems with a confirm password field. Also there are comments who disagree with this behaviour. An example of a good password field UX is the signup form of MailChimphttps://login.mailchimp.com/signup/ Luke Wroblewski from Google also described the problems with masked password fields, especially for mobile users: https://www.lukew.com/ff/entry.asp?1653 Why would the enhancement be useful to users? A confirm password field does not really add verification that you typed your password correctly. Users tend to make the same typing errors again, if they repeat their password. It would be better to use a show/hide password button, so a user can see the password he typed. This would remove friction and frustration. Luke even wrote, that he displays people’s passwords by default in the Polar app. I did not implement this at the time, but think it is a smart move. Maybe I implement it as an option. Fully functional module is ready Right now I have a working InputfieldPassword to use with AdminThemeUikit. Here is a video of the new Inputfield in action: https://youtu.be/PEWp89TOUsU It would be nice if you vote for this feature request on github if you think it is useful. You can download the module here. InputfieldPassword.zip 10 Share this post Link to post Share on other sites
tpr 3,235 Posted June 20, 2018 A small thing in your Js: it would be better to check the "type" of the input instead the icon. So instead of this: var passwordField = $this.next('.FieldtypePassword')[0]; if ($icon.hasClass('fa-eye-slash')) { passwordField.setAttribute('type','text') $icon.removeClass('fa-eye-slash'); } else { passwordField.setAttribute('type','password') $icon.addClass('fa-eye-slash'); } something like this (untested): var $passwordField = $this.next('.FieldtypePassword'); if ($passwordField.attr('type') === 'password') { $passwordField.attr('type', 'text'); $icon.removeClass('fa-eye-slash'); } else { $passwordField.attr('type', 'password'); $icon.addClass('fa-eye-slash'); } I also rewrote the passwordField to a jQuery object if that's what is used in the entire file. 4 Share this post Link to post Share on other sites
dotnetic 924 Posted June 21, 2018 @tpr Thanks for your suggestion. Yeah I was using a mixup of jQuery and vanilla JS, as my script was vanilla before as I used it outside of the admin. I needed to change your code a lil bit, because the type is a property and not an attribute. The new updated version is attached to my first post now. 2 Share this post Link to post Share on other sites
tpr 3,235 Posted June 21, 2018 I thought about the possible issue with .attr vs .prop, I should have checked the code first. Funnily in vanilla js it's getAttribute and not getProperty 🙂 1 Share this post Link to post Share on other sites
LostKobrakai 5,207 Posted June 22, 2018 Afaik that distinction is just one some frameworks use. The js api doesn‘t do that. Share this post Link to post Share on other sites
szabesz 2,846 Posted July 21, 2018 Hey guys, @jmartsch's initial post has 10 likes but the Github request only 5 thumbs-ups. Those who really want to support the request please do not forget to perform that click either. 1 Share this post Link to post Share on other sites
Ivan Gretsky 1,293 Posted January 27 Just found this topic while creating another one in the FormBuilder support subforum. If you like the requies, please give it a thumb-up on github. Share this post Link to post Share on other sites