From 421b97156ae9537bf6e4844e41019602cbac727a Mon Sep 17 00:00:00 2001 From: maximus Date: Mon, 22 Jun 2026 22:27:39 +0200 Subject: [PATCH] remove alert --- src/layouts/AppLayout.jsx | 83 +++++++++++++++++++++--- src/pages/app/Services.jsx | 107 +++++++++++++++++++++---------- src/pages/public/Register.jsx | 116 ++++++++++++++++++++++------------ 3 files changed, 224 insertions(+), 82 deletions(-) diff --git a/src/layouts/AppLayout.jsx b/src/layouts/AppLayout.jsx index 837bd11..05411b0 100644 --- a/src/layouts/AppLayout.jsx +++ b/src/layouts/AppLayout.jsx @@ -1,12 +1,75 @@ // src/layouts/AppLayout.jsx +import { useState } from 'react'; import { Outlet, NavLink, useNavigate } from 'react-router-dom'; +// ============================================================================ +// COMPOSANT : MODAL DE CONFIRMATION DE DÉCONNEXION +// ============================================================================ +const ConfirmLogoutModal = ({ isOpen, onClose, onConfirm }) => { + if (!isOpen) return null; + + return ( +
+
+

+ DÉCONNEXION DU TERMINAL +

+

+ Êtes-vous sûr de vouloir fermer la session sécurisée et quitter l'environnement cloud ? +

+
+ + +
+
+
+ ); +}; + +// ============================================================================ +// COMPOSANT PRINCIPAL : LAYOUT DU PORTAIL +// ============================================================================ export default function AppLayout() { const navigate = useNavigate(); + const [showLogoutModal, setShowLogoutModal] = useState(false); - const handleLogout = () => { - // Ici, tu pourras ajouter la logique de déconnexion (effacer les cookies/tokens) - alert("[ DÉCONNEXION EN COURS... ]"); + // Ouvre simplement le modal + const handleLogoutClick = () => { + setShowLogoutModal(true); + }; + + // Exécute la vraie déconnexion + const confirmLogout = () => { + // Ici, tu pourras effacer les tokens (ex: localStorage.removeItem('token')) + setShowLogoutModal(false); navigate('/login'); }; @@ -83,7 +146,7 @@ export default function AppLayout() { {/* Bas de la Sidebar (Déconnexion) */}
); } \ No newline at end of file diff --git a/src/pages/app/Services.jsx b/src/pages/app/Services.jsx index abc98f2..a9f21bd 100644 --- a/src/pages/app/Services.jsx +++ b/src/pages/app/Services.jsx @@ -1,7 +1,28 @@ import { useState, useEffect, useCallback } from 'react'; import { getMyServices, getServiceDetails, getHostingServiceDetails, resetHostingPassword } from '../../services/api'; import { useVPC } from '../../services/useVPC'; -import { Server, Database, Cloud, Globe, Folder, Trash2, ExternalLink, Loader, Plus, Play, Lock } from 'lucide-react'; +import { Server, Database, Cloud, Globe, Folder, Trash2, ExternalLink, Loader, Plus, Play, Lock, Maximize2 } from 'lucide-react'; + +// ============================================================================ +// COMPOSANT 0 : MODAL DE NOTIFICATION (Remplace les alert() natifs) +// ============================================================================ +const NotificationModal = ({ notification, onClose }) => { + if (!notification) return null; + const isError = notification.type === 'error'; + return ( +
+
+

+ {notification.title.toUpperCase()} +

+

{notification.message}

+ +
+
+ ); +}; // ============================================================================ // COMPOSANT 1 : INSTANCE CARD (Mode PaaS Pur - IP Masquée) @@ -129,13 +150,13 @@ const InstanceCard = ({ service, vpcs, onAssignVpc, onRemoveVpc, onOpenConsole, // ============================================================================ // COMPOSANT 2 : VPS DEPLOYER (Instanciation) // ============================================================================ -const VpsDeployer = ({ serviceId, onDeploySuccess }) => { +const VpsDeployer = ({ serviceId, onDeploySuccess, onAlert }) => { const [domain, setDomain] = useState(''); const [password, setPassword] = useState(''); const [isDeploying, setIsDeploying] = useState(false); const handleDeploy = async () => { - if (password.length < 8) { alert("Le mot de passe doit faire au moins 8 caractères."); return; } + if (password.length < 8) { onAlert("Sécurité", "Le mot de passe doit faire au moins 8 caractères.", "error"); return; } setIsDeploying(true); try { @@ -149,10 +170,10 @@ const VpsDeployer = ({ serviceId, onDeploySuccess }) => { if (data.status === 'success') { onDeploySuccess({ ip: data.ip, domain: data.domain, password: password }); } else { - alert("Erreur de provisionnement : " + (data.message || 'Inconnue')); + onAlert("Échec", "Erreur de provisionnement : " + (data.message || 'Inconnue'), "error"); } } catch (err) { - alert("Erreur de communication avec l'API Proxmox Gateway."); + onAlert("Erreur Réseau", "Erreur de communication avec l'API Proxmox Gateway.", "error"); } finally { setIsDeploying(false); } @@ -185,7 +206,7 @@ const VpsDeployer = ({ serviceId, onDeploySuccess }) => { // ============================================================================ // COMPOSANT 3 : VPS MANAGER (Day-2 Operations) // ============================================================================ -const VpsManager = ({ details, orderId, onRefresh, onClose }) => { +const VpsManager = ({ details, orderId, onRefresh, onAlert }) => { const [showTerminal, setShowTerminal] = useState(false); const [isEditingDomain, setIsEditingDomain] = useState(false); const [newDomain, setNewDomain] = useState(details.domain); @@ -211,10 +232,10 @@ const VpsManager = ({ details, orderId, onRefresh, onClose }) => { if (data.status === 'success') { setIsEditingDomain(false); if (onRefresh) onRefresh(); - alert("Domaine VPS mis à jour avec succès sur l'infrastructure !"); - } else alert("Erreur: " + data.error); + onAlert("Succès", "Domaine VPS mis à jour avec succès sur l'infrastructure !", "success"); + } else onAlert("Erreur", data.error, "error"); } catch (err) { - alert("Erreur de connexion avec l'API."); + onAlert("Erreur", "Erreur de connexion avec l'API.", "error"); } finally { setIsUpdating(false); } }; @@ -229,10 +250,10 @@ const VpsManager = ({ details, orderId, onRefresh, onClose }) => { const data = await response.json(); if (data.status === 'success') { setSslStatus('success'); - alert("Certificat SSL Let's Encrypt généré et activé avec succès !"); + onAlert("SSL Activé", "Certificat SSL Let's Encrypt généré et activé avec succès !", "success"); } else { setSslStatus('error'); - alert("Échec de la validation DNS. Vérifiez que votre domaine pointe bien vers notre IP."); + onAlert("Challenge DNS Échoué", "Vérifiez que votre domaine pointe bien vers notre IP publique.", "error"); } } catch (e) { setSslStatus('error'); } }; @@ -268,6 +289,13 @@ const VpsManager = ({ details, orderId, onRefresh, onClose }) => { )} + + {/* ACCÈS DE FAUT REMIS À JOUR */} +
+ Identifiants d'usine : +

Console SSH : root / Clé choisie à l'initialisation

+

Explorateur : admin / admin

+
@@ -291,7 +319,13 @@ const VpsManager = ({ details, orderId, onRefresh, onClose }) => {
NEXUS TERMINAL ({details.domain}) - +
+ {/* OPTION AJOUTÉE : OUVRIR EN PLEIN ÉCRAN DANS UN NOUVEL ONGLET */} + + +