diff --git a/static/css/register.css b/static/css/register.css new file mode 100644 index 0000000..747a067 --- /dev/null +++ b/static/css/register.css @@ -0,0 +1,7 @@ +.error { + color: red; +} + +.ok { + color: green; +} \ No newline at end of file diff --git a/static/html/register.html b/static/html/register.html index a916f9d..df83562 100644 --- a/static/html/register.html +++ b/static/html/register.html @@ -8,6 +8,7 @@ + Register @@ -19,14 +20,24 @@

+

Le nom d'utilisateur doit ne pas contenir de caractères spéciaux.


-
+

Le mot de passe doit contenir plus de 8 caractères et doit contenir au minimum: +
+ 1 Majuscule +
+ 1 Symbole +
+ 1 Minuscule +
+ 1 Nombre +


-
+

Les mots de passe doivent être les mêmes.

Tu as déjà un compte?

diff --git a/static/js/register.js b/static/js/register.js index 176866a..1da754c 100644 --- a/static/js/register.js +++ b/static/js/register.js @@ -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"); button.addEventListener("click", () => { let _ = register(); -}) \ No newline at end of file +}) + +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"; + } +})