420 lines
12 KiB
HTML
420 lines
12 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 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>
|