feat(reset): added a better validator to the form

app/ui/static/css/main.css

@@ -51,17 +51,36 @@ a:hover>span {
     font-size: 32px;
 }
 
+#confirm-msg,
+#password-msg {
+    color: #d4d4d4;
+    font-size: small;
+    transition: color 225ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+#password-msg li {
+    list-style: none;
+    content: ""
+}
+
+#password-msg li::before {
+    content: "☑ ";
+}
+
 .errorinput {
     border-color: #f44246 !important;
 }
 
-#confirm-msg,
-#password-msg {
-    color: #f44246;
-    opacity: 0;
-    transition: opacity 225ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+.errormsg {
+    color: #f44246 !important;
+    
 }
 
+li.errormsg::before {
+    content: "☒ " !important;
+}
+
+
 .errorinput:focus {
     box-shadow: 0 0 0 .10rem rgba(244, 66, 70, 0.50) !important;
     -webkit-box-shadow: 0 0 0 .10rem rgba(244, 66, 70, 0.50) !important;
@@ -77,8 +96,3 @@ a:hover>span {
     background: #4e4e4e;
     border-radius: .50rem;
 }
-
-.fade {
-    opacity: 1 !important;
-    transition: opacity 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
-}

app/ui/static/js/validate.js

@@ -1,5 +1,5 @@
-function validate_form() {
-    var pass = validate_password();
+function validate_form(minlength) {
+    var pass = validate_password(minlength);
 
     return validate_confirm() && pass;
 }
@@ -10,28 +10,55 @@ function validate_confirm() {
 
     if (password.value != confirm.value) {
         confirm.classList.add("errorinput");
-        document.getElementById("confirm-msg").classList.add("fade");
+        document.getElementById("confirm-msg").classList.add("errormsg");
         return false;
     }
 
     confirm.classList.remove("errorinput");
-    document.getElementById("confirm-msg").classList.remove("fade");
+    document.getElementById("confirm-msg").classList.remove("errormsg");
 
     return true;
 }
 
-function validate_password() {
+function validate_password(minlength) {
+    // Did the checks pass ?
+    var status = true;
+    // Target element
     var password = document.getElementById("newpassword");
-    var reg = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/;
-
-    if (reg.test(password.value) != true) {
-        password.classList.add("errorinput");
-        document.getElementById("password-msg").classList.add("fade");
-        return false;
+    // Check the length
+    if (password.value.length < minlength)
+    {
+        status = false;
+        document.getElementById("minlen").classList.add("errormsg");
     }
+    else
+        document.getElementById("minlen").classList.remove("errormsg");
+    // Look for a digit
+    if (/.*\d/.test(password.value) != true) {
+        status = false;
+        document.getElementById("digit").classList.add("errormsg");
+    }
+    else
+        document.getElementById("digit").classList.remove("errormsg");
+    // Look for a lowercase char
+    if (/.*[a-z]/.test(password.value) != true) {
+        status = false;
+        document.getElementById("lower").classList.add("errormsg");
+    }
+    else
+        document.getElementById("lower").classList.remove("errormsg");
+    // Look for an uppercase char
+    if (/.*[A-Z]/.test(password.value) != true) {
+        status = false;
+        document.getElementById("upper").classList.add("errormsg");
+    }
+    else
+        document.getElementById("upper").classList.remove("errormsg");
+    // Change the color of the inputbox
+    if (status == false)
+        password.classList.add("errorinput");
+    else
+        password.classList.remove("errorinput");
 
-    password.classList.remove("errorinput");
-    document.getElementById("password-msg").classList.remove("fade");
-
-    return true;
+    return status;
 }