StrongPass custom render demo

password meter demo #2

by Dimitar Christoff

HTML

<script src="https://raw.github.com/DimitarChristoff/StrongPass/master/Source/StrongPass.js"></script>
<h2>Type a password below and see how it evaluates it. min chars = 6, banned passwords warning. </h2>

<div class="left">
    <input id="password" name="password" type="text" />
</div>
<div class="left" id="password-strength">
    Password strength: <span class='pwStrengthResult'></span>
</div>

CSS

#password {
    padding: 10px;
    border: 1px solid #000;
    margin: 0 0 10px;
}


.left {
    float: left;
    margin-right: 40px;
}

* {
    font-family: verdana, arial
}

#password-strength {
    padding: 5px;
}

JavaScript

var indicator = document.getElement('span.pwStrengthResult'),
    colourIndicate = function(level, label) {
        indicator.set({
            html: label,
            styles: {
                color: this.options.colors[level] || this.options.colors.getLast()
            }
        })
    }

new StrongPass('password', {
    bannedPass: 'Very weak (too common)',
    verdicts: [
        'Too Short',
        'Weak',
        'Good',
        'Strong'
    ],
    colors: [
        '#777',
        '#900',
        '#070',
        '#0c0'
    ],
    // tweak scores here
    scores: [
        10,
        30,
        40,
        100
    ],
    injectTarget: 'password-strength',
    injectPlacement: 'top',
    render: false,
    onPass: function() {
        colourIndicate.apply(this, arguments);
    },
    onFail: function() {
        colourIndicate.apply(this, arguments);
    }
});