Feat : login sys

vps-monitor/frontend/src/App.jsx

@@ -1,23 +1,68 @@
 import { useState, useEffect, useCallback } from 'react'
-import { fetchAllStatus, containerAction, addVps, deleteVps, fetchLogs } from './api/client'
+import { fetchAllStatus, containerAction, addVps, deleteVps, fetchLogs, authStatus, getToken, setToken } from './api/client'
 import Header       from './components/Header'
 import VpsCard      from './components/VpsCard'
 import LogsModal    from './components/LogsModal'
 import AddVpsModal  from './components/AddVpsModal'
+import LoginPage    from './components/LoginPage'
 
 const REFRESH_INTERVAL = 30_000
 
 export default function App() {
+  const [token,       setTokenState]  = useState(() => getToken())
+  const [username,    setUsername]    = useState(null)
+  const [isFirstUser, setIsFirstUser] = useState(false)
+  const [authChecked, setAuthChecked] = useState(false)
+
   const [vpsList,     setVpsList]     = useState([])
   const [loading,     setLoading]     = useState(true)
   const [refreshing,  setRefreshing]  = useState(false)
   const [error,       setError]       = useState(null)
   const [lastUpdate,  setLastUpdate]  = useState(null)
-  const [logsModal,   setLogsModal]   = useState(null)   // { vpsId, containerId, name }
+  const [logsModal,   setLogsModal]   = useState(null)
   const [logsContent, setLogsContent] = useState('')
   const [logsLoading, setLogsLoading] = useState(false)
   const [showAddVps,  setShowAddVps]  = useState(false)
 
+  // Vérifie si des utilisateurs existent (pour afficher login ou register)
+  useEffect(() => {
+    authStatus()
+      .then(({ has_users }) => setIsFirstUser(!has_users))
+      .catch(() => setIsFirstUser(false))
+      .finally(() => setAuthChecked(true))
+  }, [])
+
+  // Écoute l'événement d'expiration de token émis par client.js
+  useEffect(() => {
+    const onExpired = () => {
+      setToken(null)
+      setTokenState(null)
+      setUsername(null)
+    }
+    window.addEventListener('auth:expired', onExpired)
+    return () => window.removeEventListener('auth:expired', onExpired)
+  }, [])
+
+  const handleAuthenticated = (accessToken, role, user) => {
+    setToken(accessToken)
+    setTokenState(accessToken)
+    // Récupère le username depuis le payload JWT (base64)
+    try {
+      const payload = JSON.parse(atob(accessToken.split('.')[1]))
+      setUsername(payload.sub)
+    } catch {
+      setUsername(user ?? 'user')
+    }
+  }
+
+  const handleLogout = () => {
+    setToken(null)
+    setTokenState(null)
+    setUsername(null)
+    setVpsList([])
+    setLoading(true)
+  }
+
   const refresh = useCallback(async (showSpinner = false) => {
     if (showSpinner) setRefreshing(true)
     try {
@@ -34,10 +79,21 @@ export default function App() {
   }, [])
 
   useEffect(() => {
+    if (!token) return
     refresh()
     const id = setInterval(() => refresh(), REFRESH_INTERVAL)
     return () => clearInterval(id)
-  }, [refresh])
+  }, [refresh, token])
+
+  // Extrait le username du token stocké au rechargement de page
+  useEffect(() => {
+    if (token && !username) {
+      try {
+        const payload = JSON.parse(atob(token.split('.')[1]))
+        setUsername(payload.sub)
+      } catch { /* ignore */ }
+    }
+  }, [token, username])
 
   const openLogs = async (vpsId, containerId, name) => {
     setLogsModal({ vpsId, containerId, name })
@@ -70,10 +126,23 @@ export default function App() {
     await refresh(true)
   }
 
+  // Attente vérification auth
+  if (!authChecked) return null
+
+  // Pas de token → login / register
+  if (!token) {
+    return (
+      <LoginPage
+        isFirstUser={isFirstUser}
+        onAuthenticated={handleAuthenticated}
+      />
+    )
+  }
+
   // Statistiques globales
-  const totalOnline   = vpsList.filter(v => v.online).length
+  const totalOnline     = vpsList.filter(v => v.online).length
   const totalContainers = vpsList.reduce((acc, v) => acc + v.containers.length, 0)
-  const totalRunning  = vpsList.reduce((acc, v) => acc + v.containers.filter(c => c.status === 'running').length, 0)
+  const totalRunning    = vpsList.reduce((acc, v) => acc + v.containers.filter(c => c.status === 'running').length, 0)
 
   return (
     <div className="min-h-screen bg-gray-950 text-gray-100">
@@ -82,6 +151,8 @@ export default function App() {
         onRefresh={() => refresh(true)}
         onAddVps={() => setShowAddVps(true)}
         refreshing={refreshing}
+        username={username}
+        onLogout={handleLogout}
       />
 
       <main className="max-w-7xl mx-auto px-4 py-8">