InputfieldPassword with unmasking button instead of confirm field

[dotnetic 924]

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 MailChimp
https://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

[tpr 3,235]

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.

[dotnetic 924]

@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.

[tpr 3,235]

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 🙂

[LostKobrakai 5,207]

Afaik that distinction is just one some frameworks use. The js api doesn‘t do that.

[szabesz 2,846]

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.

[Ivan Gretsky 1,293]

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.