Front + gestion des utilisateurs
This commit is contained in:
+419
@@ -0,0 +1,419 @@
|
||||
<!doctype html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<title>Administration - Giraud Finance</title>
|
||||
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="../images/dollars.ico"
|
||||
/>
|
||||
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
|
||||
<link rel="stylesheet" href="../css/style.css" />
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="bg-slate-900 text-slate-100 min-h-screen flex flex-col justify-between"
|
||||
>
|
||||
<!-- =========================================================
|
||||
HEADER
|
||||
========================================================= -->
|
||||
|
||||
<header
|
||||
class="max-w-7xl w-full mx-auto px-6 py-6 mt-4 bg-slate-800 border border-slate-700 rounded-2xl shadow-xl flex justify-between items-center"
|
||||
>
|
||||
<div class="flex items-center">
|
||||
<img
|
||||
src="../images/GFBlanc.png"
|
||||
alt="Logo Giraud Finance"
|
||||
class="h-12 w-auto object-contain"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h1 class="text-xl font-bold text-white tracking-tight">
|
||||
Espace d'Administration
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<a
|
||||
href="https://www.giraud-finance.com"
|
||||
class="bg-slate-700 hover:bg-slate-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all border border-slate-600 flex items-center space-x-2"
|
||||
>
|
||||
<span>← Retour au site</span>
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- =========================================================
|
||||
CONTENU PRINCIPAL
|
||||
========================================================= -->
|
||||
|
||||
<main class="flex-grow flex items-center justify-center p-6">
|
||||
<!-- =====================================================
|
||||
LOGIN
|
||||
===================================================== -->
|
||||
|
||||
<div
|
||||
id="login-box"
|
||||
class="w-full max-w-md bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6"
|
||||
>
|
||||
<div class="text-center">
|
||||
<h2 class="text-lg font-bold text-white">Connexion requise</h2>
|
||||
|
||||
<p class="text-xs text-slate-400 mt-1">
|
||||
Veuillez vous identifier pour accéder au panneau de configuration.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<form id="form-login" class="space-y-4">
|
||||
<!-- Identifiant -->
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="username"
|
||||
class="block text-xs font-semibold text-slate-300 uppercase mb-1"
|
||||
>
|
||||
Identifiant
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
required
|
||||
autocomplete="username"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
|
||||
placeholder="Votre nom d'utilisateur"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mot de passe -->
|
||||
|
||||
<div>
|
||||
<label
|
||||
for="password"
|
||||
class="block text-xs font-semibold text-slate-300 uppercase mb-1"
|
||||
>
|
||||
Mot de passe
|
||||
</label>
|
||||
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:border-emerald-500"
|
||||
placeholder="••••••••"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Erreur -->
|
||||
|
||||
<div
|
||||
id="login-error"
|
||||
class="text-rose-400 text-xs text-center hidden"
|
||||
></div>
|
||||
|
||||
<!-- Bouton -->
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
id="btn-login"
|
||||
class="w-full bg-emerald-600 hover:bg-emerald-500 text-white font-bold py-3 rounded-xl transition-all shadow-lg text-sm"
|
||||
>
|
||||
Se connecter
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="text-center pt-2 border-t border-slate-700/60">
|
||||
<span class="text-[11px] text-slate-500">
|
||||
Accès réservé aux administrateurs
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- =====================================================
|
||||
DASHBOARD ADMINISTRATEUR
|
||||
===================================================== -->
|
||||
|
||||
<div
|
||||
id="admin-dashboard"
|
||||
class="w-full max-w-4xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
|
||||
>
|
||||
<!-- Entête dashboard -->
|
||||
|
||||
<div
|
||||
class="flex justify-between items-center border-b border-slate-700 pb-4"
|
||||
>
|
||||
<div>
|
||||
<h2 class="text-lg font-bold text-white">Panneau de contrôle</h2>
|
||||
|
||||
<p id="welcome-user" class="text-xs text-slate-400">
|
||||
Bienvenue dans l'espace sécurisé Giraud Finance.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="btn-logout"
|
||||
type="button"
|
||||
class="bg-rose-600/80 hover:bg-rose-600 text-white text-xs font-semibold px-4 py-2 rounded-xl transition-all"
|
||||
>
|
||||
Déconnexion
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- =================================================
|
||||
BLOCS ADMINISTRATION
|
||||
================================================= -->
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Gestion indices -->
|
||||
|
||||
<div
|
||||
class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3"
|
||||
>
|
||||
<h3 class="text-sm font-bold text-white">
|
||||
Gestion des Indices & Actions
|
||||
</h3>
|
||||
|
||||
<p class="text-xs text-slate-400">
|
||||
Paramétrez l'affichage des actions et le statut des indices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- =================================================
|
||||
SECURITE DU COMPTE
|
||||
================================================= -->
|
||||
|
||||
<a
|
||||
href="/html/securite.html"
|
||||
id="btn-securite"
|
||||
class="block bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3 hover:bg-slate-900 hover:border-emerald-500/50 transition-all"
|
||||
>
|
||||
<h3 class="text-sm font-bold text-white">Sécurité du Compte</h3>
|
||||
|
||||
<p class="text-xs text-slate-400">
|
||||
Gérer les utilisateurs et les mots de passe.
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- =========================================================
|
||||
FOOTER
|
||||
========================================================= -->
|
||||
|
||||
<footer
|
||||
class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
|
||||
>
|
||||
Copyright Jean-Francois GIRAUD 2026
|
||||
</footer>
|
||||
|
||||
<!-- =========================================================
|
||||
JAVASCRIPT
|
||||
========================================================= -->
|
||||
|
||||
<script>
|
||||
"use strict";
|
||||
|
||||
const API_LOGIN = "../php/api_login.php";
|
||||
|
||||
const formLogin = document.getElementById("form-login");
|
||||
|
||||
const loginBox = document.getElementById("login-box");
|
||||
|
||||
const adminDashboard = document.getElementById("admin-dashboard");
|
||||
|
||||
const loginError = document.getElementById("login-error");
|
||||
|
||||
const btnLogin = document.getElementById("btn-login");
|
||||
|
||||
const btnLogout = document.getElementById("btn-logout");
|
||||
|
||||
const username = document.getElementById("username");
|
||||
|
||||
const password = document.getElementById("password");
|
||||
|
||||
const welcomeUser = document.getElementById("welcome-user");
|
||||
|
||||
/*
|
||||
* =========================================================
|
||||
* AFFICHER DASHBOARD
|
||||
* =========================================================
|
||||
*/
|
||||
|
||||
function afficherDashboard(nom) {
|
||||
loginBox.classList.add("hidden");
|
||||
|
||||
adminDashboard.classList.remove("hidden");
|
||||
|
||||
if (nom) {
|
||||
welcomeUser.textContent =
|
||||
"Bienvenue " + nom + " dans l'espace sécurisé Giraud Finance.";
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* =========================================================
|
||||
* AFFICHER LOGIN
|
||||
* =========================================================
|
||||
*/
|
||||
|
||||
function afficherLogin() {
|
||||
adminDashboard.classList.add("hidden");
|
||||
|
||||
loginBox.classList.remove("hidden");
|
||||
|
||||
formLogin.reset();
|
||||
|
||||
username.focus();
|
||||
}
|
||||
|
||||
/*
|
||||
* =========================================================
|
||||
* VERIFICATION SESSION
|
||||
* =========================================================
|
||||
*/
|
||||
|
||||
async function verifierSession() {
|
||||
try {
|
||||
const response = await fetch(API_LOGIN, {
|
||||
method: "POST",
|
||||
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
|
||||
credentials: "same-origin",
|
||||
|
||||
body: JSON.stringify({
|
||||
action: "check",
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === "success" && data.authenticated === true) {
|
||||
afficherDashboard(data.nom || "");
|
||||
} else {
|
||||
afficherLogin();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur vérification session :", error);
|
||||
|
||||
afficherLogin();
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* =========================================================
|
||||
* CONNEXION
|
||||
* =========================================================
|
||||
*/
|
||||
|
||||
formLogin.addEventListener("submit", async function (event) {
|
||||
event.preventDefault();
|
||||
|
||||
loginError.classList.add("hidden");
|
||||
|
||||
btnLogin.disabled = true;
|
||||
|
||||
btnLogin.textContent = "Connexion...";
|
||||
|
||||
const nom = username.value.trim();
|
||||
|
||||
const pass = password.value;
|
||||
|
||||
try {
|
||||
const response = await fetch(API_LOGIN, {
|
||||
method: "POST",
|
||||
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
|
||||
credentials: "same-origin",
|
||||
|
||||
body: JSON.stringify({
|
||||
action: "login",
|
||||
nom: nom,
|
||||
pass: pass,
|
||||
}),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === "success") {
|
||||
password.value = "";
|
||||
|
||||
afficherDashboard(data.nom || nom);
|
||||
} else {
|
||||
loginError.textContent =
|
||||
data.message || "Identifiant ou mot de passe incorrect.";
|
||||
|
||||
loginError.classList.remove("hidden");
|
||||
|
||||
password.value = "";
|
||||
|
||||
password.focus();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
|
||||
loginError.textContent = "Erreur de connexion au serveur.";
|
||||
|
||||
loginError.classList.remove("hidden");
|
||||
} finally {
|
||||
btnLogin.disabled = false;
|
||||
|
||||
btnLogin.textContent = "Se connecter";
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* =========================================================
|
||||
* DECONNEXION
|
||||
* =========================================================
|
||||
*/
|
||||
|
||||
btnLogout.addEventListener("click", async function () {
|
||||
try {
|
||||
await fetch(API_LOGIN, {
|
||||
method: "POST",
|
||||
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
|
||||
credentials: "same-origin",
|
||||
|
||||
body: JSON.stringify({
|
||||
action: "logout",
|
||||
}),
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
|
||||
afficherLogin();
|
||||
});
|
||||
|
||||
/*
|
||||
* =========================================================
|
||||
* INITIALISATION
|
||||
* =========================================================
|
||||
*/
|
||||
|
||||
verifierSession();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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