06/04 Optimize app

templates/reset_password.html

@@ -28,6 +28,10 @@
         <input type="password" id="password" name="password"
                autofocus required minlength="8"
                placeholder="Minimum 8 characters">
+        <div class="pw-strength-wrap">
+          <div class="pw-strength-bar"><div class="pw-strength-fill" id="pw-fill"></div></div>
+          <small class="pw-strength-label" id="pw-label"></small>
+        </div>
       </div>
       <div class="form-group">
         <label for="confirm_password">Confirm Password</label>
@@ -42,5 +46,23 @@
     </p>
 
   </div>
+<script>
+(function() {
+  var input = document.getElementById('password');
+  var fill  = document.getElementById('pw-fill');
+  var lbl   = document.getElementById('pw-label');
+  var map   = ['pw-weak','pw-weak','pw-fair','pw-strong','pw-great','pw-great'];
+  var lbls  = ['Weak','Weak','Fair','Strong','Very strong','Very strong'];
+  input.addEventListener('input', function() {
+    if (!this.value) { fill.className='pw-strength-fill'; lbl.className='pw-strength-label'; lbl.textContent=''; return; }
+    var pw=this.value, s=0;
+    if (pw.length>=8) s++; if (pw.length>=12) s++;
+    if (/[A-Z]/.test(pw)) s++; if (/[0-9]/.test(pw)) s++; if (/[^A-Za-z0-9]/.test(pw)) s++;
+    fill.className='pw-strength-fill '+map[s];
+    lbl.className='pw-strength-label '+map[s];
+    lbl.textContent=lbls[s];
+  });
+}());
+</script>
 </body>
 </html>