2 files changed, 90 insertions, 0 deletions
diff --git a/static/css/main.css b/static/css/main.css
index 31caa19..f44e5a6 100644
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -288,3 +288,8 @@ textarea {
   background-color: #fff3cd;
   border-color: #ffeeba;
 }
+
+.password_strength {
+  text-align: right;
+  display: block;
+}
diff --git a/static/js/password_strength.js b/static/js/password_strength.js
new file mode 100644
index 0000000..af0b1c4
--- /dev/null
+++ b/static/js/password_strength.js
@@ -0,0 +1,85 @@
+(function(){
+
+function count(val, rxp){
+  const match = val.match(rxp)
+  return match ? match.length : 0
+}
+
+function passwordStrength(password, options={}) {
+  const opt = Object.assign(options,{
+    "minLength": 10,
+    "minOther": 3,
+    "texts" : [
+        'Too weak',
+        'Weak password',
+        'Normal strength',
+        'Strong password',
+        'Very strong password'
+    ]
+  })
+
+  
+  const len = password.length
+  if (len < opt["minLength"]) {
+    return opt["texts"][0];
+  }
+
+  const num = count(password, /\d/g),
+    lower = count(password, /[a-z]/g),
+    upper = count(password, /[A-Z]/g),
+    special = len - num - lower - upper,
+    other = num + special
+
+  if (lower == 0 || upper == 0 || other < opt["minOther"]) {
+    return opt["texts"][0];
+  }
+
+  // Strength is just based on password length
+  if (len < 11) {
+    return opt["texts"][1];
+  }else if (len < 13) {
+    return opt["texts"][2];
+  }else if (len < 16) {
+    return opt["texts"][3];
+  }else if (len >= 16) {
+    return opt["texts"][4];
+  }
+ 
+  // falltrough
+  return opt["texts"][1];
+}
+
+
+// auto setup for data-password-strength
+
+document.querySelectorAll("input[data-password-strength]").forEach( ($elm) => {
+  $elm.addEventListener("keyup", (e) => {
+    const val = $elm.value;
+    if (val.length > 0) {
+      // check if we have a .password_strength beside the field
+      let $info = $elm.parentNode.querySelector(".password_strength")
+      if (!$info) {
+        $info = document.createElement("span");
+        $info.classList.add("password_strength");
+        $elm.parentNode.appendChild($info);
+      }
+      $info.textContent = passwordStrength(val);
+    }
+  }, false)
+})
+
+
+document.querySelectorAll("input[data-same-as]").forEach( ($elm) => {
+  const $target = document.querySelector("#"+$elm.dataset.sameAs)
+  if ($target) {
+    $elm.addEventListener("keyup", (e) => {
+      if ($elm.value != $target.value) {
+        $elm.setCustomValidity("Passwords do not match")
+      }else{
+        $elm.setCustomValidity("");
+      }
+    })
+  }
+});
+
+})();