modification de la connexion et ajout de catégorie et articles

2025-12-04 16:05:57 +01:00
parent 58d210802f
commit f5d9eee704
15 changed files with 671 additions and 115 deletions
--- a/connexion/reinitialisation_mot_de_passe/reinitialisation_du_mot_de_passe.js
+++ b/connexion/reinitialisation_mot_de_passe/reinitialisation_du_mot_de_passe.js
@@ -0,0 +1,37 @@
+const form = document.getElementById('resetForm');
+const password = document.getElementById('password');
+const confirmPassword = document.getElementById('confirmPassword');
+const errorMsg = document.getElementById('errorMsg');
+const successMsg = document.getElementById('successMsg');
+
+const minLength = 8;
+
+form.addEventListener('submit', function(e) {
+    e.preventDefault();
+
+    // Réinitialisation des messages
+    errorMsg.style.display = 'none';
+    successMsg.style.display = 'none';
+
+    const pass = password.value.trim();
+    const confirm = confirmPassword.value.trim();
+
+    //Longueur minimale
+    if (pass.length < minLength) {
+        errorMsg.style.display = 'block';
+        errorMsg.textContent = `Le mot de passe doit contenir au moins ${minLength} caractères.`;
+        return;
+    }
+
+    //Correspondance
+    if (pass !== confirm) {
+        errorMsg.style.display = 'block';
+        errorMsg.textContent = 'Les mots de passe ne correspondent pas.';
+        return;
+    }
+
+    //Succès
+    successMsg.style.display = 'block';
+    successMsg.textContent = 'Mot de passe réinitialisé avec succès !';
+});
+
--- a/connexion/reinitialisation_mot_de_passe/reinitialisation_mot_de_passe.html
+++ b/connexion/reinitialisation_mot_de_passe/reinitialisation_mot_de_passe.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Réinitialisation du mot de passe</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+    />
+
+    <style>
+      body {
+        background: #f2f4f7;
+        height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .reset-password-card {
+        width: 100%;
+        max-width: 380px;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card shadow reset-password-card">
+      <div class="card-body p-4">
+        <h3 class="text-center mb-4">Nouveau mot de passe</h3>
+        <p class="text-center text-muted mb-4">
+          Pour réinitialiser votre mot de passe, veuillez saisir un nouveau mot
+          de passe ainsi qu'une confirmation. Le mot de passe doit contenir au
+          minimum 8 caractères.
+        </p>
+
+        <form id="resetForm">
+          <div class="mb-3">
+            <label class="form-label"
+              >Nouveau mot de passe (minimum 8 caractères)</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="password"
+              required
+            />
+          </div>
+
+          <div class="mb-3">
+            <label class="form-label"
+              >Confirmer le mot de passe (minimum 8 caractères)</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="confirmPassword"
+              required
+            />
+          </div>
+
+          <div
+            id="errorMsg"
+            class="alert alert-danger text-center"
+            style="display: none"
+          >
+            Les mots de passe ne correspondent pas.
+          </div>
+
+          <div
+            id="successMsg"
+            class="alert alert-success text-center"
+            style="display: none"
+          >
+            Votre mot de passe a été modifié avec succès !
+          </div>
+
+          <button class="btn btn-primary w-100" type="submit">
+            Changer le mot de passe
+          </button>
+        </form>
+      </div>
+    </div>
+    <script src="reinitialisation_du_mot_de_passe.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+  </body>
+</html>