Jump to content

InputfieldPassword with unmasking button instead of confirm field


Recommended Posts

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

  • Like 10
Link to comment
Share on other sites

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.

  • Like 4
Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

  • 5 weeks later...
  • 2 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...