alexandre/ldap-interface
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: created a base form with some validators

Browse Source
This commit is contained in:
Alexandre CHAZAL
2021-11-29 00:10:59 +01:00
parent 3bc5f0e6f5
commit ec451d82c0
10 changed files with 248 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
app/ui/static/css/main.css Normal file
View File

@@ -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);
}

37
app/ui/static/js/validate.js Normal file
View File

@@ -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;
}

26
app/ui/templates/base.html Normal file
View File

@@ -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>

42
app/ui/templates/reset.html Normal file
View File

@@ -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 %}