feat: created a base form with some validators

.dockerignore

@@ -1,3 +1,4 @@
 *.pyc
 .git/
-Dockerfile
+Dockerfile
+__pycache__/*

app/__init__.py

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

app/reset.py

@@ -0,0 +1,39 @@
+import functools
+
+from flask import (
+    Blueprint, flash, g, redirect, render_template, request, session, url_for
+)
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField, BooleanField, \
+    SubmitField
+from wtforms.validators import ValidationError, DataRequired, \
+    Email, EqualTo, Length
+from werkzeug.security import check_password_hash, generate_password_hash
+
+
+bp = Blueprint('reset', __name__, url_prefix='/reset')
+
+class ResetPasswordForm(FlaskForm):
+    username = StringField(label=('Username'), 
+        validators=[DataRequired(), 
+        Length(max=64)])
+    currentpassword = PasswordField(label=('Current password'), 
+        validators=[DataRequired()])
+    newpassword = PasswordField(label=('New password'), 
+        validators=[DataRequired(), 
+        Length(min=8, message='Password should be at least %(min)d characters long')],
+        render_kw={"onkeyup": "validate_form()"})
+    confirm_password = PasswordField(
+        label=('Confirm Password'), 
+        validators=[DataRequired(message='* Required'),
+        EqualTo('newpassword', message='Both password fields must be equal!')],
+        render_kw={"onkeyup": "validate_confirm()"})
+
+    submit = SubmitField(label=('Change my password'), render_kw={"onclick": "validate_form()"})
+
+@bp.route('/', methods=('GET', 'POST'))
+def reset():
+    form = ResetPasswordForm()
+    if form.validate_on_submit():
+        return f'''<h1> Welcome {form.username.data} </h1>'''
+    return render_template('reset.html', form=form)

app/ui/static/css/main.css

@@ -0,0 +1,84 @@
+html,
+body {
+    margin: 0;
+    height: 100%;
+    min-width: 310px;
+}
+
+body {
+    min-height: 100%;
+    font-family: 'Roboto Mono', monospace;
+    color: white;
+    background: rgb(0, 0, 0);
+    background: linear-gradient(8deg, rgb(35, 155, 21) 0%, rgba(14, 47, 11, 1) 40%, rgba(0, 0, 0, 1) 70%);
+    background-repeat: no-repeat;
+    background-attachment: fixed;
+}
+
+.vcenter {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    -webkit-transform: translateX(-50%) translateY(-50%);
+    transform: translateX(-50%) translateY(-50%);
+}
+
+.container {
+    animation: fadein ease 3s;
+    animation-iteration-count: 1;
+    animation-fill-mode: forwards;
+}
+
+a {
+    text-decoration: none;
+}
+
+a:link>span {
+    color: rgb(216, 216, 216);
+}
+
+a:visited>span {
+    color: rgb(216, 216, 216);
+}
+
+a:hover>span {
+    color: rgb(255, 255, 255);
+}
+
+.icon2x {
+    height: 32px;
+    width: 32px;
+    font-size: 32px;
+}
+
+.errorinput {
+    border-color: #f44246 !important;
+}
+
+#confirm-msg,
+#password-msg {
+    color: #f44246;
+    opacity: 0;
+    transition: opacity 225ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+.errorinput:focus {
+    box-shadow: 0 0 0 .10rem rgba(244, 66, 70, 0.50) !important;
+    -webkit-box-shadow: 0 0 0 .10rem rgba(244, 66, 70, 0.50) !important;
+}
+
+.form-control:focus {
+    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;
+}
+
+.fade {
+    opacity: 1 !important;
+    transition: opacity 300ms cubic-bezier(0.55, 0.085, 0.68, 0.53);
+}

app/ui/static/js/validate.js

@@ -0,0 +1,37 @@
+function validate_form() {
+    var pass = validate_password();
+
+    return validate_confirm() && pass;
+}
+
+function validate_confirm() {
+    var password = document.getElementById("newpassword");
+    var confirm = document.getElementById("confirm_password");
+
+    if (password.value != confirm.value) {
+        confirm.classList.add("errorinput");
+        document.getElementById("confirm-msg").classList.add("fade");
+        return false;
+    }
+
+    confirm.classList.remove("errorinput");
+    document.getElementById("confirm-msg").classList.remove("fade");
+
+    return true;
+}
+
+function validate_password() {
+    var password = document.getElementById("newpassword");
+    var reg = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/;
+
+    if (reg.test(password.value) != true) {
+        password.classList.add("errorinput");
+        document.getElementById("password-msg").classList.add("fade");
+        return false;
+    }
+
+    password.classList.remove("errorinput");
+    document.getElementById("password-msg").classList.remove("fade");
+
+    return true;
+}

app/ui/templates/base.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <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>
+  <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">
+</head>
+<body>
+  {% for message in get_flashed_messages() %}
+  <div class="flash">{{ message }}</div>
+  {% endfor %}
+  <main class="container vcenter">
+    {% 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>
+</body>
+</html>

app/ui/templates/reset.html

@@ -0,0 +1,42 @@
+{% extends 'base.html' %}
+
+{% block main_block %}
+    <div class="row col" 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 }}
+                {{ form.username(class="form-control") }}
+            </div>
+            <div class="form-group">
+                {{ form.currentpassword.label }}
+                {{ form.currentpassword(class="form-control") }}
+            </div>
+            <div class="form-group">
+                {{ form.newpassword.label }}
+                <span id="password-msg">
+                    The new password should contain at least : 8 characters, one numeric digit, one lowercase and one uppercase characters.
+                </span>
+                {{ form.newpassword(class="form-control") }}
+            </div>
+            <div class="form-group">
+                {{ form.confirm_password.label }}
+                <span id="confirm-msg">
+                    Passwords should match
+                </span>
+                {{ form.confirm_password(class="form-control") }}
+            </div>
+            <br>
+            <div class="form-group" style="text-align: center; margin-bottom: 0.40  em">
+                {{ form.submit(class="btn btn-primary")}}
+            </div>
+        </form>
+    </div>
+{% endblock main_block %}
+
+{% block script_block %}
+<script defer src="/static/js/validate.js"></script>
+{% endblock script_block %}

requirements.txt

@@ -8,4 +8,5 @@ MarkupSafe==2.0.1
 typing_extensions==4.0.0
 Werkzeug==2.0.2
 zipp==3.6.0
-python-ldap
+python-ldap
+Flask-WTF==1.0.0

wsgi.py

@@ -0,0 +1,6 @@
+import os, sys
+app_path = os.path.dirname(os.path.abspath(__file__))
+sys.path.insert(0, app_path)
+
+from app import create_app
+application = create_app()