feat: add user profile and admin management features
Some checks failed
Build and Push Docker Images / docker (push) Failing after 9s
Some checks failed
Build and Push Docker Images / docker (push) Failing after 9s
This commit is contained in:
jeanotx32
259
vps-monitor/frontend/src/components/AdminPage.jsx
Normal file
259
vps-monitor/frontend/src/components/AdminPage.jsx
Normal file
@@ -0,0 +1,259 @@
|
||||
import { useState, useEffect, useCallback } from 'react'
|
||||
import { ShieldCheck, ArrowLeft, RefreshCw, ToggleLeft, ToggleRight, Check, X } from 'lucide-react'
|
||||
import { getAdminSettings, setAdminSetting, getLoginLogs } from '../api/client'
|
||||
|
||||
const PAGE_SIZE = 50
|
||||
|
||||
function ToggleRow({ label, description, enabled, onChange, loading }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-4 py-3">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-200">{label}</p>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{description}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={onChange}
|
||||
disabled={loading}
|
||||
title={enabled ? 'Désactiver' : 'Activer'}
|
||||
className="flex-shrink-0 disabled:opacity-50 transition-opacity"
|
||||
>
|
||||
{enabled
|
||||
? <ToggleRight size={32} className="text-indigo-400" />
|
||||
: <ToggleLeft size={32} className="text-gray-600" />
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function AdminPage({ onBack }) {
|
||||
// ─── Settings ────────────────────────────────────────────────────────────
|
||||
const [settings, setSettings] = useState(null)
|
||||
const [settingsLoading, setSettingsLoading] = useState(true)
|
||||
const [settingsError, setSettingsError] = useState(null)
|
||||
const [toggleLoading, setToggleLoading] = useState(false)
|
||||
|
||||
const loadSettings = useCallback(async () => {
|
||||
setSettingsLoading(true)
|
||||
setSettingsError(null)
|
||||
try {
|
||||
const data = await getAdminSettings()
|
||||
setSettings(data)
|
||||
} catch (err) {
|
||||
setSettingsError(err.message)
|
||||
} finally {
|
||||
setSettingsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadSettings() }, [loadSettings])
|
||||
|
||||
const toggleRegistration = async () => {
|
||||
if (!settings) return
|
||||
const newValue = settings.registration_open === 'true' ? 'false' : 'true'
|
||||
setToggleLoading(true)
|
||||
try {
|
||||
await setAdminSetting('registration_open', newValue)
|
||||
setSettings(prev => ({ ...prev, registration_open: newValue }))
|
||||
} catch (err) {
|
||||
setSettingsError(err.message)
|
||||
} finally {
|
||||
setToggleLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
// ─── Login logs ──────────────────────────────────────────────────────────
|
||||
const [logs, setLogs] = useState([])
|
||||
const [logsTotal, setLogsTotal] = useState(0)
|
||||
const [logsPage, setLogsPage] = useState(0)
|
||||
const [logsLoading, setLogsLoading] = useState(true)
|
||||
const [logsError, setLogsError] = useState(null)
|
||||
const [filterUser, setFilterUser] = useState('')
|
||||
const [filterSuccess, setFilterSuccess] = useState('all') // 'all' | 'true' | 'false'
|
||||
|
||||
const loadLogs = useCallback(async (page = 0) => {
|
||||
setLogsLoading(true)
|
||||
setLogsError(null)
|
||||
try {
|
||||
const data = await getLoginLogs(PAGE_SIZE, page * PAGE_SIZE)
|
||||
setLogs(data.logs)
|
||||
setLogsTotal(data.total)
|
||||
setLogsPage(page)
|
||||
} catch (err) {
|
||||
setLogsError(err.message)
|
||||
} finally {
|
||||
setLogsLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => { loadLogs(0) }, [loadLogs])
|
||||
|
||||
const filteredLogs = logs.filter(log => {
|
||||
const matchUser = filterUser === '' || log.username.toLowerCase().includes(filterUser.toLowerCase())
|
||||
const matchSuccess = filterSuccess === 'all' || String(log.success) === filterSuccess
|
||||
return matchUser && matchSuccess
|
||||
})
|
||||
|
||||
const totalPages = Math.ceil(logsTotal / PAGE_SIZE)
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-950 text-gray-100">
|
||||
<div className="max-w-5xl mx-auto px-4 py-10">
|
||||
<button
|
||||
onClick={onBack}
|
||||
className="flex items-center gap-1.5 text-sm text-gray-400 hover:text-gray-200 mb-6 transition-colors"
|
||||
>
|
||||
<ArrowLeft size={15} />
|
||||
Retour au tableau de bord
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<div className="p-2 rounded-xl bg-violet-500/15">
|
||||
<ShieldCheck size={20} className="text-violet-400" />
|
||||
</div>
|
||||
<h1 className="text-lg font-semibold">Administration</h1>
|
||||
</div>
|
||||
|
||||
{/* ── Section Paramètres ── */}
|
||||
<section className="bg-gray-900 border border-gray-800 rounded-2xl p-6 mb-8">
|
||||
<h2 className="text-sm font-semibold text-gray-300 mb-1">Paramètres</h2>
|
||||
<p className="text-xs text-gray-500 mb-4">Configuration globale de l'application.</p>
|
||||
|
||||
{settingsError && (
|
||||
<div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 mb-3">
|
||||
{settingsError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{settingsLoading
|
||||
? <p className="text-xs text-gray-500">Chargement…</p>
|
||||
: (
|
||||
<div className="divide-y divide-gray-800">
|
||||
<ToggleRow
|
||||
label="Inscriptions ouvertes"
|
||||
description="Permet à de nouveaux utilisateurs de créer un compte."
|
||||
enabled={settings?.registration_open === 'true'}
|
||||
onChange={toggleRegistration}
|
||||
loading={toggleLoading}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</section>
|
||||
|
||||
{/* ── Section Logs de connexion ── */}
|
||||
<section className="bg-gray-900 border border-gray-800 rounded-2xl p-6">
|
||||
<div className="flex items-center justify-between mb-4 gap-4 flex-wrap">
|
||||
<div>
|
||||
<h2 className="text-sm font-semibold text-gray-300">Tentatives de connexion</h2>
|
||||
<p className="text-xs text-gray-500 mt-0.5">{logsTotal} entrée{logsTotal !== 1 ? 's' : ''} au total</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{/* Filtre utilisateur */}
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Filtrer par utilisateur…"
|
||||
value={filterUser}
|
||||
onChange={(e) => setFilterUser(e.target.value)}
|
||||
className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 transition-colors w-44"
|
||||
/>
|
||||
{/* Filtre succès */}
|
||||
<select
|
||||
value={filterSuccess}
|
||||
onChange={(e) => setFilterSuccess(e.target.value)}
|
||||
className="bg-gray-800 border border-gray-700 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:border-indigo-500 transition-colors"
|
||||
>
|
||||
<option value="all">Tous</option>
|
||||
<option value="true">Succès</option>
|
||||
<option value="false">Échecs</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => loadLogs(logsPage)}
|
||||
disabled={logsLoading}
|
||||
className="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-50 transition-colors"
|
||||
>
|
||||
<RefreshCw size={12} className={logsLoading ? 'animate-spin' : ''} />
|
||||
Actualiser
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{logsError && (
|
||||
<div className="bg-red-950/40 border border-red-800/50 rounded-lg px-3 py-2 text-xs text-red-300 mb-3">
|
||||
{logsError}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{logsLoading && logs.length === 0
|
||||
? <p className="text-xs text-gray-500 py-8 text-center">Chargement…</p>
|
||||
: filteredLogs.length === 0
|
||||
? <p className="text-xs text-gray-500 py-8 text-center">Aucune entrée.</p>
|
||||
: (
|
||||
<div className="overflow-x-auto -mx-2">
|
||||
<table className="w-full text-xs">
|
||||
<thead>
|
||||
<tr className="text-left text-gray-500 border-b border-gray-800">
|
||||
<th className="pb-2 px-2 font-medium">Date / Heure</th>
|
||||
<th className="pb-2 px-2 font-medium">Utilisateur</th>
|
||||
<th className="pb-2 px-2 font-medium">Adresse IP</th>
|
||||
<th className="pb-2 px-2 font-medium">Résultat</th>
|
||||
<th className="pb-2 px-2 font-medium">Détail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-800/60">
|
||||
{filteredLogs.map(log => (
|
||||
<tr key={log.id} className="hover:bg-gray-800/30 transition-colors">
|
||||
<td className="py-2 px-2 text-gray-400 whitespace-nowrap font-mono">
|
||||
{new Date(log.ts).toLocaleString('fr-FR')}
|
||||
</td>
|
||||
<td className="py-2 px-2 text-gray-200 font-mono">{log.username}</td>
|
||||
<td className="py-2 px-2 text-gray-400 font-mono">{log.ip}</td>
|
||||
<td className="py-2 px-2">
|
||||
{log.success
|
||||
? (
|
||||
<span className="inline-flex items-center gap-1 text-emerald-400">
|
||||
<Check size={11} /> Succès
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 text-red-400">
|
||||
<X size={11} /> Échec
|
||||
</span>
|
||||
)
|
||||
}
|
||||
</td>
|
||||
<td className="py-2 px-2 text-gray-500">{log.reason || '—'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{/* Pagination */}
|
||||
{totalPages > 1 && (
|
||||
<div className="flex items-center justify-between mt-4 pt-4 border-t border-gray-800">
|
||||
<button
|
||||
onClick={() => loadLogs(logsPage - 1)}
|
||||
disabled={logsPage === 0 || logsLoading}
|
||||
className="px-3 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 transition-colors"
|
||||
>
|
||||
← Précédent
|
||||
</button>
|
||||
<span className="text-xs text-gray-500">
|
||||
Page {logsPage + 1} / {totalPages}
|
||||
</span>
|
||||
<button
|
||||
onClick={() => loadLogs(logsPage + 1)}
|
||||
disabled={logsPage >= totalPages - 1 || logsLoading}
|
||||
className="px-3 py-1.5 rounded-lg text-xs bg-gray-800 hover:bg-gray-700 disabled:opacity-40 transition-colors"
|
||||
>
|
||||
Suivant →
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user