$(function(){ function addHash(){ if (vizhash.supportCanvas()) { try { var pwd = document.hashForm.userInput.value; var vhash = vizhash.canvasHash(pwd, 64, 64); var pwdhash = document.getElementById('pwdhash'); var hashInput = document.getElementById('hashInput'); if (pwdhash) { hashInput.removeChild(pwdhash)} vhash.canvas.id = 'pwdhash'; hashInput.appendChild(vhash.canvas); } catch (err) { alert(err); } } } $('label').keyup(addHash); });
<h1>VizHash.js Password Check Demo</h1> <p><a href="https://github.com/sametmax/VizhHash.js">Project page</a></p> <form action="." method="get" name="hashForm" accept-charset="utf-8" > <p id="hashInput"> <label for="userInput" > Password: <input type="password" name="userInput" > </label> </p> </form>
canvas { -moz-box-shadow: 3px 3px 3px rgba(68,68,68,0.6); -webkit-box-shadow: 3px 3px 3px rgba(68,68,68,0.6); box-shadow: 3px 3px 3px rgba(68,68,68,0.6); -webkit-border-radius: 15px; -moz-border-radius: 15px; margin:1em; vertical-align:middle; } p { margin:1em; }