feat(reset): added a name validator

app/ui/static/css/main.css

@@ -51,6 +51,7 @@ a:hover>span {
     font-size: 32px;
 }
 
+#username-msg,
 #confirm-msg,
 #password-msg {
     color: #d4d4d4;

app/ui/static/js/validate.js

@@ -1,7 +1,8 @@
 function validate_form(minlength) {
+    var user = validate_username();
     var pass = validate_password(minlength);
 
-    return validate_confirm() && pass;
+    return validate_confirm() && pass && user;
 }
 
 function validate_confirm() {
@@ -20,6 +21,22 @@ function validate_confirm() {
     return true;
 }
 
+function validate_username() {
+    var username = document.getElementById("username");
+    var forbidden = /[*?!'\^+%\&/()=}{\$#;,\\"]+/;
+
+    if (username.value.length > 64 || forbidden.test(username.value) == true)
+    {
+        document.getElementById("username-msg").classList.add("errormsg");
+        username.classList.add("errorinput");
+        return false;
+    }
+
+    document.getElementById("username-msg").classList.remove("errormsg");
+    username.classList.remove("errorinput");
+    return true;
+}
+
 function validate_password(minlength) {
     // Did the checks pass ?
     var status = true;
@@ -56,7 +73,9 @@ function validate_password(minlength) {
         document.getElementById("upper").classList.remove("errormsg");
     // Change the color of the inputbox
     if (status == false)
+    {
         password.classList.add("errorinput");
+    }
     else
         password.classList.remove("errorinput");
 

app/ui/templates/reset.html

@@ -2,13 +2,13 @@
 
 {% block main_block %}
     <div class="row col-md" id="reset-form">
-        {% for field, errors in form.errors.items() %}
-        {{ ', '.join(errors) }}
-        {% endfor %}
         <form method="post">
             {{ form.csrf_token() }}
             <div class="form-group">
                 {{ form.username.label }}
+                <div id="username-msg">
+                    The username can contain at most 64 characters and cannot contain one of the following characters : [*?!'^+%&/()=}{$#;,\"
+                </div>
                 {{ form.username(class="form-control") }}
             </div>
             <div class="form-group">
@@ -36,7 +36,7 @@
                 {{ form.confirm_password(class="form-control") }}
             </div>
             <br>
-            <div class="form-group" style="text-align: center; margin-bottom: 0.40em">
+            <div class="form-group" style="text-align: center; margin-bottom: 0.40em" disabled=true>
                 {{ form.submit(class="btn btn-primary")}}
             </div>
         </form>