341 lines
10 KiB
HTML
341 lines
10 KiB
HTML
<!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>
|