jfgiraud/GF
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Front + gestion des utilisateurs + affichage indice, tri et creation action

Browse Source
This commit is contained in:
jfgiraud
2026-08-20 17:28:26 +00:00
parent 566ddf06b1
commit 71cf430d39
7 changed files with 2695 additions and 609 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/admin.html
+168 -73
View File
@@ -19,48 +19,58 @@
<link rel="stylesheet" href="../css/style.css" />
</head>
<body
class="bg-slate-900 text-slate-100 min-h-screen flex flex-col justify-between"
>
<body class="bg-slate-900 text-slate-100 min-h-screen flex flex-col">
<!-- =========================================================
HEADER
========================================================= -->
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"
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 items-center">
<img
src="../images/GFBlanc.png"
alt="Logo Giraud Finance"
class="h-12 w-auto object-contain"
/>
</div>
<div class="flex flex-col md:flex-row justify-between items-center gap-5">
<!-- Logo -->
<div>
<h1 class="text-xl font-bold text-white tracking-tight">
Espace d'Administration
</h1>
</div>
<div class="flex items-center">
<img
src="../images/GFBlanc.png"
alt="Logo Giraud Finance"
class="h-12 w-auto object-contain"
/>
</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>
<!-- 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
========================================================= -->
CONTENU PRINCIPAL
========================================================= -->
<main class="flex-grow flex items-center justify-center p-6">
<!-- =====================================================
LOGIN
===================================================== -->
LOGIN
===================================================== -->
<div
id="login-box"
@@ -90,7 +100,7 @@
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"
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>
@@ -110,7 +120,7 @@
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"
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>
@@ -141,76 +151,160 @@
</div>
<!-- =====================================================
DASHBOARD ADMINISTRATEUR
===================================================== -->
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"
class="w-full max-w-6xl bg-slate-800 border border-slate-700 rounded-2xl shadow-2xl p-8 space-y-6 hidden"
>
<!-- Entête dashboard -->
<!-- En-tête dashboard -->
<div
class="flex justify-between items-center border-b border-slate-700 pb-4"
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">
<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"
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>
<!-- =================================================
BLOCS ADMINISTRATION
DEUX BOX COTE A COTE
================================================= -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Gestion indices -->
<!-- =================================================
BOX INDICES & ACTIONS
================================================= -->
<div
class="bg-slate-900/60 p-5 rounded-xl border border-slate-700/60 space-y-3"
class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
>
<h3 class="text-sm font-bold text-white">
Gestion des Indices & Actions
</h3>
<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>
<p class="text-xs text-slate-400">
Paramétrez l'affichage des actions et le statut des indices.
</p>
<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>
<!-- =================================================
SECURITE DU COMPTE
================================================= -->
BOX SECURITE
================================================= -->
<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"
<div
class="bg-slate-900/60 p-6 rounded-2xl border border-slate-700/60 shadow-lg flex flex-col justify-between"
>
<h3 class="text-sm font-bold text-white">Sécurité du Compte</h3>
<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>
<p class="text-xs text-slate-400">
Gérer les utilisateurs et les mots de passe.
</p>
</a>
<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
========================================================= -->
<footer
class="h-12 bg-slate-950 flex items-center justify-center text-xs text-slate-400 tracking-wide border-t border-slate-900"
@@ -219,8 +313,8 @@
</footer>
<!-- =========================================================
JAVASCRIPT
========================================================= -->
JAVASCRIPT AUTHENTIFICATION
========================================================= -->
<script>
"use strict";
@@ -228,21 +322,13 @@
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");
/*
@@ -295,11 +381,18 @@
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) {
@@ -367,7 +460,7 @@
password.focus();
}
} catch (error) {
console.error(error);
console.error("Erreur connexion :", error);
loginError.textContent = "Erreur de connexion au serveur.";
@@ -401,7 +494,7 @@
}),
});
} catch (error) {
console.error(error);
console.error("Erreur déconnexion :", error);
}
afficherLogin();
@@ -413,7 +506,9 @@
* =========================================================
*/
verifierSession();
document.addEventListener("DOMContentLoaded", function () {
verifierSession();
});
</script>
</body>
</html>