2021-12-06 17:59:23 +01:00
7 changed files with 118 additions and 48 deletions
--- a/app/password.py
+++ b/app/password.py
@@ -7,11 +7,11 @@ 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('password', __name__, url_prefix='/password')
@@ -37,14 +37,15 @@ class ChangePasswordForm(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,7 +55,15 @@ class ChangePasswordForm(FlaskForm):
                raise ValidationError(
                    f"Character {char} is not allowed in an username.")

-@bp.route('/change', methods=('GET', 'POST'))
+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():
@@ -71,3 +80,7 @@ def change():
            client.unbind()
            
    return render_template('change.html', form=form)
+
+@bp.route('/reset', methods=["GET"])
+def reset():
+    return render_template('reset.html')
--- a/app/ui/static/css/main.css
+++ b/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;
-}
+}
--- a/app/ui/static/js/validate.js
+++ b/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");

--- a/app/ui/templates/base.html
+++ b/app/ui/templates/base.html
@@ -5,20 +5,20 @@
  <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-1mUptOXBpF6Jmz5VBNmsieaTKvJrMrSSLQNb/S1TJ7zYE1QS3fCuO3RZJQDSwBD6">
+  <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">
-    {% block main_block %}{% endblock main_block %} 
+  <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 %}
  <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
--- a/app/ui/templates/change.html
+++ b/app/ui/templates/change.html
@@ -1,48 +1,53 @@
 {% extends 'base.html' %}

+{% block title %}Password change{% endblock %}
+
 {% block main_block %}
-    <div class="row col-md" id="change-form">
+<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">
+            <div class="form-group mb-3">
                {{ 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") }}
+                <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">
+            <div class="form-group mb-3">
                {{ form.currentpassword.label }}
                {{ form.currentpassword(class="form-control") }}
            </div>
-            <div class="form-group">
+            <div class="form-group mb-3">
                {{ form.newpassword.label }}
-                <div id="password-msg">
-                    The new password should contain at least :
+                {{ 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>
-                </div>
-                {{ form.newpassword(class="form-control") }}
+                </small>
            </div>
-            <div class="form-group">
+            <div class="form-group mb-3">
                {{ form.confirm_password.label }}
-                <div id="confirm-msg">
-                    Passwords must match
-                </div>
                {{ form.confirm_password(class="form-control") }}
+                <small class="form-text" id="confirm-msg">
+                    Passwords must match
+                </small>
            </div>
-            <br>
-            <div class="form-group" style="text-align: center; margin-bottom: 0.40em" disabled=true>
-                {{ form.submit(class="btn btn-primary")}}
-            </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 %}
+{% endblock script_block %}
--- a/app/ui/templates/reset.html
+++ b/app/ui/templates/reset.html
@@ -0,0 +1,20 @@
+{% extends 'base.html' %}
+
+{% block title %}Password reset{% endblock %}
+
+{% block main_block %}
+    <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>
+            <a class="btn btn-outline-danger" href="/password/change">I just need to change it</a>
+        </div>
+    </div>
+{% endblock main_block %}
+
+{% block script_block %}
+<script defer src="/static/js/validate.js"></script>
+{% endblock script_block %}
--- a/requirements.txt
+++ b/requirements.txt
@@ -9,4 +9,5 @@ typing_extensions==4.0.0
 Werkzeug==2.0.2
 zipp==3.6.0
 ldap3
-Flask-WTF==1.0.0
+Flask-WTF==1.0.0
+email-validator