Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
114 lines (99 sloc) 3.71 KB
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Example: Password strength-checker</title>
<link href="/css/bootstrap.min.css" rel="stylesheet">
<script src="/js/jquery-1.11.0.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src=""></script>
<div class="container">
<div class="col-lg-4">
<form id="check">
<div class="form-group has-feedback" id="check">
<label for="password">Password</label>
<input type="text" class="form-control" id="password" autocomplete="off">
<span id="response">
<button id="submit" type="submit" class="btn btn-default"
<div class="col-lg-4">
<p class="small">
This checker loads a regular expression to test if the password
is strong (or weak). The current regular expression tests if
the password has more than 6 characters, a special character, a
digit, and is mixed-case.
if (!window.COWL) { // No COWL installed
toggleForm(); // disable form
$('#password').val('Sorry, you need a COWL-enabled browser :(');
$('#response').html('<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>')
$('#check').submit(function (event) {
disableForm(); // Disable form
// Get the current value typed into the password field:
var password = $('#password').val();
// Label the password, it's sensitive to the current origin:
password = new LabeledBlob(password, window.location.origin);
// Create new context to execute checker code in:
var lchecker = new LWorker("")
// Register handler to receive messages from worker:
lchecker.onmessage = function (data) {
if (data === 'ready') { // Checker is ready
// Send the labeled password to the checker:
} else { // Checker send us the password strength
enableForm(); // Enable the form again
// Update our response element with icon denoting the strength:
if (data === 'strong') {
} else {
// Don't submit form as usual:
function disableForm() {
function enableForm() {
function toggleForm() {
var pElem = document.getElementById('password');
pElem.disabled = !pElem.disabled;
var sElem = document.getElementById('submit');
sElem.disabled = !sElem.disabled;
function showWeakIcon() {
$('#response').html('<span class="glyphicon glyphicon-thumbs-down form-control-feedback"></span>')
function showStrongIcon() {
$('#response').html('<span class="glyphicon glyphicon-thumbs-up form-control-feedback"></span>')