backtime modif majeur

frontend/src/components/Pages/Backtime.css

@@ -199,3 +199,45 @@ input:checked + .slider:before {
     background: linear-gradient(135deg, #2980b9, #1c6ea4);
     transform: scale(1.05);
 }
+
+/* 🎨 Design amélioré du menu déroulant */
+.duration-selector {
+  margin-top: 20px;
+  text-align: center;
+}
+
+.duration-selector label {
+  font-size: 1.2rem;
+  font-weight: bold;
+  color: #f0c040;
+  display: block;
+  margin-bottom: 8px;
+}
+
+/* 🌟 Style du select */
+.duration-selector select {
+  width: 100%;
+  padding: 12px;
+  font-size: 1.1rem;
+  font-weight: bold;
+  color: white;
+  background: linear-gradient(135deg, #222831, #393e46);
+  border: 2px solid #f0c040;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+}
+
+/* 🎨 Effet au survol */
+.duration-selector select:hover {
+  background: linear-gradient(135deg, #393e46, #222831);
+  border-color: #ffcc00;
+}
+
+/* 🔽 Apparence des options */
+.duration-selector select option {
+  background: #222831;
+  color: white;
+  font-size: 1rem;
+  padding: 10px;
+}

frontend/src/components/Pages/Backtime.jsx

@@ -1,93 +1,79 @@
 import React, { useState, useEffect } from "react";
 import { Helmet } from "react-helmet";
-import SwitchControl from "../SwitchControl"; // ✅ Import du SwitchControl
 import "./Backtime.css";
 
+const PASSWORD_HASH = import.meta.env.VITE_PASSWORD_HASH;
+
 const Backtime = () => {
     const [isAuthenticated, setIsAuthenticated] = useState(false);
     const [inputPassword, setInputPassword] = useState("");
-    const [timeRemaining, setTimeRemaining] = useState("Chargement...");
+    const [timeRemaining, setTimeRemaining] = useState(null);
-    const [passwordHash, setPasswordHash] = useState(""); 
+    const [selectedDuration, setSelectedDuration] = useState(() => {
-    const [totalDuration, setTotalDuration] = useState(() => {
+        return parseInt(localStorage.getItem("criticalAlertDuration")) || 15;
-        return parseInt(localStorage.getItem("totalDuration"), 10) || 15; // ✅ Utiliser la durée stockée
+    });
+    const [isActive, setIsActive] = useState(() => {
+        return localStorage.getItem("criticalAlertActive") === "yes";
     });
 
     useEffect(() => {
-        try {
+        const storedAuth = localStorage.getItem("backtimeAuth");
-            const envPasswordHash = import.meta.env.VITE_PASSWORD_HASH || "";
+        if (storedAuth === "true") {
-            setPasswordHash(envPasswordHash);
+            setIsAuthenticated(true);
-            console.log("✅ DEBUG : Mot de passe attendu depuis .env :", envPasswordHash);
-
-            const storedAuth = localStorage.getItem("backtimeAuth");
-            if (storedAuth === "true") {
-                setIsAuthenticated(true);
-            }
-
-            updateTimeRemaining(); // ✅ Mise à jour immédiate du chrono
-            const interval = setInterval(updateTimeRemaining, 1000);
-            return () => clearInterval(interval);
-        } catch (error) {
-            console.error("❌ Erreur dans useEffect :", error);
         }
+
+        updateTimeRemaining();
+        const interval = setInterval(updateTimeRemaining, 1000);
+
+        return () => clearInterval(interval);
     }, []);
 
     useEffect(() => {
-        localStorage.setItem("totalDuration", totalDuration);
+        if (isActive) {
-        adjustStartTime();
+            localStorage.setItem("criticalAlertDuration", selectedDuration);
-        updateTimeRemaining(); // ✅ Mise à jour immédiate dès modification de la durée
+            if (!localStorage.getItem("criticalAlertStartTime")) {
-    }, [totalDuration]);
+                localStorage.setItem("criticalAlertStartTime", Date.now().toString());
+            }
+            updateTimeRemaining();
+        }
+    }, [selectedDuration]);
 
-    useEffect(() => {
+    const hashPassword = async (password) => {
-        updateTimeRemaining(); // ✅ Exécute `updateTimeRemaining()` immédiatement après modification
+        const encoder = new TextEncoder();
-    }, [totalDuration]); 
+        const data = encoder.encode(password);
+        const hashBuffer = await crypto.subtle.digest("SHA-256", data);
+        return Array.from(new Uint8Array(hashBuffer))
+            .map((b) => b.toString(16).padStart(2, "0"))
+            .join("");
+    };
 
-    const adjustStartTime = () => {
+    const handleLogin = async () => {
-        const existingStartTime = localStorage.getItem("criticalAlertStartTime");
+        const hashedInput = await hashPassword(inputPassword);
-
+        if (hashedInput === PASSWORD_HASH) {
-        if (!existingStartTime) {
+            localStorage.setItem("backtimeAuth", "true");
-            console.log("⏳ Initialisation de `criticalAlertStartTime`.");
+            setIsAuthenticated(true);
-            localStorage.setItem("criticalAlertStartTime", Date.now().toString());
         } else {
-            const startTimestamp = parseInt(existingStartTime, 10);
+            alert("Mot de passe incorrect !");
-            const now = Date.now();
-            let elapsedTime = now - startTimestamp;
-
-            if (elapsedTime < 0) elapsedTime = 0;
-
-            const newTotalTime = totalDuration * 24 * 60 * 60 * 1000;
-            const adjustedStartTime = now - elapsedTime; 
-
-            console.log(`🔄 Correction ` +
-                        `Ancien Start Time = ${startTimestamp}, ` +
-                        `Nouveau Start Time = ${adjustedStartTime}, ` +
-                        `Temps Écoulé = ${elapsedTime}`);
-            
-            localStorage.setItem("criticalAlertStartTime", adjustedStartTime.toString());
         }
     };
 
+    const handleLogout = () => {
+        localStorage.removeItem("backtimeAuth");
+        setIsAuthenticated(false);
+    };
+
     const updateTimeRemaining = () => {
-        try {
+        const startTime = localStorage.getItem("criticalAlertStartTime");
-            const startTime = localStorage.getItem("criticalAlertStartTime");
-
-            if (!startTime) {
-                setTimeRemaining("Aucune alerte activée");
-                return;
-            }
 
+        if (startTime) {
             const startTimestamp = parseInt(startTime, 10);
             const now = Date.now();
-            let elapsedTime = now - startTimestamp;
+            const elapsedTime = now - startTimestamp;
-
+            const totalTime = selectedDuration * 24 * 60 * 60 * 1000;
-            if (elapsedTime < 0) elapsedTime = 0;
-
-            const totalTime = totalDuration * 24 * 60 * 60 * 1000;
             const remainingTime = totalTime - elapsedTime;
 
-            console.log(`🕒 DEBUG : Temps écoulé = ${elapsedTime}, Temps total = ${totalTime}, Temps restant = ${remainingTime}`);
-
             if (remainingTime <= 0) {
-                setTimeRemaining("Le site est complètement blanc !");
+                setTimeRemaining("Le site est complètement transparent !");
+                localStorage.setItem("criticalAlertActive", "no"); // Désactive le module si le temps est écoulé
             } else {
                 const days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
                 const hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
@@ -95,16 +81,20 @@ const Backtime = () => {
                 const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
                 setTimeRemaining(`${days}j ${hours}h ${minutes}m ${seconds}s`);
             }
-        } catch (error) {
+        } else {
-            console.error("❌ Erreur dans updateTimeRemaining :", error);
+            setTimeRemaining("Aucune alerte activée");
         }
     };
 
-    const handleDurationChange = (e) => {
+    const handleDurationChange = (event) => {
-        const newDuration = parseInt(e.target.value, 10);
+        const newDuration = parseInt(event.target.value, 10);
-        if (!isNaN(newDuration) && newDuration > 0) {
+        setSelectedDuration(newDuration);
-            console.log("🔄 Mise à jour de la durée à :", newDuration);
+        if (isActive) {
-            setTotalDuration(newDuration);
+            localStorage.setItem("criticalAlertDuration", newDuration);
+            if (!localStorage.getItem("criticalAlertStartTime")) {
+                localStorage.setItem("criticalAlertStartTime", Date.now().toString());
+            }
+            updateTimeRemaining();
         }
     };
 
@@ -112,32 +102,30 @@ const Backtime = () => {
         <div className="backtime-container">
             <Helmet>
                 <meta name="robots" content="noindex, nofollow" />
-                <title>Gestion du module d'alerte</title>
+                <title>Page introuvable</title>
                 <style>{`body { opacity: 1 !important; }`}</style>
             </Helmet>
 
             {isAuthenticated ? (
                 <>
                     <h2>Gestion du module d'alerte critique</h2>
-                    <button onClick={() => setIsAuthenticated(false)} className="logout-button">
+                    <button onClick={handleLogout} className="logout-button">Déconnexion</button>
-                        Déconnexion
-                    </button>
-
-                    <div className="time-setting">
-                        <label>Durée totale en jours :</label>
-                        <input 
-                            type="number" 
-                            value={totalDuration} 
-                            onChange={handleDurationChange}
-                        />
-                    </div>
                     
                     <div className="switch-container">
-                        <SwitchControl />
+                        <SwitchControl isActive={isActive} setIsActive={setIsActive} selectedDuration={selectedDuration} />
+                    </div>
+
+                    <div className="duration-selector">
+                        <label>Durée du processus :</label>
+                        <select value={selectedDuration} onChange={handleDurationChange}>
+                            {Array.from({ length: 15 }, (_, i) => i + 1).map((day) => (
+                                <option key={day} value={day}>{day} jours</option>
+                            ))}
+                        </select>
                     </div>
 
                     <div className="countdown">
-                        <h3>Temps restant avant blanchiment total :</h3>
+                        <h3>Temps restant avant transparence totale :</h3>
                         <p>{timeRemaining}</p>
                     </div>
                 </>
@@ -150,11 +138,44 @@ const Backtime = () => {
                         value={inputPassword}
                         onChange={(e) => setInputPassword(e.target.value)}
                     />
-                    <button onClick={() => setIsAuthenticated(true)} className="login-button">Valider</button>
+                    <button onClick={handleLogin} className="login-button">Valider</button>
                 </div>
             )}
         </div>
     );
 };
 
+const SwitchControl = ({ isActive, setIsActive, selectedDuration }) => {
+    useEffect(() => {
+        const alertStatus = localStorage.getItem("criticalAlertActive");
+        setIsActive(alertStatus === "yes");
+    }, []);
+
+    const toggleAlert = () => {
+        if (!isActive) {
+            localStorage.setItem("criticalAlertActive", "yes");
+            if (!localStorage.getItem("criticalAlertStartTime")) {
+                localStorage.setItem("criticalAlertStartTime", Date.now().toString());
+            }
+            localStorage.setItem("criticalAlertDuration", selectedDuration);
+        } else {
+            localStorage.setItem("criticalAlertActive", "no");
+            localStorage.removeItem("criticalAlertStartTime");
+        }
+        setIsActive(!isActive);
+    };
+
+    return (
+        <div className="switch-container">
+            <label className="switch">
+                <input type="checkbox" checked={isActive} onChange={toggleAlert} />
+                <span className="slider"></span>
+            </label>
+            <span className={`status-indicator ${isActive ? "active" : "inactive"}`}>
+                {isActive ? "Module Actif" : "Module Inactif"}
+            </span>
+        </div>
+    );
+};
+
 export default Backtime;

frontend/src/components/SwitchControl.jsx

@@ -1,8 +1,7 @@
-import React, { useState, useEffect } from "react";
-import "./SwitchControl.css"; 
-
 const SwitchControl = () => {
-    const [isActive, setIsActive] = useState(false);
+    const [isActive, setIsActive] = useState(() => {
+        return localStorage.getItem("criticalAlertActive") === "yes";
+    });
 
     useEffect(() => {
         const alertStatus = localStorage.getItem("criticalAlertActive");
@@ -14,11 +13,10 @@ const SwitchControl = () => {
             localStorage.setItem("criticalAlertActive", "yes");
             localStorage.setItem("criticalAlertStartTime", Date.now().toString());
         } else {
-            localStorage.removeItem("criticalAlertActive");
+            localStorage.setItem("criticalAlertActive", "no");
             localStorage.removeItem("criticalAlertStartTime");
         }
         setIsActive(!isActive);
-        window.location.reload();
     };
 
     return (
@@ -33,5 +31,3 @@ const SwitchControl = () => {
         </div>
     );
 };
-
-export default SwitchControl;