Visual Password

by Greg Bowler

HTML

<h1>A visual representation of your password</h1>
<p>
    This concept does not make your password visible to others, but
    allows you to remember a simple 3 colour sequence, so you know
    that the password you typed is correct.
</p>
<form id="visualPass">
    <label for="pass1">Enter your password:</label>
    <input id="pass1" type="password" name="Pass" />
    
    <label for="pass2">Verify your password:</label>
    <input id="pass2" type="password" name="PassValidate" />
</form>

CSS

h1, p {
    font-family: sans-serif;
    margin: 16px;
}
form#visualPass {
    padding: 32px;
}
input[type="password"] {
    position: relative;
    display: block;
    margin: 8px;
    padding: 8px;
    font-size: 24px;
    border: 1px solid #aaa;
    border-radius: 8px;
    outline: none;
    width: 100%;
}

div.visualPass * {
    -webkit-transition: all 0.2s ease-in-out;
}

div.colKey {
    display: block;
    position: absolute;
    width: 12px;
    height: 12px;
    top: 2px;
    right: -20px;
    border-radius: 16px;
}
div.colKey.key0 {
    top: 4px;
}
div.colKey.key1 {
    top: 18px;
}
div.colKey.key2 {
    top: auto;
    bottom: 4px;
}

div.colKey.col0 {
    background-color: #ff0000;
}
div.colKey.col1 {
    background-color: #00ff00;
}
div.colKey.col2 {
    background-color: #0000ff;
}

div.visualPass {
    position: relative;
    width: 50%;
}

JavaScript

// A jquery plugin to transform password fields into a visualPass.

$.fn.visualPass = function() {
    this.wrap($("<div>", {"class": "visualPass"}));
    
    this.keyup(function(e) {
        var 
            i, 
            len = this.value.length,
            total = 0,
            colKeyObj = [],
            colKey = [0,0,0],
            el,
            vp = $(this).parent(".visualPass"),
            c = vp.children(".colKey"),
        _;

        if(len <= 0) {
            return;
        }
        
        for(i = 0; i < len; i++) {
            total += this.value.charCodeAt(i);
        }
        
        colKey[0] = total % 3;
        colKey[1] = Math.floor((total % 6) / 2);
        colKey[2] = Math.floor((total % 9) / 3);
        
        c.remove();
        
        if(colKeyObj.length === 0) {
            for(i = 0; i < colKey.length; i++) {
                el = $("<div>", {
                    "class": "colKey key" + i + " col" + colKey[i],
                });

                colKeyObj.push(el);
                $(this).parent(".visualPass").append(colKeyObj[i]);
            }
            return;
        }
        
        for(i = 0; i < colKeyObj.length; i++) {
            colKeyObj[i][0].className = "colKey key" + i + " col" + colKey[i];
        }
    });
};

$("input").visualPass();