Front + gestion des utilisateurs
This commit is contained in:
@@ -0,0 +1,340 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Sécurité - Giraud Finance</title>
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="../images/dollars.ico"
|
||||
/>
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<!-- CSS général -->
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
</head>
|
||||
|
||||
<body class="bg-slate-900 text-slate-100 min-h-screen">
|
||||
<div class="max-w-7xl mx-auto p-6">
|
||||
<!-- =====================================================
|
||||
EN-TÊTE
|
||||
===================================================== -->
|
||||
|
||||
<div
|
||||
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl p-6 mb-6"
|
||||
>
|
||||
<div
|
||||
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4"
|
||||
>
|
||||
<!-- Titre -->
|
||||
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-white">Sécurité</h1>
|
||||
|
||||
<p class="text-sm text-slate-400 mt-1">Gestion des utilisateurs</p>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Nouveau utilisateur -->
|
||||
|
||||
<button
|
||||
id="btnNouvelUtilisateur"
|
||||
type="button"
|
||||
class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-emerald-500"
|
||||
>
|
||||
+ Nouvel utilisateur
|
||||
</button>
|
||||
|
||||
<!-- Retour au menu -->
|
||||
|
||||
<a
|
||||
href="./admin.html"
|
||||
class="bg-slate-700 hover:bg-slate-600 text-white font-semibold px-5 py-2.5 rounded-xl shadow-lg transition-all border border-slate-600"
|
||||
>
|
||||
← Retour au menu
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =====================================================
|
||||
MESSAGE
|
||||
===================================================== -->
|
||||
|
||||
<div
|
||||
id="message"
|
||||
class="hidden mb-4 px-4 py-3 rounded-xl text-sm font-medium"
|
||||
></div>
|
||||
|
||||
<!-- =====================================================
|
||||
TABLEAU UTILISATEURS
|
||||
===================================================== -->
|
||||
|
||||
<div
|
||||
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-xl overflow-hidden"
|
||||
>
|
||||
<div class="overflow-x-auto">
|
||||
<table class="w-full">
|
||||
<!-- En-tête -->
|
||||
|
||||
<thead class="bg-slate-950 text-slate-300">
|
||||
<tr>
|
||||
<th
|
||||
class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Utilisateur
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Créé le
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-left px-6 py-4 text-xs font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Dernière connexion
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-center px-6 py-4 text-xs font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Statut
|
||||
</th>
|
||||
|
||||
<th
|
||||
class="text-right px-6 py-4 text-xs font-semibold uppercase tracking-wider"
|
||||
>
|
||||
Actions
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<!-- Utilisateurs -->
|
||||
|
||||
<tbody
|
||||
id="listeUtilisateurs"
|
||||
class="divide-y divide-slate-700"
|
||||
></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =====================================================
|
||||
MODALE : NOUVEL UTILISATEUR
|
||||
===================================================== -->
|
||||
|
||||
<div
|
||||
id="modalCreation"
|
||||
class="hidden fixed inset-0 z-50 bg-black/70 items-center justify-center p-4"
|
||||
>
|
||||
<div
|
||||
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl w-full max-w-md"
|
||||
>
|
||||
<!-- Titre -->
|
||||
|
||||
<div class="px-6 py-5 border-b border-slate-700">
|
||||
<h2 class="text-xl font-bold text-white">Nouvel utilisateur</h2>
|
||||
|
||||
<p class="text-xs text-slate-400 mt-1">
|
||||
Créer un nouvel accès à l'administration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire -->
|
||||
|
||||
<form id="formCreation" class="p-6 space-y-5">
|
||||
<!-- Nom -->
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="creationNom"
|
||||
class="block text-sm font-medium text-slate-300 mb-2"
|
||||
>
|
||||
Nom utilisateur
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="creationNom"
|
||||
name="nom"
|
||||
required
|
||||
maxlength="100"
|
||||
autocomplete="username"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mot de passe -->
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="creationPass"
|
||||
class="block text-sm font-medium text-slate-300 mb-2"
|
||||
>
|
||||
Mot de passe
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
id="creationPass"
|
||||
name="pass"
|
||||
required
|
||||
minlength="4"
|
||||
autocomplete="new-password"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||
/>
|
||||
|
||||
<p class="text-xs text-slate-500 mt-2">4 caractères minimum.</p>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation -->
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="creationPass2"
|
||||
class="block text-sm font-medium text-slate-300 mb-2"
|
||||
>
|
||||
Confirmation du mot de passe
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
id="creationPass2"
|
||||
name="pass2"
|
||||
required
|
||||
minlength="4"
|
||||
autocomplete="new-password"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-emerald-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
|
||||
<div class="flex justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
id="btnAnnulerCreation"
|
||||
class="px-5 py-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl border border-slate-600 transition"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-emerald-600 hover:bg-emerald-500 text-white font-semibold px-5 py-2.5 rounded-xl transition"
|
||||
>
|
||||
Créer
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =====================================================
|
||||
MODALE : MODIFICATION MOT DE PASSE
|
||||
===================================================== -->
|
||||
|
||||
<div
|
||||
id="modalPassword"
|
||||
class="hidden fixed inset-0 z-50 bg-black/70 items-center justify-center p-4"
|
||||
>
|
||||
<div
|
||||
class="bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl w-full max-w-md"
|
||||
>
|
||||
<!-- Titre -->
|
||||
|
||||
<div class="px-6 py-5 border-b border-slate-700">
|
||||
<h2 class="text-xl font-bold text-white">Modifier le mot de passe</h2>
|
||||
|
||||
<p id="passwordUtilisateur" class="text-sm text-slate-400 mt-1"></p>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire -->
|
||||
|
||||
<form id="formPassword" class="p-6 space-y-5">
|
||||
<input type="hidden" id="passwordId" />
|
||||
|
||||
<!-- Nouveau mot de passe -->
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="nouveauPass"
|
||||
class="block text-sm font-medium text-slate-300 mb-2"
|
||||
>
|
||||
Nouveau mot de passe
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
id="nouveauPass"
|
||||
name="pass"
|
||||
required
|
||||
minlength="4"
|
||||
autocomplete="new-password"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
|
||||
/>
|
||||
|
||||
<p class="text-xs text-slate-500 mt-2">4 caractères minimum.</p>
|
||||
</div>
|
||||
|
||||
<!-- Confirmation -->
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="nouveauPass2"
|
||||
class="block text-sm font-medium text-slate-300 mb-2"
|
||||
>
|
||||
Confirmation
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
id="nouveauPass2"
|
||||
name="pass2"
|
||||
required
|
||||
minlength="4"
|
||||
autocomplete="new-password"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-white focus:outline-none focus:border-orange-500 focus:ring-1 focus:ring-orange-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Boutons -->
|
||||
|
||||
<div class="flex justify-end gap-3 pt-4">
|
||||
<button
|
||||
type="button"
|
||||
id="btnAnnulerPassword"
|
||||
class="px-5 py-2.5 bg-slate-700 hover:bg-slate-600 text-white rounded-xl border border-slate-600 transition"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="bg-orange-600 hover:bg-orange-500 text-white font-semibold px-5 py-2.5 rounded-xl transition"
|
||||
>
|
||||
Modifier
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =====================================================
|
||||
JAVASCRIPT
|
||||
===================================================== -->
|
||||
|
||||
<script src="../js/securite.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user