Jump to content
dotnetic

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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 🙂

  • Like 1

Share this post


Link to post
Share on other sites

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

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.

  • Like 1

Share this post


Link to post
Share on other sites

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

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...