app/reset.py

@@ -20,15 +20,16 @@ class ResetPasswordForm(FlaskForm):
     # Form
     username = StringField(label=('Login'), 
         validators=[DataRequired(), 
-        Length(max=64)])
+        Length(max=64)],
+        render_kw={"onkeyup": "validate_username()"})
     currentpassword = PasswordField(label=('Current password'), 
         validators=[DataRequired()])
     newpassword = PasswordField(label=('New password'), 
         validators=[DataRequired(), 
-        Length(min=minlength, message='Password should be at least %(min)d characters long'),
+        Length(min=minlength),
-        Regexp("^(?=.*[a-z])", message="Password must have a lowercase character"),
+        Regexp("^(?=.*[a-z])"),
-        Regexp("^(?=.*[A-Z])", message="Password must have an uppercase character"),
+        Regexp("^(?=.*[A-Z])"),
-        Regexp("^(?=.*\\d)", message="Password must contain a number"),
+        Regexp("^(?=.*\\d)"),
         #Regexp(
         #    "(?=.*[@$!%*#?&])", message="Password must contain a special character"
         #),],
@@ -37,7 +38,7 @@ class ResetPasswordForm(FlaskForm):
     confirm_password = PasswordField(
         label=('Confirm Password'), 
         validators=[DataRequired(message='* Required'),
-        EqualTo('newpassword', message='Both password fields must be equal!')],
+        EqualTo('newpassword')],
         render_kw={"onkeyup": f"validate_confirm({minlength})"})
 
     submit = SubmitField(label=('Change my password'), render_kw={"onclick": f"validate_form({minlength})"})

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>