Password strength

[rcurrier666]

I'd like to see some sort of password strength indicator supported. Either a bar graph style or just words. It should either have multiple options for types of strength calculation or a plugin like interface where I would do the heavy lifting. In particular, I'm interested in zxcvbn.

[splendido]

Could you think about extending the password field by providing a custom template to be used? See the template option in the form fields configuration section.

I'd say something like:

AccountsTemplates.removeField('password');
AccountsTemplates.addField({
    _id: 'password',
    type: 'password',
    required: true,
    template: 'myPwdTemplate',
});

<template name="myPwdTemplate">
  {{> atTextInput}}
  <!-- password strength indicator here -->
</template>

plus some addition to the myPwdTemplate's helpers could be a good start!

[splendido]

I'd be curious to see where this could get and possibly publish a plugin package to add the strength indicator ;-)

[splendido]

If you wish to play a bit, this is a good starting point:

file pwd_strength.html

<template name="pwdStrength">
    {{> atTextInput}}
    <ul id="strength" check-strength="pw" style="{display: inline;}">
        <li class="point" style="{{style 1}}"></li>
        <li class="point" style="{{style 2}}"></li>
        <li class="point" style="{{style 3}}"></li>
        <li class="point" style="{{style 4}}"></li>
        <li class="point" style="{{style 5}}"></li>
    </ul>
</template>

file `pwd_strength.css

.point {
  background: #DDD;
  border-radius: 2px;
  display: inline-block;
  height: 5px;
  margin-right: 1px;
  width: 60px;
}

file pwd_strength.js

Template.pwdStrength.onCreated(function(){
    this.strength = ReactiveVar(3);
});

Template.pwdStrength.helpers({
    style: function(position) {
        var strength = Template.instance().strength.get();
        if (position > (strength + 1)) {
            return 'background: rgb(221, 221, 221);';
        }
        else if (strength <= 1) {
            return 'background: rgb(255, 0, 0);';
        }
        else if (strength <= 3) {
            return 'background: rgb(255, 153, 0);';
        }
        else if (strength <= 4) {
            return 'background: rgb(153, 255, 0);';
        }
        else {
            return 'background: rgb(0, 255, 0);';
        }
    },
});

Template.pwdStrength.events({
    "keyup input": function(event, t){
                // Some interesting strength calculation here...
                var strength = Math.random() * 6;

        Template.instance().strength.set(strength);
    },
});

password field configuration:

AccountsTemplates.removeField('password');
AccountsTemplates.addField({
    _id: 'password',
    type: 'password',
    required: true,
    template: 'pwdStrength',
});

[rcurrier666]

That answers my question as to how to get the indicator in the correct place. I missed the option to replace the template. Thanks.

= Ron

On 8/21/2015 3:36 PM, Luca Mussi wrote:

Could you think about /extending/ the password field by providing a custom template to be used? See the |template| option in the form fields configuration https://github.com/meteor-useraccounts/core/blob/master/Guide.md#form-fields-configuration section.

I'd say something like:

AccountsTemplates.removeField('password'); AccountsTemplates.addField({ id: 'password', type: 'password', required: true, minLength: 6, re:/(?=.\d)(?=._[a-z])(?=.*[A-Z]).{6,}/, errStr: 'At least 1 digit, 1 lower-case and 1 upper-case', template: 'myPwdTemplate', });

plus some addition to the |myPwdTemplate|'s helpers could be a good start!

— Reply to this email directly or view it on GitHub https://github.com/meteor-useraccounts/core/issues/519#issuecomment-133580721.

[splendido]

[rcurrier666]

That was what I was looking for originally. I may take a stab at it, but (1) it's not on the critical path of getting my app done so I'd have to do it on my own time and (2) I'm still new to Meteor and haven't tried building a package yet.

I should probably treat it as a learning exercise.

= Ron

On 8/21/2015 3:37 PM, Luca Mussi wrote:

I'd be curious to see where this could get and possibly publish a plugin package to add the strength indicator ;-)

— Reply to this email directly or view it on GitHub https://github.com/meteor-useraccounts/core/issues/519#issuecomment-133580816.

[splendido]

...the only problem is if you want password confirmation: with the above example you get two strength indicators :(

[splendido]

Ok, no pressure. Just let me know where do you get ;-)

...on the way there would probably be also the wrapping of the zxcvbn package for Meteor

[rcurrier666]

Because both fields use the same template? There should be some way to tell them apart.

On 8/21/2015 4:23 PM, Luca Mussi wrote:

...the only problem is if you want password confirmation: with the above example you get two strength indicators :(

— Reply to this email directly or view it on GitHub https://github.com/meteor-useraccounts/core/issues/519#issuecomment-133588262.

[splendido]

yeah, the password_again field is actually cloned from the password one!

...but, realizing right now, only if you don't explicitely configure it actually :)

AccountsTemplates.removeField('password');
AccountsTemplates.addField({
    _id: 'password',
    type: 'password',
    required: true,
    template: 'pwdStrength',
});

AccountsTemplates.addField({
    _id: 'password_again',
    type: 'password',
    required: true,
});

solves the problem :)

[rcurrier666]

I'm back to looking at this but it appears that the password field is shared between sign-in and sign-up so a password strength meter appears on the sign-in page. Looks bad. I'm thinking I can remove and re-add the password field with the default template in my sign-in code. I'll keep this thread up-to-date with my progress just in case anyone else is following.