GithubHelp home page GithubHelp logo

ablanco / jquery.pwstrength.bootstrap Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tanepiper/jquery.ui.pwstrength

376.0 19.0 188.0 2.21 MB

jQuery Password Strength Meter for Twitter Bootstrap

License: GNU General Public License v3.0

JavaScript 100.00%
jquery jquery-plugin bootstrap password-strength bootstrap3 bootstrap4 bootstrap2

jquery.pwstrength.bootstrap's Introduction

jQuery Password Strength Meter for Twitter Bootstrap

Code Climate JSDeliver

The jQuery Password Strength Meter is a plugin for Twitter Bootstrap that provides rulesets for visualy displaying the quality of a users typed in password.

Dual licensed under the MIT and GPL licenses. You can choose the one that suits your purposes better.

npm entry

Looking for a Premium UI Kit?

AdminKit is a developer friendly & highly customizable Bootstrap 5 admin template featuring hundreds of UI components, forms, tables, charts and icons. Learn more.

AdminKit - Premium Bootstrap 5 admin template

Requirements

  • jQuery 1.7 or higher
  • Bootstrap 2, 3, 4 or 5

Not using Bootstrap?

This plugin currently relies heavily on Bootstrap and it is not possible to use it with another framework without making big changes in the code or forgetting completely about the UI feedback.

Forks to use it with another frameworks that I know of:

How to use it

Get the latest version through Bower, npm, or just download it from this repository. Load it into your HTML after your original bootstrap and jQuery javascript files:

<script type="text/javascript" src="dist/pwstrength-bootstrap.min.js"></script>

Then just invoke the plugin on the password fields you want to attach a strength meter to. For example, to use it on all the password fields with the default examples:

$(":password").pwstrength();

To apply it only to one input and change the options:

$("#passwd1").pwstrength({
    ui: { showVerdictsInsideProgressBar: true },
});

Options

Click here to find the complete list of options for the plugin.

If you are looking for options to change or add new texts, please have a look at the internationalization section.

Methods

Once the plugin has been initialized, it is possible to interact with it through the methods.

Force an update

It is possible to force an update on a password strength meter. It will force a new score calculation and an update of the UI elements, the onKeyUp callback will be called.

$("#passwdfield").pwstrength("forceUpdate");

Remove the strength meter

This will remove the data associated to the meter, and the UI elements.

$("#passwdfield").pwstrength("destroy");

Adding Custom Rules

The plugin comes with the functionality to easily define your own custom rules. The format is as follows:

$("#passwdfield").pwstrength(
    "addRule",
    "ruleName",
    function (options, word, score) {},
    rule_score,
    rule_enabled
);

Example:

$("#passwdfield").pwstrength(
    "addRule",
    "testRule",
    function (options, word, score) {
        return word.match(/[a-z].[0-9]/) && score;
    },
    10,
    true
);

Change the score associated to a rule

It is possible to change the score given by a rule. It works like this:

$("#passwdfield").pwstrength("changeScore", "wordSequences", -100);

That would penalize even more the presence of sequences in the password.

Activate and deactivate rules

It is also possible to activate or deactivate rules. It as simple as:

$("#passwdfield").pwstrength("ruleActive", "wordSequences", false);

That would avoid looking for sequences in the password being tested.

Know if all password inputs pass a specific rule

This method allows to make a quick check to test if all password inputs in the page pass a rule, the method returns a boolean value. Example:

$("#passwdfield").pwstrength("ruleIsMet", "wordSequences");

Callback Functions

The plugin provides three callback functions, onLoad, onKeyUp, and scoreCalculated. You can use them like this:

$(document).ready(function () {
    var options = {};
    options.common = {
        onLoad: function () {
            $("#messages").text("Start typing password");
        },
        onKeyUp: function (evt, data) {
            $("#length-help-text").text(
                "Current length: " +
                    $(evt.target).val().length +
                    " and score: " +
                    data.score
            );
        },
        onScore: function (options, word, totalScoreCalculated) {
            // If my word meets a specific scenario, I want the min score to
            // be the level 1 score, for example.
            if (
                word.length === 20 &&
                totalScoreCalculated < options.ui.scores[1]
            ) {
                // Score doesn't meet the score[1]. So we will return the min
                // numbers of points to get that score instead.
                return options.ui.score[1];
            }
            // Fall back to the score that was calculated by the rules engine.
            // Must pass back the score to set the total score variable.
            return totalScoreCalculated;
        },
    };
    $(":password").pwstrength(options);
});

Extra restrictions

The plugin comes with two validation rules deactivated by default. One checks the length of the password and penalizes it if it's too long; and the other checks if the password contains a banned char, and penalizes it if it does.

You can configure the max length of the password by using the option maxChar. You can also configure the invalid chars by using the option invalidCharsRegExp.

If you need these restrictions you just need to activate this two rules:

$(document).ready(function () {
    var options = {};
    options.rules = {
        activated: {
            wordMaxLength: true,
            wordInvalidChar: true,
        },
    };
    $(":password").pwstrength(options);
});

Internationalization (i18n)

The plugin has support for internationalization. It also comes with some example translations, you can find them in the locales folder.

The plugin provides a default implementation of the translation function, but you can override it using the option i18n.t.

The default implementation will try to make use of the popular i18next front-end translation tool. If you happen to use it, then you only need to add the translations into your resources and load them. The plugin will automatically make use of it. You can find more details about and how to use it i18next in their website. There is also an example in the repository that uses that library.

In case the i18next library is not available, then the default behavior is to return the english texts as a fallback.

What are the translatable texts?

You can find the non-rules texts in any of the provided translation example files, and besides what you find there, every rule name is a valid key for the translation file. You can use this to add new error messages (or remove them) for the engine rules.

How to customize the translation function

If you want to manage translations yourself or you don't use i18next you can override the default translation function like this:

$(document).ready(function () {
    var options = {};
    options.i18n = {
        t: function (key) {
            var result = translateThisThing(key); // Do your magic here

            return result === key ? "" : result; // This assumes you return the
            // key if no translation was found, adapt as necessary
        },
    };
    $(":password").pwstrength(options);
});

You can find an example of some keys and translations in the locales folder.

Examples

There are some examples in the examples directory. Just serve them with any webserver and check them in your browser. Make sure you serve the examples directory as the site root. For example:

cd examples
python -m SimpleHTTPServer

And go to localhost:8000.

Alternatively, you can check-out the examples in a hosted demo.

Build and Test

The build and testing processes rely on Grunt. To use them you need to have node.js and grunt-cli installed on your system. Assuming you have node.js in your Linux system, you'll need to do something like this:

sudo npm install -g grunt-cli

Now you have the grunt command line utility installed globally.

Bundle and minified

To generate the bundle and the minified file you only need to execute this in the project directory:

npm install -d
grunt

It will check the source files, and build a minified version with its corresponding source map. The generated files will be available in the dist directory.

Testing

To run the tests the only thing you need to do is execute this in the project directory:

npm install -d
grunt test

It will check all the source files with ESLint and run the tests, which are written with Jasmine. You'll find the tests source code in the spec directory.

jquery.pwstrength.bootstrap's People

Contributors

ablanco avatar bakcay avatar codecamv avatar dameon87 avatar dependabot[bot] avatar dibiancoj avatar fuzzfree avatar glensc avatar guilpejon avatar inadarei avatar jmontoyaa avatar kaitanilabs avatar kalpetros avatar kamihouse avatar kmuharam avatar liverbool avatar maurojs10 avatar maximilianmeister avatar mikestecker avatar mindcreations avatar pascalgentemann avatar paullaros avatar peconia avatar petergoes avatar quix0r avatar samlev avatar saparicio avatar skakruk avatar thiagorcdl avatar tziporaziegler avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

jquery.pwstrength.bootstrap's Issues

Paste password (ctr+v).

If the password is inserted (ctr+v) in the input field, pwstrength does not work.
How can I fix this problem?

Can't pass more than one User Input to zxcvbn

When using the zxcvbn library, you can specify options.common.usernameField to pass the value of that control as a user input to zxcvbn, however there is no way to pass additional data. For example, one might have the users first name, last name, date of birth etc.

I propose that an options.common.userInputs setting be added. This setting would be a string array that would be passed to zxcvbn as addition user inputs along with the usernameField.

Object doesn't support property or method 'pwstrength'

I have the script on three other pages in the site and all work fine. I am having trouble getting it to work on a page in my admin screen. Same exact code, only difference is the password field is the only field on the form. I am getting "Object doesn't support property or method 'pwstrength'" no matter what I try. I tried adding another field, I tried renaming the password field, I took out the options, nothing seems to work.

@model Thinktecture.IdentityServer.Web.Areas.Admin.ViewModels.UserPasswordModel

@{
    ViewBag.Title = "Change Password for " + Model.Username;
}

<div id="pwd-container">
    @using (Html.BeginForm(null, null, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
    {
        @Html.ValidationSummary("Errors updating profile:")
        @Html.AntiForgeryToken()

        <fieldset class="editor small">
            <legend>@ViewBag.Title</legend>
            <div class="form-group">
                @Html.LabelFor(m => m.NewPassword, new { @class = "col-md-3 control-label" })
                <div class="col-md-9">
                    @Html.TextBoxFor(m => m.NewPassword, new { @class = "form-control" })
                    <div class="col-md-9" style="padding:0 18px 6px 20px;">
                        Strength: <div class="pwstrength_viewport_progress"></div>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <div class="col-md-offset-4 col-md-8">
                    <button class="btn btn-default">Update</button>
                </div>
            </div>
        </fieldset>
    }
</div>

<nav class="links">
    <ul>
        <li>@Html.ActionLink("back to Users", "Index", "User", null, null)</li>
    </ul>
</nav>

<script type="text/javascript" src="~/Scripts/pwstrength.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        "use strict";
        var options = {};
        options.common = {
            minChar: 8,
            debug: true
            //    onLoad: function () {
            //        $('#messages').text('Start typing password');
            //    }
        };
        options.rules = {
            activated: {
                wordTwoCharacterClasses: true,
                wordRepetitions: true
            }
        };
        options.ui = {
            container: "#pwd-container",
            viewports: {
                progress: ".pwstrength_viewport_progress"
            },
            showVerdictsInsideProgressBar: true,
            showStatus: true,
            showErrors: true
        };
        $('#NewPassword').pwstrength(options);
    });
</script>

What could be the cause?

Remove span tag of verdict text

Hello,

I want to show the verdict text in input-group-addon as below.

<div class="input-group">
  <input type="password" class="form-control" id="current-password">
  <div class="input-group-addon" id="current-password-verdict"></div>
</div>

Is there any way to remove the span tag which wraps the verdict text.

Adding error messages to existing rules

Hello,

Many of the existing rules (such as wordUppercase) don't have error messages.
How would I add them via the options object? Would it be possible to see an example? I'd like to add a custom error message for ALL existing rules.

Many thanks!

Adding "012" to any password makes it weaker

The password strength drops whenever I add "012" to the end of a password.

Examples:

Simple password:
"goop33" = medium
"goop33012" = nill

Random 12 character:
"Fa2PmxBTTWzT" = strong
"Fa2PmxBTTWzT012" = normal
"012Fa2PmxBTTWzT" = weak
"Fa2012PmxBTTWzT" = normal
"Fa2PmxBTTWzTpassword" = very strong

Random 20 character:
"Nq4YGDQf3HJcXU3ZDsjv" = very strong
"012Nq4YGDQf3HJcXU3ZDsjv" = strong
"Nq4YGDQf3HJcXU3ZDsjv012" = very strong <-- doesn't drop if I add "012" anywhere past 7 chars
"Nq4Y012GDQf3HJcXU3ZDsjv" = strong

Mark input field on error

On error, mark input field with a css class (if you don't want to use error text):
usage:
onKeyUp: function (evt) {
$(evt.target).pwstrength("markInputOnError", "invalid");
code:
methods.markInputOnError = function (className) {
this.each(function (idx, el) {
var self = this,
$el = $(el),
localOptions = $el.data("pwstrength-bootstrap");

    if ($el.val().length > 0 && localOptions.instances.errors.length > 0) {
      $(self).addClass(className);
    } else {
      $(self).removeClass(className);
    }
  });
};

Negative values show no bar

The growing bar to show the password strength is nice, but when negative values are possible, then there will be no bar at all. This means, that I could type a very weak password, but get no verdict.

It would be better to produce "width: 1%" when the result is negative instead of 0%.

Dual passwords

Hello,
i love the plugin, i am using it but i am having an issue because i have 2 inputs type="password" where the second one is to confirm password

i am getting 2 progress bars

any quick solution to hide one ?

Ability to retrieve current verdict (level)

Reviewing the code, there doesn't seem to be a way to retrieve the current password verdict (besides UI update).

The use case could be a scenario where we require a minimum verdict in order to accept a password.

Ideally we could pick up the verdict level whenever needed (ie: $(elem).data("pwstrength-verdict") and it could be useful to pass this in to the existing onKeyUp event (ie: options.common.onKeyUp(event, verdict);)

javascript errors

ReferenceError: jQuery is not defined
file:///D:/Downloads/jquery.pwstrength.bootstrap-1.1.0/jquery.pwstrength.bootstrap-1.1.0/examples/pwstrength.js
Line 587
ReferenceError: jQuery is not defined
file:///D:/Downloads/jquery.pwstrength.bootstrap-1.1.0/jquery.pwstrength.bootstrap-1.1.0/examples/bootstrap3/index.html
Line 32
TypeError: $ is undefined
file:///D:/Downloads/jquery.pwstrength.bootstrap-1.1.0/jquery.pwstrength.bootstrap-1.1.0/examples/bootstrap3/bootstrap3.js
Line 1
ReferenceError: jQuery is not defined
file:///D:/Downloads/jquery.pwstrength.bootstrap-1.1.0/jquery.pwstrength.bootstrap-1.1.0/examples/bootstrap3/zxcvbn.html
Line 33

Errors not showing with zxcvbn

Hi i've noticed my errors are not longer showing when i added the zxcvbn:true
my errors where showing untill i added zxcvbn, i was just wondering if there is a way to get error messages to still show with zxcvbn

heres the part of code;

    var input = $("#register_password");
        input.pwstrength({
            common: {
                 onLoad: function() {
                      $('#messages').text('Start typing password');
                    },
                 minChar: 8,
                 zxcvbn: true,
                 usernameField: "#username",
                 userInputs: ['#firstname', '#lastname', '#displayname', '#email'],
                 debug: true
            },
            rules: {
                raisePower: 1.4,
                activated: {
                    wordTwoCharacterClasses: true,
                    wordRepetitions: true
                }
            },
            ui: { 
                container: ".password-strength",
                showErrors: true,
                showStatus: true,
                showVerdictsInsideProgressBar: true,
                verdicts: ["Weak", "Normal", "Medium", "Strong", "Very Strong"],
                viewports: {
                  progress: ".password-progress",
                  errors: ".password-errors"
                   }
                },
            });
            input.pwstrength("addRule", "demoRule", function (options, word, score) {
                return word.match(/[a-z].[0-9]/) && score;
            }, 10, true);

Hide the verdict if the password field is empty

If typing a password and then removing it again, the bar is gone but the verdict is still there.

Should add:

$(this).on('keyup', function () {
    $(this).find('+ .progress').show().find('+ .password-verdict').show()
    if ($(this).val().length == 0) $(this).find('+ .progress').hide().find('+ .password-verdict').hide()
})

or similar,

and on init hide .progress and .password-verdict.

Incorrect alphabetical forbidden sequence

The alphabetical forbidden sequence is out of order.. it should be "wxyz" instead of "xywz"

 rulesEngine.forbiddenSequences = [
        "0123456789", "abcdefghijklmnopqrstuvxywz", "qwertyuiop", "asdfghjkl",
        "zxcvbnm", "!@#$%^&*()_+"
    ];

Minify fails to compress source

I have the latest minify version and the latest version of jquery.pwstrength.bootstrap but when adding this plugin to my list of scripts, minification fails.
Am I doing something wrong?

username common usernameField

Hi, in the options.js file, I'm trying to change the default option name for the usernameField from "#username" to "#UserName" and it does not seem to be recognizing my input field with that name (to issue an error message). Do you know why that would be? Is there another place where I need to change the field name?

wordOneSpecialChar contains a typo

In current master, the wordOneSpecialChar regex appears to contain a typo.

Currently it contains word.match(/.[!,@,#,$,%,\^,&,*,?,_,~]/). This only returns true if the special character is not preceded by a character. Comparisons to similar rules suggest that this should be .*; i.e. word.match(/.*[!,@,#,$,%,\^,&,*,?,_,~]/)

Progress bar shows no status with score < 0

Hello,

I am using a default implementation of the plugin. My debug shows me scores in chrome. No score is displayed until the score is above zero. A one character pw has a score of -45 but it doesn't show 'weak' for that.

I have tried modifying the scores: option in the UI options to make it start for a score of less than zero, but it doesn't work.

This looks good but I can't find enough docs/usage examples to make it work for me!

How to show ui messages for custom rules?

Hey there,

I would like to have rules for these:

Contain at least one upper case letter
Contain at least one lower case letter
Contain at least one number
Contain at least one special character
Enforce at least one changed character when passwords are changed

Is that possible with this plugin?

password is valid or not?

Hi Ablanco,

what the method shall we call it to check if the entered password is valid or not to can submit my form?

Password with all same character is very strong?

Normally a password of 22 characters in length would be very strong but how can that be when all 22 characters are the same letter? I get the "Too many repetitions" message but a meter of Very Strong.
This seems to be a conflict and confusing to the user.

Bug with zxcvbn

If you use the zxcvbn option there is a bug with the userInputs array; if it includes undefined values then zxcvbn throws an error.

This will happen if the usernameField option is not set.

Also the current setup does not support a fixed word list being passed to zxcvbn:

"This list is also good for site-specific vocabulary. For example, ours includes dropbox."

I have added an additional option to allow a word list:

defaultOptions.common.zxcvbnWords = [];

and validation to the push() lines in the zxcvbn call:

            if (options.common.zxcvbn) {
                userInputs = options.common.zxcvbnWords;
                $.each(options.common.userInputs, function (idx, selector) {
                    if ($(selector).val()) {
                        userInputs.push($(selector).val());
                    }
                });
                if ($(options.common.usernameField).val()) {
                    userInputs.push($(options.common.usernameField).val());
                }
                score = zxcvbn(word, userInputs).entropy;
            } else {
                score = rulesEngine.executeRules(options, word);
            }

Asyc postback

I am having a problem with the control disappearing when i place it inside an update panel. I know this is expected behavior, so have added a client end request handler to re-init the control after an async postback. This works, however it creates a new progress bar each time you postback. I tried doing a destroy first, then a create but it disappears again.

Is there anything I can do other than moving it out of the update panel?

Thanks

destroy method

Hi, is there any destroy method that i can use when closing the form ?

custom rules

I'd like to have a rule that only accepts passwords that have

  • at least one Uppercase char
  • at least one lowercase char
  • at least one number
  • minimum 6 chars

I am sure this is quite possible with the library, but the documentation is lacking a bit here. How do I achieve this?

jqueryvalidation and pwstrength seem to conflict

Given the following code involving validation and pwstrength:

$(document).ready(function() {
  var form, options;
  form = $("#file_form");
  $("#file_form").validate({
    rules: {
      name: {
        required: true
      },
      file: {
        required: true
      },
      mobile: {
        required: true
      },
      email: {
        required: true,
        email: true
      },
      password: {
        required: true
      }
    },
    highlight: function(element) {
      $(element).closest(".form-group").removeClass("has-success").addClass("has-error");
    },
    unhighlight: function(element) {
      $(element).closest(".form-group").removeClass("has-error");
    }
  });
  options = {};
  options.ui = {
    container: "#strength-area",
    showVerdictsInsideProgressBar: true,
    showErrors: true,
    viewports: {
      progress: "#password-strength",
      verdict: "#password-strength"
    }
  };
  options.common = {
    minChar: 8
  };
  $("#password").pwstrength(options);

    $("#encrypt-button").click(function() {
      var valid;
      valid = form.valid();
      if (valid) {
        alert("Valid!");
        readSingleFile();
      }
});

jQueryValidation will validate all fields in the form when clicking #encrypt-button except the password field. Basically, nothing happens.

If the two are truly incompatible, is it possible to call some kind of function to force pwstrength to update progress, errors and verdict? Is there a function to evaluate the current score?

If I could determine that the current score was negative via a function call, I could use that along with .valid() to decide whether or not to proceed. And, if I could call a function to force pwstrength to update the progress, errors and verdict, it would end up setting the field to the correct error state (assuming the field was invalid).

Thanks!

Bower package

Please make it available this plugin available via bower since I could not find it.

Thanks !

Popover flickers on every keystroke

If there is an error, a popover flickers (extremely unsexy) on every pressed key like it gets hidden and showed right after that.
Looks like:
$el.popover("destroy");
...
$el.popover("show");
Could you not check before destroy whether an error remains and just set a new content instead of destroy->show?

Use popover just for errors

We would like to show errors in a popover, like with:
showPopover: true,
showErrors: true
but just errors! if there are no errors, the popover will disappear.
verdicts still gets displayed inside the bar if the password is valid.

like:
showPopover: [always/onError],
showVerdictsInsideProgressBar: true

showErrors + showPopover + showVerdictsInsideProgressBar = popover verdict

I am trying to show the errors as a popover, but I am also trying to show the verdict/strength in a progress bar. Unfortunately, this is giving me the unintended result of showing me the verdict as a popover.

Here's my sample jquery code:

$(document).ready(function() {
  var options;
  options = {};
  options.ui = {
    container: "#strength-area",
    showVerdictsInsideProgressBar: true,
    showErrors: true,
    showPopover: true,
    viewports: {
      progress: "#password-strength"
    }
  };
  options.common = {
    minChar: 8
  };
  $("#password").pwstrength(options);
});

It's probably user error, but I would expect that if the verdicts are asked to be shown inside the progress bar, that they would not be shown in the popover at all.

Locating viewports in neighbouring divs

Hi

Thanks so much for this script. Its really well written and very easy to integrate.

I made a small tweak that might help others? In bootstrap 3 I have help text in a neighbouring div

<div class="row">
  <div class="col-lg-2">
    <label for="password">Password</label>
  </div>
  <div class="col-lg-4">
    <input type="password" name="password" class="form-control" placeholder="Your password">
  </div>
  <div class="col-lg-6 my-help-text">
      At least 12 characters <span class="pwstrength_viewport_progress"></span> <span class="pwstrength_viewport_verdict"></span>
  </div>
</div>

pwstrength.js does not detect it because it calls $el.parent() in many places, which only allows for the viewport.progress to be in the same div.
Often to get the layout you need in BS3, you have to add extra divs around your form-controls to constrain width or mess around with other stuff.

To work around this issue, i added

var $parent = $el.parent().parent();
...
$parent.find(allOptions.viewports.progress).append(progressbar);

in several places, which allows a slightly greater separation between the :password input and the progress bar / verdict

onKeyUp odd behavior + RFE for "has-error"

So I'm seeing slightly odd behavior when using the onKeyUp method. Here's what I've got:

$(document).ready(function() {
  var options;
  options = {};
  options.ui = {
    container: "#strength-area",
    showVerdictsInsideProgressBar: true,
    showErrors: true,
    viewports: {
      progress: "#password-strength",
      verdict: "#password-strength"
    }
  };
  options.common = {
    minChar: 8,
    debug: true,
    onKeyUp: function(evt, pwobj) {
      if (pwobj.score < 0) {
          $(evt.target).closest(".form-group").addClass("has-error");
      }
      else if (pwobj.score > 0) {
          $(evt.target).closest(".form-group").removeClass("has-error");
      }
    }
  };
  $("#password").pwstrength(options);
});

As of right now, pwstrength does not automatically add the "has-error" class onto the form group containing the password field, as per:
http://getbootstrap.com/css/#forms-control-validation

So I attempted to do this with onKeyUp, but I'm noticing some weird behavior:

  1. When you type the first character, the "has-error" class is successfully added.
  2. Once you reach the nth character and the password becomes valid, the "has-error" class is successfully removed.

But, this is where things get odd. If I click outside of the password field, and then click back into the password field, and start manipulating the password again, the scores come in correctly, but the evt.target no longer seems to have the password field, because the addClass/removeClass stop actually manipulating the classes of the form group.

Now, I could cheat and use an ID on the form group of the password, but:

  1. Why does evt.target no longer refer to the password field on keyup after clicking out of the field? (or am I misunderstanding?)

  2. it would be nice if there was an option on pwstrength to add the "has-error" class (default:true or false, etc).

Thanks!

How do I tell the user what the minimum requirement is?

I have a working example on my password field but I'm a bit unsure how I specifically tell the user how strong their password needs to be.

For instance, some websites say:

Minimum 6 characters
At least 1 upper case letter
At least 1 symbol

At the moment, I am just picking up the "data.score" and allowing the user to continue with saving their password so long as the score is above 38 (I have picked 38 out of thin air - what are the absolute scores that define what is medium, what is strong etc etc... - in truth I'm a bit unsure what I'm fully doing!

verdictText should accept html

Instead of text, verdictText should accept html. Then we could use e.g. Font Awesome icons or sprites instead of words.

Line 405 should be changed into

$verdict.html(text);

Thanks!

Word boundary issue in rule: validation.wordSequences

Hi!
I think there is an issue in the rule wordSequences with the upper bound of for loop (src/rules.js:82). It doesn't check the 3 letter snippet against the very end of the given password.

Here are 2 tests highlighting the issue:

describe('sequence in password', function () {
    beforeEach(function () {
        options.instances.errors = [];
    });

    it('working on abcx', function () {
        var password = 'abcx';
        expect(rulesEngine.validation.wordSequences(options, password, 123))
                .toEqual(123);
        expect(options.instances.errors).toEqual([ "sequence_found" ]);
    });

    it('not working when at the end', function () {
        var password = 'xabc';
        expect(rulesEngine.validation.wordSequences(options, password, 123))
                .toEqual(123);
        expect(options.instances.errors).toEqual([ "sequence_found" ]);
    });
});

(I temporarily disabled jslint for these tests)
As far as I can see the upper limit of the for loop should be word.length - 2 instead of word.length - 3. This would be here:

for (j = 0; j < (word.length - 2); j += 1) { //iterate the word trough a sliding window of size 3:

Thanks for the project, makes our lives here a bit easier ;)

Cheers,
m

Custom rule regex

Hi

Hopefully you can help me :)

How can I make a custom rule with the following regex:

"/(?=.\d)(?=.[a-z])(?=.[A-Z])(?=.[@#$%]).{8,30}/"

(so "asaFSD663$%$asaas" is a valid password for example)

Every password which doesnt match the regex should get the lowest verdict (password is invalid and cannot be used), whatever comes before or after.

Thanks for your help,
Frank

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.