2021-12-06 17:59:23 +01:00
8 changed files with 145 additions and 74 deletions
--- a/app/init.py
+++ b/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
--- a/app/password.py
+++ b/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')
--- 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);
-}
-
-#reset-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-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">
-    {% 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
@@ -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 %}
--- a/app/ui/templates/reset.html
+++ b/app/ui/templates/reset.html
@@ -1,48 +1,20 @@
 {% 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>
-                {{ form.username(class="form-control") }}
+    <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>
-            <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>
+            <a class="btn btn-outline-danger" href="/password/change">I just remembered it !</a>
+        </div>
    </div>
 {% endblock main_block %}

 {% block script_block %}
 <script defer src="/static/js/validate.js"></script>
-{% endblock script_block %}
+{% 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