From 55a31a507c1866451f4e3e323137ae308ba3dcce Mon Sep 17 00:00:00 2001
From: pestak <wawawaformation@gmail.com>
Date: Tue, 16 Dec 2025 08:50:31 +0100
Subject: [PATCH] =?UTF-8?q?integration=20de=20password.js=20=C3=A0=20reini?=
 =?UTF-8?q?tialisation=20mdp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../html/reinitialisation_mot_de_passe.html   | 155 ++++++++----------
 .../js/reinitialisation_du_mot_de_passe.js    |   4 +-
 js/password.js                                |   9 +-
 3 files changed, 76 insertions(+), 92 deletions(-)
diff --git a/connexion/html/reinitialisation_mot_de_passe.html b/connexion/html/reinitialisation_mot_de_passe.html
index 815bf40..65e5be2 100644
--- a/connexion/html/reinitialisation_mot_de_passe.html
+++ b/connexion/html/reinitialisation_mot_de_passe.html
@@ -1,100 +1,77 @@
 <!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: #f4f6f981;
-        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">
-        <h1 class="text-center mb-4 fs-3">Nouveau mot de passe</h1>
-        <p class="text text-muted mb-4">
-          Pour réinitialiser votre mot de passe, veuillez saisir un nouveau mot
-          de passe ainsi qu'une confirmation.
+<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 href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
+  <link rel="shortcut icon" href="/favicon.png" type="image/png">
+
+  <style>
+    body {
+      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">
+      <h1 class="text-center mb-4 fs-3">Nouveau mot de passe</h1>
+      <p class="text text-muted mb-4">
+        Pour réinitialiser votre mot de passe, veuillez saisir un nouveau mot
+        de passe ainsi qu'une confirmation.
+
+      </p>
+
+      
+
+      <form id="password-form">
+         <main>
+        <div class="mb-4">
+          <label class="form-label">Nouveau mot de passe <br><span class="small"><span id="min8">8 caractères minimum</span>, incluant une <span id="uppercase">majuscule</span>, une <span id="lowercase">minuscule</span> et un <span id="digit">chiffre</span></span></label>
+          <input type="password" class="form-control" id="password" required />
          
-        </p>
-        
-          <div
-            id="errorMsg"
-            class="alert alert-danger text-center fs-1"
-            style="display: none"
-          >
-            Les mots de passe ne correspondent pas.
-          </div>
+        </div>
 
-        <form id="resetForm">
-          <div class="mb-4">
-            <label class="form-label"
-              >Nouveau mot de passe (minimum 8 caractères)</label
-            >
-            <input
-              type="password"
-              class="form-control"
-              id="password"
-              required
-            />
-            <small id="passwordIndicator" class="fw-bold"></small>
-          </div>
-
-          <div class="mb-3">
-            <label class="form-label"
-              >Confirmer le mot de passe</label
-            >
-            <input
-              type="password"
-              class="form-control"
-              id="confirmPassword"
-              required
-            />
-            <label for="showPassword" class="mt-3">
+        <div class="mb-2">
+          <label class="form-label">Confirmer le mot de passe</label>
+          <input type="password" class="form-control" id="passwordConfirm" required />
+        </div>
+        <div class="mb-3">
+          <label for="showPassword" class="mt-3">
             <input type="checkbox" id="showPassword" />
-              Voir le mot de passe
-            </label>
+            Voir le mot de passe
+          </label>
 
-          </div>
-          
+        </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>
-           <div class="text-center mt-3">
-            <a
-              href="../html/page_de_connexion.html"
-              class="text-decoration-none"
-              >Retour à la connexion</a
-        </form>
-      </div>
+
+    
+
+        <button class="btn btn-primary w-100" type="submit">
+          Changer le mot de passe
+        </button>
+        <div class="text-center mt-3">
+          <a href="../html/page_de_connexion.html" class="text-decoration-none">Retour à la connexion</a>
+   </form>
+   </main>
+        </div>
     </div>
-    <script src="../js/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>
+  
+    <script src="/js/password.js"></script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/connexion/js/reinitialisation_du_mot_de_passe.js b/connexion/js/reinitialisation_du_mot_de_passe.js
index 800adda..bc534d1 100644
--- a/connexion/js/reinitialisation_du_mot_de_passe.js
+++ b/connexion/js/reinitialisation_du_mot_de_passe.js
@@ -40,7 +40,7 @@ form.addEventListener('submit', function(e) {
     if (pass.length < minLength) {
         errorMsg.style.display = 'block';
         errorMsg.textContent = `Le mot de passe doit contenir au moins ${minLength} caractères.`;
-        return;
+        return;8 caractères minimum
     }
 
     //Correspondance
@@ -61,7 +61,7 @@ form.addEventListener('submit', function(e) {
 
 
 showPasswordCheckbox.addEventListener('change', function() {
-    if (this.checked) {
+    if (this.checked) {8 caractères minimum
         password.type = 'text';
         confirmPassword.type = 'text'; 
 
diff --git a/js/password.js b/js/password.js
index f503852..397171a 100644
--- a/js/password.js
+++ b/js/password.js
@@ -81,10 +81,17 @@ passwordForm.addEventListener('submit', function(event) {
         password !== confirmPassword) {
         
         event.preventDefault();
+        const main = document.querySelector('main');
+        const existingAlert = main.querySelector('#password-alert');
+        if (existingAlert) {
+            existingAlert.remove();
+        }
+
         const alertElt = document.createElement('div');
+        alertElt.id = 'password-alert';
         alertElt.className = 'alert alert-danger text-center';
         alertElt.textContent = "Le mot de passe ne respecte pas les critères requis ou la confirmation ne correspond pas.";
-        document.querySelector('main').prepend(alertElt); 
+        main.prepend(alertElt); 
       
         window.scrollTo(0, 0);
 
