Merge pull request 'Password reset and UI fixes' (#2) from password into master

Reviewed-on: https://gitea.alxczl.fr/alexandre/ldap-interface/pulls/2

app/__init__.py

@@ -1,10 +1,10 @@
 from flask import Flask
-from . import reset, config
+from . import password, config
 
 def create_app():
     app = Flask(__name__, template_folder="ui/templates", static_folder="ui/static")
     app.config.from_object(config.ProductionConfig())
 
-    app.register_blueprint(reset.bp)
+    app.register_blueprint(password.bp)
 
     return app

app/password.py

@@ -7,16 +7,16 @@ from flask import (
 from flask_wtf import FlaskForm
 from wtforms import (
     StringField, PasswordField,
-    SubmitField
+    SubmitField, EmailField
 )
 from wtforms.validators import (
     ValidationError, DataRequired,
-    EqualTo, Length, Regexp
+    EqualTo, Length, Regexp, Email
 )
 
-bp = Blueprint('reset', __name__, url_prefix='/reset')
+bp = Blueprint('password', __name__, url_prefix='/password')
 
-class ResetPasswordForm(FlaskForm):
+class ChangePasswordForm(FlaskForm):
     # Minimal password length
     minlength = 9
 
@@ -37,14 +37,15 @@ class ResetPasswordForm(FlaskForm):
         #    "(?=.*[@$!%*#?&])", message="Password must contain a special character"
         #),],
         ],
-        render_kw={"onkeyup": f"validate_form({minlength})"})
+        render_kw={"onkeyup": f"validate_username_form({minlength})"})
     confirm_password = PasswordField(
         label=('Confirm Password'), 
         validators=[DataRequired(message='* Required'),
         EqualTo('newpassword')],
-        render_kw={"onkeyup": f"validate_confirm({minlength})"})
+        render_kw={"onkeyup": f"validate_username_form({minlength})"})
 
-    submit = SubmitField(label=('Change my password'), render_kw={"onclick": f"validate_form({minlength})"})
+    submit = SubmitField(label=('Change my password'), render_kw={"disabled": "true",
+                                                                  "onclick": f"validate_username_form({minlength})"})
 
     # Validators
     def validate_username(self, username):
@@ -54,11 +55,20 @@ class ResetPasswordForm(FlaskForm):
                 raise ValidationError(
                     f"Character {char} is not allowed in an username.")
 
-@bp.route('/', methods=('GET', 'POST'))
-def reset():
-    form = ResetPasswordForm()
+class ResetPasswordForm(FlaskForm):
+    email = EmailField(label=('Email address'), 
+                       validators=[DataRequired(), Email()],
+                       render_kw={"onkeyup": f"validate_email()"})
+
+    submit = SubmitField(label=('Change my password'), render_kw={"disabled": "true",
+                                                                  "onclick": f"validate_email()"})
+
+@bp.route('/change', methods=["GET", "POST"])
+def change():
+    form = ChangePasswordForm()
     if form.validate_on_submit():
         client = ldap_client.Client(address=current_app.config["LDAP_ADDR"], port=current_app.config["LDAP_PORT"], base_dn=current_app.config["BASE_DN"], tls=current_app.config["LDAP_TLS"])
+
         bind_status = client.bind(form.username._value(), form.currentpassword._value())
         if bind_status[0] == False:
             flash(f"Connection failed, are you sure that your login and password are correct ? ({client.link.last_error})")
@@ -69,4 +79,8 @@ def reset():
             flash('Your password has been changed !')
             client.unbind()
             
-    return render_template('reset.html', form=form)
+    return render_template('change.html', form=form)
+
+@bp.route('/reset', methods=["GET"])
+def reset():
+    return render_template('reset.html')

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;
 }
 
 
@@ -92,8 +103,3 @@ li.errormsg::before {
     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);
 }
-
-#reset-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");
 

app/ui/templates/base.html

@@ -5,19 +5,19 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="theme-color" content="#13570F"/>
   <meta name="description" content="Alexandre CHAZAL's LDAP interface">
-  <title>AlxCzl - LDAP Interface</title>
+  <title>AlxCzl - {% block title %}{% endblock title %}</title>
   <link rel="apple-touch-icon" sizes="180x180" href="/static/images/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicon-16x16.png">
   <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap">
   <link rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-  <link rel="stylesheet" href="/static/css/main.css" crossorigin="anonymous" integrity="sha384-fkK5tYaqbiUHGwmnlK0EawjBjKHQW0raxLDNOyZDFdHQL819ZrrviEpqz6P53tyX">
+  <link rel="stylesheet" href="/static/css/main.css" crossorigin="anonymous" integrity="sha384-f6kP6af7kWcMRKWq5svKPpNBoVoHZ1bg5xqzKbw8OjNcNUPm3VYQp8p//gjmWBfp">
 </head>
-<body>
+<body class="container">
   {% for message in get_flashed_messages() %}
   <div class="flash">{{ message }}</div>
   {% endfor %}
-  <main class="container vcenter">
+  <main id="main-block" class="row h-100 align-items-center justify-content-center">
       {% block main_block %}{% endblock main_block %} 
   </main>
   {% block script_block %}{% endblock script_block %}

app/ui/templates/change.html

@@ -0,0 +1,53 @@
+{% extends 'base.html' %}
+
+{% block title %}Password change{% endblock %}
+
+{% block main_block %}
+<div class="col-md-8" id="change-form">
+    <div class="col-md-auto">
+        <h1>Password change</h1>
+        <hr>
+        <form method="post">
+            {{ form.csrf_token() }}
+            <div class="form-group mb-3">
+                {{ form.username.label }}
+                {{ form.username(class="form-control") }}
+                <small class="form-text" id="username-msg">
+                    The username can contain at most 64 characters and cannot contain one of the following characters :
+                    [*?!'^+%&/()=}{$#;,\"
+                </small>
+            </div>
+            <div class="form-group mb-3">
+                {{ form.currentpassword.label }}
+                {{ form.currentpassword(class="form-control") }}
+            </div>
+            <div class="form-group mb-3">
+                {{ form.newpassword.label }}
+                {{ form.newpassword(class="form-control") }}
+                <small class="form-text" id="password-msg">
+                    The new password should at least contain the following:
+                    <ul>
+                        <li id="minlen">{{ form.minlength }} characters</li>
+                        <li id="digit">1 numeric digit [0-9]</li>
+                        <li id="lower">1 lowercase character [a-z]</li>
+                        <li id="upper">1 uppercase character [A-Z]</li>
+                    </ul>
+                </small>
+            </div>
+            <div class="form-group mb-3">
+                {{ form.confirm_password.label }}
+                {{ form.confirm_password(class="form-control") }}
+                <small class="form-text" id="confirm-msg">
+                    Passwords must match
+                </small>
+            </div>
+            {{ form.submit(class="btn btn-primary")}}
+            <a class="btn btn-outline-danger" href="/password/reset">I forgot my password</a>
+        </form>
+    </div>
+</div>
+{% endblock main_block %}
+
+{% block script_block %}
+<script defer src="/static/js/validate.js"></script>
+{% endblock script_block %}

app/ui/templates/reset.html

@@ -1,45 +1,17 @@
 {% extends 'base.html' %}
 
+{% block title %}Password reset{% endblock %}
+
 {% block main_block %}
-    <div class="row col-md" id="reset-form">
-        <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 class="col-md-8">
+        <div class="row col-md-auto">
+            <h1>Password reset</h1>
+            <hr>
+            <div class="alert alert-danger">Sorry, password self-reset isn't available on my intranet for security reasons.<br>
+                Just contact me and I'll send you a message containing a new password.
             </div>
-                {{ form.username(class="form-control") }}
+            <a class="btn btn-outline-danger" href="/password/change">I just remembered it !</a>
         </div>
-            <div class="form-group">
-                {{ form.currentpassword.label }}
-                {{ form.currentpassword(class="form-control") }}
-            </div>
-            <div class="form-group">
-                {{ form.newpassword.label }}
-                <div id="password-msg">
-                    The new password should contain at least :
-                    <ul>
-                        <li id="minlen">{{ form.minlength }} characters</li>
-                        <li id="digit">1 numeric digit [0-9]</li>
-                        <li id="lower">1 lowercase character [a-z]</li>
-                        <li id="upper">1 uppercase character [A-Z]</li>
-                    </ul>
-                </div>
-                {{ form.newpassword(class="form-control") }}
-            </div>
-            <div class="form-group">
-                {{ form.confirm_password.label }}
-                <div id="confirm-msg">
-                    Passwords must match
-                </div>
-                {{ form.confirm_password(class="form-control") }}
-            </div>
-            <br>
-            <div class="form-group" style="text-align: center; margin-bottom: 0.40em" disabled=true>
-                {{ form.submit(class="btn btn-primary")}}
-            </div>
-        </form>
     </div>
 {% endblock main_block %}
 

requirements.txt

@@ -10,3 +10,4 @@ Werkzeug==2.0.2
 zipp==3.6.0
 ldap3
 Flask-WTF==1.0.0
+email-validator