515 lines
16 KiB
HTML
515 lines
16 KiB
HTML
<!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">
|
|
<!-- =========================================================
|
|
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"
|
|
>
|
|
<div class="flex flex-col md:flex-row justify-between items-center gap-5">
|
|
<!-- Logo -->
|
|
|
|
<div class="flex items-center">
|
|
<img
|
|
src="../images/GFBlanc.png"
|
|
alt="Logo Giraud Finance"
|
|
class="h-12 w-auto object-contain"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Titre -->
|
|
|
|
<div class="text-center">
|
|
<h1 class="text-xl font-bold text-white tracking-tight">
|
|
Espace d'Administration
|
|
</h1>
|
|
|
|
<p class="text-xs text-slate-400 mt-1">
|
|
Panneau de contrôle Giraud Finance
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Retour au site -->
|
|
|
|
<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"
|
|
>
|
|
<span>← Retour au site</span>
|
|
</a>
|
|
</div>
|
|
</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 placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-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 placeholder-slate-500 focus:outline-none focus:border-emerald-500 focus:ring-1 focus:ring-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-6xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
|
|
>
|
|
<!-- En-tête dashboard -->
|
|
|
|
<div
|
|
class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 border-b border-slate-700 pb-5"
|
|
>
|
|
<div>
|
|
<h2 class="text-lg font-bold text-white">Panneau de contrôle</h2>
|
|
|
|
<p id="welcome-user" class="text-xs text-slate-400 mt-1">
|
|
Bienvenue dans l'espace sécurisé Giraud Finance.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Déconnexion -->
|
|
|
|
<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 border border-rose-500/50"
|
|
>
|
|
Déconnexion
|
|
</button>
|
|
</div>
|
|
|
|
<!-- =================================================
|
|
DEUX BOX COTE A COTE
|
|
================================================= -->
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<!-- =================================================
|
|
BOX INDICES & ACTIONS
|
|
================================================= -->
|
|
|
|
<div
|
|
class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div
|
|
class="w-12 h-12 flex items-center justify-center rounded-xl bg-emerald-600/20 border border-emerald-500/30 mb-4"
|
|
>
|
|
<span class="text-2xl">📈</span>
|
|
</div>
|
|
|
|
<h3 class="text-base font-bold text-white">
|
|
Gestion des Indices & Actions
|
|
</h3>
|
|
|
|
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
|
|
Gérez les indices et les actions disponibles sur le site. Vous
|
|
pouvez notamment contrôler leur statut et leur affichage.
|
|
</p>
|
|
|
|
<div class="mt-4 space-y-2">
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
|
Gestion des indices
|
|
</div>
|
|
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
|
Gestion des actions
|
|
</div>
|
|
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
|
Activation / désactivation
|
|
</div>
|
|
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-emerald-500 mr-2"></span>
|
|
Affichage sur le site
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bouton -->
|
|
|
|
<a
|
|
href="./tableindice.html"
|
|
class="mt-6 w-full inline-flex justify-center items-center bg-emerald-600 hover:bg-emerald-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-emerald-500"
|
|
>
|
|
Gérer les indices & actions
|
|
<span class="ml-2">→</span>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- =================================================
|
|
BOX SECURITE
|
|
================================================= -->
|
|
|
|
<div
|
|
class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
|
|
>
|
|
<div>
|
|
<div
|
|
class="w-12 h-12 flex items-center justify-center rounded-xl bg-orange-600/20 border border-orange-500/30 mb-4"
|
|
>
|
|
<span class="text-2xl">🔐</span>
|
|
</div>
|
|
|
|
<h3 class="text-base font-bold text-white">Sécurité du Compte</h3>
|
|
|
|
<p class="text-xs text-slate-400 mt-2 leading-relaxed">
|
|
Gérez les utilisateurs autorisés à accéder à l'administration de
|
|
Giraud Finance.
|
|
</p>
|
|
|
|
<div class="mt-4 space-y-2">
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
|
Gestion des utilisateurs
|
|
</div>
|
|
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
|
Création d'utilisateurs
|
|
</div>
|
|
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
|
Activation / désactivation
|
|
</div>
|
|
|
|
<div class="flex items-center text-xs text-slate-400">
|
|
<span class="w-2 h-2 rounded-full bg-orange-500 mr-2"></span>
|
|
Modification des mots de passe
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bouton -->
|
|
|
|
<a
|
|
href="./securite.html"
|
|
class="mt-6 w-full inline-flex justify-center items-center bg-orange-600 hover:bg-orange-500 text-white font-semibold text-sm px-5 py-3 rounded-xl transition-all shadow-lg border border-orange-500"
|
|
>
|
|
Gérer la sécurité
|
|
<span class="ml-2">→</span>
|
|
</a>
|
|
</div>
|
|
</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 AUTHENTIFICATION
|
|
========================================================= -->
|
|
|
|
<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",
|
|
|
|
cache: "no-store",
|
|
|
|
body: JSON.stringify({
|
|
action: "check",
|
|
}),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
afficherLogin();
|
|
return;
|
|
}
|
|
|
|
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("Erreur connexion :", 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("Erreur déconnexion :", error);
|
|
}
|
|
|
|
afficherLogin();
|
|
});
|
|
|
|
/*
|
|
* =========================================================
|
|
* INITIALISATION
|
|
* =========================================================
|
|
*/
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
verifierSession();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|