As you type verify password (#602)

google · Sep 19, 2020 · 4678bc0 · 4678bc0
1 parent ef8f106
commit 4678bc0
Showing 1 changed file with 87 additions and 82 deletions.
diff --git a/cmd/server/assets/login/select-password.html b/cmd/server/assets/login/select-password.html
@@ -83,8 +83,6 @@
   </main>
 
   {{template "scripts" .}}
-  {{template "loginscripts" .}}
-
   <script type="text/javascript">
     $(function() {
       let $form = $('#loginForm');
@@ -116,6 +114,10 @@
            $submit.prop('disabled', true);
         });
 
+      $password.change(function() {
+        $submit.prop('disabled', !checkPasswordValid($password.val()));
+      });
+
       $form.on('submit', function(event) {
         let email = $email.val();
         let pwd = $password.val();
@@ -124,88 +126,10 @@
           return false;
         }
 
-        {{if .requirements.HasRequirements}}
-        let upper = 0;
-        let lower = 0;
-        let digit = 0;
-        let special = 0;
-        let specialPattern = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);
-        for (let i = 0; i < pwd.length; i++) {
-          let c = pwd.charAt(i);
-          if (!isNaN(parseInt(c, 10))) {
-            digit++;
-          } else if (specialPattern.test(c)) {
-            special++;
-          } else if (c == c.toUpperCase()) {
-            upper++;
-          } else if (c == c.toLowerCase()) {
-            lower++;
-          }
+        if (!checkPasswordValid(pwd)) {
+          return false
         }
 
-        let fail = false;
-        let errClass = "oi oi-circle-x pr-1";
-        let checkClass = "oi oi-circle-check pr-1";
-
-        {{if gt .requirements.Length 0}}
-        if (pwd.length < {{.requirements.Length}}) {
-          $lenReq.find("#icon").attr("class", errClass)
-          $lenReq.addClass("text-danger");
-          fail = true;
-        } else {
-          $lenReq.find("#icon").attr("class", checkClass)
-          $lenReq.addClass("text-muted");
-        }
-        {{end}}
-
-        {{if gt .requirements.Uppercase 0}}
-        if (upper < {{.requirements.Uppercase}}) {
-          $upperReq.find("#icon").attr("class", errClass);
-          $upperReq.addClass("text-danger");
-          fail = true;
-        } else {
-          $upperReq.find("#icon").attr("class", checkClass);
-          $upperReq.addClass("text-muted");
-        }
-        {{end}}
-
-        {{if gt .requirements.Lowercase 0}}
-        if (lower < {{.requirements.Lowercase}}) {
-          $lowerReq.find("#icon").attr("class", errClass);
-          $lowerReq.addClass("text-danger");
-          fail = true;
-        } else {
-          $lowerReq.find("#icon").attr("class", checkClass);
-          $lowerReq.addClass("text-muted");
-        }
-        {{end}}
-
-        {{if gt .requirements.Number 0}}
-        if (digit < {{.requirements.Number}}) {
-          $numReq.find("#icon").attr("class", errClass);
-          $numReq.addClass("text-danger");
-          fail = true;
-        } else {
-          $numReq.find("#icon").attr("class", checkClass);
-          $numReq.addClass("text-muted");
-        }
-        {{end}}
-
-        {{if gt .requirements.Special 0}}
-        if (special < {{.requirements.Special}}) {
-          $specialReq.find("#icon").attr("class", errClass);
-          $specialReq.addClass("text-danger");
-          fail = true;
-        } else {
-          $specialReq.find("#icon").attr("class", checkClass);
-          $specialReq.addClass("text-muted");
-        }
-        if (fail) {
-          return false;
-        }
-        {{end}}
-        {{end}}
-
         // Disable the submit button so we only attempt once.
         $submit.prop('disabled', true);
 
@@ -218,6 +142,87 @@
             return false;
           });
       });
+
+      function checkPasswordValid(pwd) {
+        {{if .requirements.HasRequirements}}
+          let upper = 0;
+          let lower = 0;
+          let digit = 0;
+          let special = 0;
+          let specialPattern = new RegExp(/[~`!#$%\^&*+=\-\[\]\\';,/{}|\\":<>\?]/);
+          for (let i = 0; i < pwd.length; i++) {
+            let c = pwd.charAt(i);
+            if (!isNaN(parseInt(c, 10))) {
+              digit++;
+            } else if (specialPattern.test(c)) {
+              special++;
+            } else if (c == c.toUpperCase()) {
+              upper++;
+            } else if (c == c.toLowerCase()) {
+              lower++;
+            }
+          }
+
+          let errClass = "oi oi-circle-x pr-1";
+          let checkClass = "oi oi-circle-check pr-1";
+
+          {{if gt .requirements.Length 0}}
+          if (pwd.length < {{.requirements.Length}}) {
+            $lenReq.find("#icon").attr("class", errClass)
+            $lenReq.addClass("text-danger");
+            return false;
+          } else {
+            $lenReq.find("#icon").attr("class", checkClass)
+            $lenReq.addClass("text-muted");
+          }
+          {{end}}
+
+          {{if gt .requirements.Uppercase 0}}
+          if (upper < {{.requirements.Uppercase}}) {
+            $upperReq.find("#icon").attr("class", errClass);
+            $upperReq.addClass("text-danger");
+            return false;
+          } else {
+            $upperReq.find("#icon").attr("class", checkClass);
+            $upperReq.addClass("text-muted");
+          }
+          {{end}}
+
+          {{if gt .requirements.Lowercase 0}}
+          if (lower < {{.requirements.Lowercase}}) {
+            $lowerReq.find("#icon").attr("class", errClass);
+            $lowerReq.addClass("text-danger");
+            return false;
+          } else {
+            $lowerReq.find("#icon").attr("class", checkClass);
+            $lowerReq.addClass("text-muted");
+          }
+          {{end}}
+
+          {{if gt .requirements.Number 0}}
+          if (digit < {{.requirements.Number}}) {
+            $numReq.find("#icon").attr("class", errClass);
+            $numReq.addClass("text-danger");
+            return false;
+          } else {
+            $numReq.find("#icon").attr("class", checkClass);
+            $numReq.addClass("text-muted");
+          }
+          {{end}}
+
+          {{if gt .requirements.Special 0}}
+          if (special < {{.requirements.Special}}) {
+            $specialReq.find("#icon").attr("class", errClass);
+            $specialReq.addClass("text-danger");
+            return false;
+          } else {
+            $specialReq.find("#icon").attr("class", checkClass);
+            $specialReq.addClass("text-muted");
+          }
+          {{end}}
+          {{end}}
+          return true;
+      }
     });
 
     function getUrlVars() {