JSFiddle - React, Tailwind, and code Playground

by Mike Seiler

HTML

<form id="changePasswordForm">
		<h3>PASSWORD REQUIREMENTS</h3>
				<p>Passwords must be at least 8 digits long and contain any 3 of the following 4:</p>
				<ol>
					<li>Uppercase Characters</li>
					<li>Lowercase Characters</li>
					<li>Digits 0-9</li>
					<li>Nonalphanumeric Characters<br/>~!@#$%^&*_-+=`|\(){}[]:;"'<>,.?/</li>
				</ol>
        <h4>New Password</h4><div id="passwordMsg"></div>
        <li class="point"></li><li class="point"></li><li class="point"></li><li class="point"></li><br/>
        <label for="firstPass" class="">Password:</label>
        <input id="firstPass" name="firstPass" class="required pass" tabindex="2" value="" accesskey="f" type="password" size="100%" autocomplete="false"/>
        <input class="btn-submit button submit" id="passwordSubmit" name="passwordSubmit" tabindex="4" accesskey="c" value="Change Password" type="submit"/>
</form>

CSS

<style type="text/css">
	.point:last {
	    margin:0 !important;
	}
	.point {
	    background:#DDD;
	    border-radius:2px;
	    display:inline-block;
	    height:5px;
	    margin-right:1px;
	    width:20px;
	}
	</style>

JavaScript

$(document).ready(function() {
	/////////////////
	// Password watcher - Mike Seiler
	// Modified for JQuery from AngularJS Directive by Bruno Scopelliti
	// http://codepen.io/brunoscopelliti/pen/nFlvm
	$("#passwordSubmit").prop("disabled",true);
	
	$("#firstPass").keyup(function(event) {
		var _force = 0;
		var p = $("#firstPass").val();
		if($("#firstPass").is(':empty')) {
			$(".point").css({ "background": "#DDD" });
		}
		// various things to check for
		var _regex = /[$-/:-?{-~!"^_`\[\]]/g;
		var _lowerLetters = /[a-z]+/.test(p);
		var _upperLetters = /[A-Z]+/.test(p);
		var _numbers = /[0-9]+/.test(p);
		var _symbols = _regex.test(p);
		var _flags = [_lowerLetters, _upperLetters, _numbers, _symbols];
		var _passedMatches = jQuery.grep(_flags, function (el) { return el === true; }).length;                                          
		// define the strength of the password
		_force += 2 * p.length + ((p.length >= 8) ? 1 : 0);
		_force += _passedMatches * 10;
		            
		// penalty (short password)
		_force = (p.length < 8) ? Math.min(_force, 10) : _force;                                      
		// penalty (poor variety of characters)
		_force = (_passedMatches == 1) ? Math.min(_force, 10) : _force;
		_force = (_passedMatches == 2) ? Math.min(_force, 20) : _force;
		_force = (_passedMatches == 3) ? Math.min(_force, 30) : _force;
		_force = (_passedMatches == 4) ? Math.min(_force, 40) : _force;
		// Update the CSS Boxes with the strength indicator
        console.log(_force);
        if(_force > 0) {
                var ic = getColors(_force);
                $(".point")
                .css({ "background": "#DDD" })
                .slice(0, ic.index)
                .css({ "background": ic.color });
        }
		if(_force < 20) {
            $("#passwordSubmit").prop("disabled",true);
			$("#passwordMsg").show();
            if(p.length < 8) {
                $("#passwordMsg").text("Too Short").css("color","#FF0000");
            }
            if(p.length...