backtime modif majeur
This commit is contained in:
sebvtl728
parent
14897e198c
commit
d94cf23e24
@ -198,4 +198,46 @@ input:checked + .slider:before {
|
||||
.login-button:hover {
|
||||
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;
|
||||
}
|
||||
@ -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";
|
||||
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 [passwordHash, setPasswordHash] = useState("");
|
||||
const [totalDuration, setTotalDuration] = useState(() => {
|
||||
return parseInt(localStorage.getItem("totalDuration"), 10) || 15; // ✅ Utiliser la durée stockée
|
||||
const [timeRemaining, setTimeRemaining] = useState(null);
|
||||
const [selectedDuration, setSelectedDuration] = useState(() => {
|
||||
return parseInt(localStorage.getItem("criticalAlertDuration")) || 15;
|
||||
});
|
||||
const [isActive, setIsActive] = useState(() => {
|
||||
return localStorage.getItem("criticalAlertActive") === "yes";
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
try {
|
||||
const envPasswordHash = import.meta.env.VITE_PASSWORD_HASH || "";
|
||||
setPasswordHash(envPasswordHash);
|
||||
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);
|
||||
const storedAuth = localStorage.getItem("backtimeAuth");
|
||||
if (storedAuth === "true") {
|
||||
setIsAuthenticated(true);
|
||||
}
|
||||
|
||||
updateTimeRemaining();
|
||||
const interval = setInterval(updateTimeRemaining, 1000);
|
||||
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("totalDuration", totalDuration);
|
||||
adjustStartTime();
|
||||
updateTimeRemaining(); // ✅ Mise à jour immédiate dès modification de la durée
|
||||
}, [totalDuration]);
|
||||
if (isActive) {
|
||||
localStorage.setItem("criticalAlertDuration", selectedDuration);
|
||||
if (!localStorage.getItem("criticalAlertStartTime")) {
|
||||
localStorage.setItem("criticalAlertStartTime", Date.now().toString());
|
||||
}
|
||||
updateTimeRemaining();
|
||||
}
|
||||
}, [selectedDuration]);
|
||||
|
||||
useEffect(() => {
|
||||
updateTimeRemaining(); // ✅ Exécute `updateTimeRemaining()` immédiatement après modification
|
||||
}, [totalDuration]);
|
||||
const hashPassword = async (password) => {
|
||||
const encoder = new TextEncoder();
|
||||
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 existingStartTime = localStorage.getItem("criticalAlertStartTime");
|
||||
|
||||
if (!existingStartTime) {
|
||||
console.log("⏳ Initialisation de `criticalAlertStartTime`.");
|
||||
localStorage.setItem("criticalAlertStartTime", Date.now().toString());
|
||||
const handleLogin = async () => {
|
||||
const hashedInput = await hashPassword(inputPassword);
|
||||
if (hashedInput === PASSWORD_HASH) {
|
||||
localStorage.setItem("backtimeAuth", "true");
|
||||
setIsAuthenticated(true);
|
||||
} else {
|
||||
const startTimestamp = parseInt(existingStartTime, 10);
|
||||
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());
|
||||
alert("Mot de passe incorrect !");
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
localStorage.removeItem("backtimeAuth");
|
||||
setIsAuthenticated(false);
|
||||
};
|
||||
|
||||
const updateTimeRemaining = () => {
|
||||
try {
|
||||
const startTime = localStorage.getItem("criticalAlertStartTime");
|
||||
|
||||
if (!startTime) {
|
||||
setTimeRemaining("Aucune alerte activée");
|
||||
return;
|
||||
}
|
||||
const startTime = localStorage.getItem("criticalAlertStartTime");
|
||||
|
||||
if (startTime) {
|
||||
const startTimestamp = parseInt(startTime, 10);
|
||||
const now = Date.now();
|
||||
let elapsedTime = now - startTimestamp;
|
||||
|
||||
if (elapsedTime < 0) elapsedTime = 0;
|
||||
|
||||
const totalTime = totalDuration * 24 * 60 * 60 * 1000;
|
||||
const elapsedTime = now - startTimestamp;
|
||||
const totalTime = selectedDuration * 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) {
|
||||
console.error("❌ Erreur dans updateTimeRemaining :", error);
|
||||
} else {
|
||||
setTimeRemaining("Aucune alerte activée");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDurationChange = (e) => {
|
||||
const newDuration = parseInt(e.target.value, 10);
|
||||
if (!isNaN(newDuration) && newDuration > 0) {
|
||||
console.log("🔄 Mise à jour de la durée à :", newDuration);
|
||||
setTotalDuration(newDuration);
|
||||
const handleDurationChange = (event) => {
|
||||
const newDuration = parseInt(event.target.value, 10);
|
||||
setSelectedDuration(newDuration);
|
||||
if (isActive) {
|
||||
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">
|
||||
Déconnexion
|
||||
</button>
|
||||
|
||||
<div className="time-setting">
|
||||
<label>Durée totale en jours :</label>
|
||||
<input
|
||||
type="number"
|
||||
value={totalDuration}
|
||||
onChange={handleDurationChange}
|
||||
/>
|
||||
<button onClick={handleLogout} className="logout-button">Déconnexion</button>
|
||||
|
||||
<div className="switch-container">
|
||||
<SwitchControl isActive={isActive} setIsActive={setIsActive} selectedDuration={selectedDuration} />
|
||||
</div>
|
||||
|
||||
<div className="switch-container">
|
||||
<SwitchControl />
|
||||
<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;
|
||||
@ -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 (
|
||||
@ -32,6 +30,4 @@ const SwitchControl = () => {
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SwitchControl;
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user