feat(password): added a password reset page (and unused form), corrected the validation of the password changer, modified styles

app/ui/static/css/main.css

@@ -15,6 +15,17 @@ body {
     background-attachment: fixed;
 }
 
+#main-block > div {
+    box-shadow: 1px 1px 10px black;
+    border-radius: .50rem;
+    background: #4e4e4e;
+    margin: 1em;
+}
+
+#main-block > div > *:first-child {
+    margin: 1em;
+}
+
 .vcenter {
     position: absolute;
     left: 50%;
@@ -65,7 +76,7 @@ a:hover>span {
 }
 
 #password-msg li::before {
-    content: "☑ ";
+    content: "OK - ";
 }
 
 .errorinput {
@@ -78,7 +89,7 @@ a:hover>span {
 }
 
 li.errormsg::before {
-    content: "☒ " !important;
+    content: "KO - " !important;
 }
 
 
@@ -91,9 +102,4 @@ li.errormsg::before {
     border-color: #5cb85c;
     box-shadow: 0 0 0 .10rem rgba(92, 184, 92, 0.50);
     -webkit-box-shadow: 0 0 0 .10rem rgba(92, 184, 92, 0.50);
-}
-
-#change-form {
-    background: #4e4e4e;
-    border-radius: .50rem;
-}
+}

app/ui/static/js/validate.js

@@ -1,8 +1,34 @@
-function validate_form(minlength) {
+function validate_username_form(minlength) {
     var user = validate_username();
     var pass = validate_password(minlength);
 
-    return validate_confirm() && pass && user;
+    if (validate_confirm() && pass && user) {
+        disable_submit(false);
+        return true;
+    }
+
+    disable_submit(true);
+    return false;
+}
+
+function disable_submit(status) {
+    document.getElementById("submit").disabled = status;
+}
+
+function validate_email() {
+    var email = document.getElementById("email");
+    var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+    if (re.test(email.value) != true) {
+        disable_submit(true);
+        email.classList.add("errorinput");
+        return false;
+    }
+
+
+    disable_submit(false);
+    email.classList.remove("errorinput");
+    return true;
 }
 
 function validate_confirm() {
@@ -25,15 +51,16 @@ function validate_username() {
     var username = document.getElementById("username");
     var forbidden = /[*?!'\^+%\&/()=}{\$#;,\\"]+/;
 
-    if (username.value.length > 64 || forbidden.test(username.value) == true)
-    {
+    if (username.value.length > 64 || forbidden.test(username.value) == true) {
         document.getElementById("username-msg").classList.add("errormsg");
         username.classList.add("errorinput");
+        disable_submit(true);
         return false;
     }
 
     document.getElementById("username-msg").classList.remove("errormsg");
     username.classList.remove("errorinput");
+    disable_submit(false);
     return true;
 }
 
@@ -43,8 +70,7 @@ function validate_password(minlength) {
     // Target element
     var password = document.getElementById("newpassword");
     // Check the length
-    if (password.value.length < minlength)
-    {
+    if (password.value.length < minlength) {
         status = false;
         document.getElementById("minlen").classList.add("errormsg");
     }
@@ -71,11 +97,10 @@ function validate_password(minlength) {
     }
     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");