[password-resets/feat/passwords-account: 4/10] feat(validation): refactored password validation

[Claudio Wunder <cwunder src gnome org>]

commit 9b1e8ec153b67e3de8ac96a3c63809e8d204e8d3
Author: Claudio Wunder <cwunder gnome org>
Date:   Sun Nov 22 16:53:59 2020 +0100

    feat(validation): refactored password validation
    
    and introduced form validation

 static/js/password-strength.js | 174 ++++++++++++++++++++++-------------------
 1 file changed, 93 insertions(+), 81 deletions(-)
---
diff --git a/static/js/password-strength.js b/static/js/password-strength.js
index 9e334d6..c641664 100644
--- a/static/js/password-strength.js
+++ b/static/js/password-strength.js
@@ -1,82 +1,94 @@
-$(function () {
-    var $password = $(".form-control[type='password']");
-    var $passwordAlert = $(".password-alert");
-    var $requirements = $(".requirements");
-    var leng, bigLetter, num, specialChar;
-    var $leng = $(".leng");
-    var $bigLetter = $(".big-letter");
-    var $num = $(".num");
-    var $specialChar = $(".special-char");
-    var specialChars = "!@#$%^&*()-_=+[{]}\\|;:'\",<.>/?`~";
-    var numbers = "0123456789";
-
-    $requirements.addClass("wrong");
-    $password.on("focus", function(){$passwordAlert.show();});
-
-    $password.on("input blur", function (e) {
-        var el = $(this);
-        var val = el.val();
-        $passwordAlert.show();
-
-        if (val.length < 8) {
-            leng = false;
-        }
-        else if (val.length > 7) {
-            leng=true;
-        }
-        
-
-        if(val.toLowerCase()==val){
-            bigLetter = false;
-        }
-        else{bigLetter=true;}
-        
-        num = false;
-        for(var i=0; i<val.length;i++){
-            for(var j=0; j<numbers.length; j++){
-                if(val[i]==numbers[j]){
-                    num = true;
-                }
-            }
-        }
-        
-        specialChar=false;
-        for(var i=0; i<val.length;i++){
-            for(var j=0; j<specialChars.length; j++){
-                if(val[i]==specialChars[j]){
-                    specialChar = true;
-                }
-            }
-        }
-
-        console.log(leng, bigLetter, num, specialChar);
-        
-        if(leng==true&&bigLetter==true&&num==true&&specialChar==true){
-            $(this).addClass("valid").removeClass("invalid");
-            $requirements.removeClass("wrong").addClass("good");
-            $passwordAlert.removeClass("alert-warning").addClass("alert-success");
-        }
-        else
-        {
-            $(this).addClass("invalid").removeClass("valid");
-            $passwordAlert.removeClass("alert-success").addClass("alert-warning");
-
-            if(leng==false){$leng.addClass("wrong").removeClass("good");}
-            else{$leng.addClass("good").removeClass("wrong");}
-
-            if(bigLetter==false){$bigLetter.addClass("wrong").removeClass("good");}
-            else{$bigLetter.addClass("good").removeClass("wrong");}
-
-            if(num==false){$num.addClass("wrong").removeClass("good");}
-            else{$num.addClass("good").removeClass("wrong");}
-
-            if(specialChar==false){$specialChar.addClass("wrong").removeClass("good");}
-            else{$specialChar.addClass("good").removeClass("wrong");}
-        }
-        
-        
-        if(e.type == "blur"){
-                $passwordAlert.hide();
-            }
-    });
+jQuery(() => {
+  const $passwordInput = jQuery('input[type="password"]');
+  const $passwordAlert = jQuery('.password-alert');
+  const $form = jQuery('form');
+  const $requirements = jQuery('.requirements');
+
+  let hasMinLength, hasUppercase, hasNumbers, hasSpecials;
+
+  const $length = jQuery('.length');
+  const $bigLetter = jQuery('.big-letter');
+  const $numbers = jQuery('.numbers');
+  const $specialChar = jQuery('.special-char');
+
+  $requirements.addClass('wrong');
+
+  $passwordInput.on('focus', () => {
+    $passwordAlert.show();
+  });
+
+  $form.on('submit', () => {
+    const input = document.querySelector('input[type="password"]');
+
+    const isInputValid = input.checkValidity();
+
+    if (!isInputValid) {
+      input.reportValidity();
+
+      return false;
+    }
+
+    if (hasMinLength && hasUppercase && hasNumbers && hasSpecials) {
+      input.reportValidity();
+
+      return true;
+    }
+
+    return false;
+  });
+
+  $passwordInput.on('input blur', (e) => {
+    const inputElement = jQuery(e.target);
+
+    const inputValue = inputElement.val();
+
+    $passwordAlert.show();
+
+    hasMinLength = inputValue.length > 7 && inputValue.length < 48;
+
+    hasUppercase = inputValue.toLowerCase() !== inputValue;
+
+    hasNumbers = /\d/.test(inputValue);
+
+    hasSpecials = /^[\w!@#$%^*()_+\-=\[\]{};\\|,.<>\/?]+$/.test(inputValue);
+
+    if (hasMinLength && hasUppercase && hasNumbers && hasSpecials) {
+      jQuery(this).addClass('valid').removeClass('invalid');
+
+      $requirements.removeClass('wrong').addClass('good');
+      $passwordAlert.removeClass('alert-warning').addClass('alert-success');
+    } else {
+      jQuery(this).addClass('invalid').removeClass('valid');
+
+      $passwordAlert.removeClass('alert-success').addClass('alert-warning');
+
+      if (hasMinLength === false) {
+        $length.addClass('wrong').removeClass('good');
+      } else {
+        $length.addClass('good').removeClass('wrong');
+      }
+
+      if (hasUppercase === false) {
+        $bigLetter.addClass('wrong').removeClass('good');
+      } else {
+        $bigLetter.addClass('good').removeClass('wrong');
+      }
+
+      if (hasNumbers === false) {
+        $numbers.addClass('wrong').removeClass('good');
+      } else {
+        $numbers.addClass('good').removeClass('wrong');
+      }
+
+      if (hasSpecials === false) {
+        $specialChar.addClass('wrong').removeClass('good');
+      } else {
+        $specialChar.addClass('good').removeClass('wrong');
+      }
+    }
+
+    if (e.type === 'blur') {
+      $passwordAlert.hide();
+    }
+  });
 });
\ No newline at end of file