Merge of dev-auth #1
7
static/css/register.css
Normal file
7
static/css/register.css
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ok {
|
||||||
|
color: green;
|
||||||
|
}
|
||||||
@@ -8,6 +8,7 @@
|
|||||||
<base href="/" target="_top">
|
<base href="/" target="_top">
|
||||||
<script src="static/js/register.js" defer="defer"></script>
|
<script src="static/js/register.js" defer="defer"></script>
|
||||||
<link rel="stylesheet" href="static/css/login.css">
|
<link rel="stylesheet" href="static/css/login.css">
|
||||||
|
<link rel="stylesheet" href="static/css/register.css">
|
||||||
<title>Register</title>
|
<title>Register</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -19,14 +20,24 @@
|
|||||||
<br>
|
<br>
|
||||||
<input id="username">
|
<input id="username">
|
||||||
<br>
|
<br>
|
||||||
|
<p class="error" id="usernameNotice">Le nom d'utilisateur doit ne pas contenir de caractères spéciaux.</p>
|
||||||
<label for="password">Mot de passe:</label>
|
<label for="password">Mot de passe:</label>
|
||||||
<br>
|
<br>
|
||||||
<input id="password" type="password">
|
<input id="password" type="password">
|
||||||
<br>
|
<p class="error" id="passwordNotice">Le mot de passe doit contenir plus de 8 caractères et doit contenir au minimum:
|
||||||
|
<br>
|
||||||
|
1 Majuscule
|
||||||
|
<br>
|
||||||
|
1 Symbole
|
||||||
|
<br>
|
||||||
|
1 Minuscule
|
||||||
|
<br>
|
||||||
|
1 Nombre
|
||||||
|
</p>
|
||||||
<label for="passwordConfirm">Confirmer le mot de passe:</label>
|
<label for="passwordConfirm">Confirmer le mot de passe:</label>
|
||||||
<br>
|
<br>
|
||||||
<input id="passwordConfirm" type="password">
|
<input id="passwordConfirm" type="password">
|
||||||
<br>
|
<p class="error" id="passwordConfirmNotice">Les mots de passe doivent être les mêmes.</p>
|
||||||
<button id="register">Créer un compte.</button>
|
<button id="register">Créer un compte.</button>
|
||||||
</div>
|
</div>
|
||||||
<p>Tu as déjà un compte?</p>
|
<p>Tu as déjà un compte?</p>
|
||||||
|
|||||||
@@ -1,11 +1,58 @@
|
|||||||
async function register() {}
|
async function register() {
|
||||||
|
let username = document.getElementById("username").value;
|
||||||
|
let password = document.getElementById("password").value;
|
||||||
|
let passwordConfirm = document.getElementById("passwordConfirm").value;
|
||||||
|
if (!check_username(username) || !check_password(password) || password !== passwordConfirm) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let status = await fetch("/register", {method: "POST", body: JSON.stringify({"username": username, "password": password})}).then(r => r.status)
|
||||||
|
if (status === 200) {
|
||||||
|
window.location.href = "/login";
|
||||||
|
} else if (status === 400) {
|
||||||
|
document.getElementById("message").textContent = "Cet utilisateur existe déjà!"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function check_username() {}
|
function check_username(username) {
|
||||||
|
return username.match(/^[0-9a-zA-Z]+$/);
|
||||||
|
}
|
||||||
|
|
||||||
function check_password() {}
|
function check_password(password) {
|
||||||
|
return password.match(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!-/:-@[-`{-~]).{8,}$/)
|
||||||
|
}
|
||||||
|
|
||||||
let button = document.getElementById("register");
|
let button = document.getElementById("register");
|
||||||
|
|
||||||
button.addEventListener("click", () => {
|
button.addEventListener("click", () => {
|
||||||
let _ = register();
|
let _ = register();
|
||||||
})
|
})
|
||||||
|
|
||||||
|
let username = document.getElementById("username");
|
||||||
|
|
||||||
|
username.addEventListener("input", () => {
|
||||||
|
if (check_username(username.value)) {
|
||||||
|
document.getElementById("usernameNotice").className = "ok";
|
||||||
|
} else {
|
||||||
|
document.getElementById("usernameNotice").className = "error";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let password = document.getElementById("password");
|
||||||
|
|
||||||
|
password.addEventListener("input", () => {
|
||||||
|
if (check_password(password.value)) {
|
||||||
|
document.getElementById("passwordNotice").className = "ok";
|
||||||
|
} else {
|
||||||
|
document.getElementById("passwordNotice").className = "error";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let passwordConfirm = document.getElementById("passwordConfirm");
|
||||||
|
|
||||||
|
passwordConfirm.addEventListener("input", () => {
|
||||||
|
if (passwordConfirm.value === password.value) {
|
||||||
|
document.getElementById("passwordConfirmNotice").className = "ok";
|
||||||
|
} else {
|
||||||
|
document.getElementById("passwordConfirmNotice").className = "error";
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user