fix(DevWeb): Import static files

2026-05-16 09:05:28 +00:00 · 2024-04-05 12:39:01 +02:00
parent c438395a1a
commit 61603ddac6
26 changed files with 36 additions and 170 deletions
@@ -0,0 +1,27 @@
+html, body {
+    width: 100%;
+    height: 100%;
+}
+
+#main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#Title {
+    text-align: center;
+    justify-self: center;
+    font-size: xxx-large;
+}
+
+.main-button {
+    display: flex;
+    flex-direction: column;
+    width: 180px;
+}
+
+input {
+    font-size: x-large;
+    margin: 10px 0;
+}
@@ -0,0 +1,80 @@
+html {
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+body {
+    width: 100%;
+}
+
+main {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+}
+
+/*Common */
+
+hr {
+    width: 100%;
+}
+
+.border-left {
+    border-left: ridge;
+    padding-left: 6%;
+}
+
+/*Section titre*/
+#title {
+    width:60%;
+    text-align: center;
+    font-size: xxx-large;
+}
+
+/*Section login / register*/
+#form {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+}
+
+h1 {
+    justify-self: center;
+}
+
+.flex-column {
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+}
+
+.login-gap {
+    gap: 20px;
+}
+
+.register-gap {
+    gap: 75px;
+}
+
+
+#login-form, #register-form {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 8% 2%;
+}
+
+#login-submit {
+    grid-column: 2/2;
+    grid-row: 3/3;
+    justify-self: right;
+}
+
+#register-submit {
+    grid-column: 2/2;
+    grid-row: 7/7;
+    justify-self: right;
+
+}
@@ -0,0 +1,72 @@
+body {
+    font-family: sans-serif;
+    padding: 30px;
+}
+
+.demo-description {
+    max-width: 460px;
+    margin: 0 auto;
+    line-height: 1.5;
+}
+
+.modal-toggle {
+    cursor: pointer;
+    color: #268bd2;
+}
+
+.modal-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+
+    -webkit-transition: opacity 0.2s ease-in;
+    -moz-transition: opacity 0.2s ease-in;
+    transition: opacity 0.2s ease-in;
+
+    pointer-events: auto;
+}
+
+.modal-wrapper > div {
+    width: 460px;
+    height: 40%;
+    position: absolute;
+
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    margin: auto;
+
+    vertical-align: middle;
+    padding: 20px;
+    border-radius: 6px;
+    background: #fff;
+
+    display: none;
+}
+
+.close {
+    background: #606061;
+    color: #ffffff;
+    line-height: 25px;
+    position: absolute;
+    right: -12px;
+    text-align: center;
+    top: -10px;
+    width: 24px;
+    text-decoration: none;
+    font-weight: bold;
+    -webkit-border-radius: 12px;
+    -moz-border-radius: 12px;
+    border-radius: 12px;
+}
+
+.close:hover {
+    background: #00d9ff;
+}
@@ -0,0 +1,5 @@
+nav {
+    display: flex;
+    justify-content: right;
+    padding: 10px;
+}
@@ -0,0 +1,13 @@
+const ERROR_MESSAGE = {
+    "expired-token": "Lien expiré, veuillez recommencer la procédure de récupération de mot de passe.",
+    "invalid-token": "Lien invalide, veuillez recommencer la procédure de récupération de mot de passe.",
+};
+
+const urlParams = new URLSearchParams(window.location.search);
+const error = urlParams.get('error');
+
+if (error) {
+    const errorMessage = ERROR_MESSAGE[error];
+    console.error(errorMessage);
+    window.alert(errorMessage);
+}
@@ -0,0 +1,29 @@
+const loginForm = document.getElementById("login-form");
+
+loginForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+
+    const formData = new FormData(loginForm);
+    const data = {};
+    formData.forEach((value, key) => data[key] = value);
+
+    fetch(loginForm.getAttribute("action"), {
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify(data),
+        method: loginForm.getAttribute("method"),
+    })
+        .then(res => res.json())
+        .then(d => window.location.href = "./main-menu")
+        .catch(error => console.error("Error:", error));
+});
+
+
+const urlParams = new URLSearchParams(window.location.search);
+if (urlParams.has('success')) {
+    if (urlParams.get('success') === "account-created") {
+        window.alert("Compte créé avec succès.");
+    }
+    if (urlParams.get('success') === "password-reseted") {
+        window.alert("Mot de passe réinitialisé avec succès.");
+    }
+}
@@ -0,0 +1,16 @@
+let cb = document.querySelectorAll(".close");
+for (let i = 0; i < cb.length; i++) {
+  cb[i].addEventListener("click", function() {
+    const dia = this.parentNode.parentNode; /* You need to update this part if you change level of close button */
+    dia.style.display = "none";
+  });
+}
+
+let mt = document.querySelectorAll(".modal-toggle");
+for (let i = 0; i < mt.length; i++) {
+  mt[i].addEventListener("click", function() {
+    const targetId = this.getAttribute("data-target");
+    const target = document.querySelector(targetId);
+    target.style.display = "block";
+  });
+}
@@ -0,0 +1,19 @@
+const nbColorsElement = document.getElementById("nbColors");
+const nbValuesElement = document.getElementById("nbValues");
+const nbRoundsElement = document.getElementById("nbRounds")
+
+/**
+ * Mise à jour du nombre de rounds max en fonction du nombre de couleurs et de valeurs séléctionnés
+ */
+function updateOnChange() {
+  nbRoundsElement.max = nbColorsElement.value * nbValuesElement.value;
+
+  nbRoundsElement.value =
+    (nbRoundsElement.value > nbRoundsElement.max)
+      ? nbRoundsElement.max
+      : nbRoundsElement.value
+  ;
+}
+
+nbColorsElement.addEventListener("change", updateOnChange);
+nbValuesElement.addEventListener("change", updateOnChange);
@@ -0,0 +1,21 @@
+const registerForm = document.getElementById("register-form");
+const confirmPassword = document.getElementById("confirmPassword");
+
+registerForm.addEventListener("submit", (event) => {
+    event.preventDefault();
+    const formData = new FormData(registerForm);
+
+    const data = {};
+    formData.forEach((value, key) => data[key] = value);
+
+    fetch(registerForm.getAttribute("action"), {
+        method: registerForm.getAttribute("method"),
+        headers: {"Content-Type": "application/json"},
+        body: JSON.stringify(data)
+    })
+        .then(res => res.json())
+        .then(_ => {
+            window.location.href = "./login"
+        })
+        .catch(error => console.error("Error: " + error))
+});
@@ -0,0 +1,31 @@
+const resetPasswordForm = document.getElementById("resetPasswordForm");
+const confirmPassword = document.getElementById("confirmPassword");
+
+resetPasswordForm.addEventListener("submit", function (event) {
+    event.preventDefault();
+    const formData = new FormData(resetPasswordForm);
+
+    const data = {};
+    formData.forEach((value, key) => data[key] = value);
+
+    const action = loginForm.getAttribute("action")
+    const method = loginForm.getAttribute("method")
+
+    fetch("/reset-password", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify(data)
+    }).then(response => {
+        if (response.ok) {
+            window.location.href = "/login";
+        } else {
+            response.json().then(data => {
+                alert(data.message);
+            });
+        }
+    }).catch(error => {
+        console.error("Error:", error);
+    });
+});