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>
|
||||||
+392
-42
@@ -1,16 +1,29 @@
|
|||||||
|
// =========================================================
|
||||||
// Tableaux globaux
|
// Tableaux globaux
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
let configIndices = []; // Données issues de la table "indice"
|
let configIndices = []; // Données issues de la table "indice"
|
||||||
let coursActionsData = []; // Données issues de la table "cours_actions"
|
let coursActionsData = []; // Données issues de la table "cours_actions"
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// CHARGEMENT DES DONNÉES
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function chargerDonnees() {
|
function chargerDonnees() {
|
||||||
// Chargement en parallèle des deux API
|
// Chargement en parallèle des deux API
|
||||||
Promise.all([
|
Promise.all([
|
||||||
fetch("./php/api_lecture_tableindice.php").then((res) => res.json()),
|
fetch("./php/api_lecture_tableindice.php").then((res) => res.json()),
|
||||||
fetch("./php/api_indices.php").then((res) => res.json()),
|
fetch("./php/api_indices.php").then((res) => res.json()),
|
||||||
])
|
])
|
||||||
|
|
||||||
.then(([configResult, coursResult]) => {
|
.then(([configResult, coursResult]) => {
|
||||||
|
// -----------------------------------------------------
|
||||||
|
// Configuration des indices
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
if (configResult.status === "success") {
|
if (configResult.status === "success") {
|
||||||
configIndices = configResult.data;
|
configIndices = configResult.data;
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
"Configuration indices chargée :",
|
"Configuration indices chargée :",
|
||||||
configIndices.length,
|
configIndices.length,
|
||||||
@@ -20,8 +33,13 @@ function chargerDonnees() {
|
|||||||
console.error("Erreur API config indices :", configResult.message);
|
console.error("Erreur API config indices :", configResult.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------
|
||||||
|
// Cours des actions
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
if (coursResult.status === "success") {
|
if (coursResult.status === "success") {
|
||||||
coursActionsData = coursResult.data;
|
coursActionsData = coursResult.data;
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
"Cours actions chargés :",
|
"Cours actions chargés :",
|
||||||
coursActionsData.length,
|
coursActionsData.length,
|
||||||
@@ -31,184 +49,516 @@ function chargerDonnees() {
|
|||||||
console.error("Erreur API cours_actions :", coursResult.message);
|
console.error("Erreur API cours_actions :", coursResult.message);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// -----------------------------------------------------
|
||||||
// Mise à jour des vues
|
// Mise à jour des vues
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
afficherSyntheseCartes();
|
afficherSyntheseCartes();
|
||||||
|
|
||||||
alimenterBandeauxTicker();
|
alimenterBandeauxTicker();
|
||||||
|
|
||||||
|
// -----------------------------------------------------
|
||||||
// Statut de rafraîchissement
|
// Statut de rafraîchissement
|
||||||
|
// -----------------------------------------------------
|
||||||
|
|
||||||
const statut = document.getElementById("statut");
|
const statut = document.getElementById("statut");
|
||||||
|
|
||||||
if (statut) {
|
if (statut) {
|
||||||
statut.innerText = `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
|
statut.innerText = `Dernière mise à jour : ${new Date().toLocaleTimeString()}`;
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.catch((error) =>
|
|
||||||
console.error("Erreur réseau lors du chargement des API :", error),
|
.catch((error) => {
|
||||||
);
|
console.error("Erreur réseau lors du chargement des API :", error);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// AFFICHAGE DES CARTES
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function afficherSyntheseCartes() {
|
function afficherSyntheseCartes() {
|
||||||
const container = document.getElementById("cards-container");
|
const container = document.getElementById("cards-container");
|
||||||
|
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
container.innerHTML = "";
|
container.innerHTML = "";
|
||||||
|
|
||||||
// CARTES : On se base STRICTEMENT sur le champ afficher == 1
|
// -------------------------------------------------------
|
||||||
|
// On se base STRICTEMENT sur afficher == 1
|
||||||
|
// -------------------------------------------------------
|
||||||
|
|
||||||
const actionsAffichees = configIndices.filter(
|
const actionsAffichees = configIndices.filter(
|
||||||
(item) => String(item.afficher) === "1" || item.afficher == 1,
|
(item) => String(item.afficher) === "1" || item.afficher == 1,
|
||||||
);
|
);
|
||||||
|
|
||||||
if (actionsAffichees.length > 0) {
|
if (actionsAffichees.length > 0) {
|
||||||
actionsAffichees.forEach((conf) => {
|
actionsAffichees.forEach((conf) => {
|
||||||
|
// ---------------------------------------------------
|
||||||
// Croisement avec les cours en direct
|
// Croisement avec les cours en direct
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
const d =
|
const d =
|
||||||
coursActionsData.find(
|
coursActionsData.find(
|
||||||
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
||||||
) || {};
|
) || {};
|
||||||
|
|
||||||
const ecartValeur = parseFloat(d.variation || 0);
|
const ecartValeur = parseFloat(d.variation || 0);
|
||||||
|
|
||||||
const isPositive = ecartValeur >= 0;
|
const isPositive = ecartValeur >= 0;
|
||||||
|
|
||||||
const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
|
const badgeColor = isPositive ? "text-emerald-400" : "text-rose-400";
|
||||||
|
|
||||||
const sign = isPositive ? "+" : "";
|
const sign = isPositive ? "+" : "";
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
|
// Volume
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
const volumeFormate = d.volume
|
const volumeFormate = d.volume
|
||||||
? parseInt(d.volume).toLocaleString("fr-FR")
|
? parseInt(d.volume).toLocaleString("fr-FR")
|
||||||
: "--";
|
: "--";
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
|
// Carte
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
container.innerHTML += `
|
container.innerHTML += `
|
||||||
<div class="bg-slate-800 p-4 rounded-2xl shadow-xl border border-slate-700 flex flex-col justify-between hover:border-slate-500 transition-all">
|
|
||||||
<!-- En-tête : Nom / Ticker / ISIN / Indice à gauche ET Cours / Variation / Date à droite -->
|
<div
|
||||||
<div class="flex justify-between items-start mb-2">
|
class="bg-slate-800 p-4 rounded-2xl shadow-xl
|
||||||
|
border border-slate-700 flex flex-col
|
||||||
|
justify-between hover:border-slate-500
|
||||||
|
transition-all"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- En-tête -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="flex justify-between
|
||||||
|
items-start mb-2"
|
||||||
|
>
|
||||||
|
|
||||||
<div class="max-w-[150px]">
|
<div class="max-w-[150px]">
|
||||||
<h3 class="text-xs font-bold text-white leading-tight truncate" title="${conf.nom || conf.indice}">
|
|
||||||
${conf.nom || conf.indice} <span class="text-[11px] font-normal text-slate-400">(${conf.symbole || "N/A"})</span>
|
<h3
|
||||||
|
class="text-xs font-bold text-white
|
||||||
|
leading-tight truncate"
|
||||||
|
title="${conf.nom || conf.indice}"
|
||||||
|
>
|
||||||
|
|
||||||
|
${conf.nom || conf.indice}
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-[11px]
|
||||||
|
font-normal text-slate-400"
|
||||||
|
>
|
||||||
|
(${conf.symbole || "N/A"})
|
||||||
|
</span>
|
||||||
|
|
||||||
</h3>
|
</h3>
|
||||||
<span class="text-[10px] text-slate-500 font-mono italic block mt-0.5">${conf.isin || "Aucun ISIN"}</span>
|
|
||||||
<span class="text-[10px] font-semibold text-slate-400 uppercase tracking-wide block mt-0.5">${conf.indice || ""}</span>
|
|
||||||
|
<span
|
||||||
|
class="text-[10px]
|
||||||
|
text-slate-500
|
||||||
|
font-mono italic
|
||||||
|
block mt-0.5"
|
||||||
|
>
|
||||||
|
${conf.isin || "Aucun ISIN"}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-[10px]
|
||||||
|
font-semibold
|
||||||
|
text-slate-400
|
||||||
|
uppercase
|
||||||
|
tracking-wide
|
||||||
|
block mt-0.5"
|
||||||
|
>
|
||||||
|
${conf.indice || ""}
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Cours -->
|
||||||
|
|
||||||
<div class="text-right">
|
<div class="text-right">
|
||||||
<div class="text-base font-extrabold text-white leading-tight">
|
|
||||||
${d.cours ? parseFloat(d.cours).toLocaleString("fr-FR", { minimumFractionDigits: 2 }) : "--"}
|
<div
|
||||||
</div>
|
class="text-base
|
||||||
<div class="text-xs font-bold ${badgeColor} leading-tight mt-0.5">
|
font-extrabold
|
||||||
${sign}${ecartValeur.toLocaleString("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 4 })}
|
text-white
|
||||||
<span class="font-semibold">(${sign}${parseFloat(d.variation_pct || 0).toFixed(2)}%)</span>
|
leading-tight"
|
||||||
</div>
|
>
|
||||||
<div class="text-[8px] text-slate-500 font-mono mt-0.5">
|
|
||||||
${d.date_cours || "--/--"}
|
${
|
||||||
</div>
|
d.cours
|
||||||
</div>
|
? parseFloat(d.cours).toLocaleString("fr-FR", {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
})
|
||||||
|
: "--"
|
||||||
|
}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Bloc Infos : Haut / Bas / Volume -->
|
|
||||||
<div class="grid grid-cols-3 gap-1.5 bg-slate-900/50 p-1.5 rounded-xl border border-slate-700/50 text-center">
|
<!-- Variation -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-xs
|
||||||
|
font-bold
|
||||||
|
${badgeColor}
|
||||||
|
leading-tight
|
||||||
|
mt-0.5"
|
||||||
|
>
|
||||||
|
|
||||||
|
${sign}
|
||||||
|
|
||||||
|
${ecartValeur.toLocaleString("fr-FR", {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
maximumFractionDigits: 4,
|
||||||
|
})}
|
||||||
|
|
||||||
|
<span class="font-semibold">
|
||||||
|
|
||||||
|
(
|
||||||
|
${sign}${parseFloat(d.variation_pct || 0).toFixed(2)}%
|
||||||
|
)
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Date -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-[8px]
|
||||||
|
text-slate-500
|
||||||
|
font-mono
|
||||||
|
mt-0.5"
|
||||||
|
>
|
||||||
|
|
||||||
|
${d.date_cours || "--/--"}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Haut / Bas / Volume -->
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-3 gap-1.5
|
||||||
|
bg-slate-900/50
|
||||||
|
p-1.5 rounded-xl
|
||||||
|
border border-slate-700/50
|
||||||
|
text-center"
|
||||||
|
>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span class="text-[8px] text-slate-400 block uppercase">Haut</span>
|
|
||||||
<span class="text-[10px] font-semibold text-slate-200">${d.plus_haut ? parseFloat(d.plus_haut).toLocaleString("fr-FR", { minimumFractionDigits: 2 }) : "--"}</span>
|
<span
|
||||||
|
class="text-[8px]
|
||||||
|
text-slate-400
|
||||||
|
block uppercase"
|
||||||
|
>
|
||||||
|
Haut
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-[10px]
|
||||||
|
font-semibold
|
||||||
|
text-slate-200"
|
||||||
|
>
|
||||||
|
|
||||||
|
${
|
||||||
|
d.plus_haut
|
||||||
|
? parseFloat(d.plus_haut).toLocaleString("fr-FR", {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
})
|
||||||
|
: "--"
|
||||||
|
}
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span class="text-[8px] text-slate-400 block uppercase">Bas</span>
|
|
||||||
<span class="text-[10px] font-semibold text-slate-200">${d.plus_bas ? parseFloat(d.plus_bas).toLocaleString("fr-FR", { minimumFractionDigits: 2 }) : "--"}</span>
|
<span
|
||||||
|
class="text-[8px]
|
||||||
|
text-slate-400
|
||||||
|
block uppercase"
|
||||||
|
>
|
||||||
|
Bas
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-[10px]
|
||||||
|
font-semibold
|
||||||
|
text-slate-200"
|
||||||
|
>
|
||||||
|
|
||||||
|
${
|
||||||
|
d.plus_bas
|
||||||
|
? parseFloat(d.plus_bas).toLocaleString("fr-FR", {
|
||||||
|
minimumFractionDigits: 2,
|
||||||
|
})
|
||||||
|
: "--"
|
||||||
|
}
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<span class="text-[8px] text-slate-400 block uppercase">Volume</span>
|
|
||||||
<span class="text-[10px] font-semibold text-slate-200">${volumeFormate}</span>
|
<span
|
||||||
|
class="text-[8px]
|
||||||
|
text-slate-400
|
||||||
|
block uppercase"
|
||||||
|
>
|
||||||
|
Volume
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-[10px]
|
||||||
|
font-semibold
|
||||||
|
text-slate-200"
|
||||||
|
>
|
||||||
|
${volumeFormate}
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
container.innerHTML = `
|
container.innerHTML = `
|
||||||
<div class="col-span-3 text-center py-10 bg-slate-800/30 rounded-2xl border border-slate-800">
|
|
||||||
<span class="text-slate-400 text-sm">Aucune action configurée à 'afficher = 1'.</span>
|
<div
|
||||||
|
class="col-span-3
|
||||||
|
text-center
|
||||||
|
py-10
|
||||||
|
bg-slate-800/30
|
||||||
|
rounded-2xl
|
||||||
|
border border-slate-800"
|
||||||
|
>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-slate-400
|
||||||
|
text-sm"
|
||||||
|
>
|
||||||
|
Aucune action configurée à 'afficher = 1'.
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// PRÉPARATION DES BANDEAUX
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function alimenterBandeauxTicker() {
|
function alimenterBandeauxTicker() {
|
||||||
const preparerDonneesTicker = (nomIndiceRecherche) => {
|
const preparerDonneesTicker = (nomIndiceRecherche) => {
|
||||||
const cleanSearch = nomIndiceRecherche
|
const cleanSearch = nomIndiceRecherche
|
||||||
.replace(/[^a-z0-9]/gi, "")
|
.replace(/[^a-z0-9]/gi, "")
|
||||||
.toLowerCase();
|
.toLowerCase();
|
||||||
|
|
||||||
// BANDEAUX : On prend l'intégralité des actions disponibles pour l'indice (via coursActionsData ou configIndices)
|
// ---------------------------------------------------
|
||||||
|
// Recherche dans coursActionsData
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
let liste = coursActionsData.filter((item) => {
|
let liste = coursActionsData.filter((item) => {
|
||||||
if (!item.indice) return false;
|
if (!item.indice) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
const cleanItemIndice = item.indice
|
const cleanItemIndice = item.indice
|
||||||
.replace(/[^a-z0-9]/gi, "")
|
.replace(/[^a-z0-9]/gi, "")
|
||||||
.toLowerCase();
|
.toLowerCase();
|
||||||
|
|
||||||
return cleanItemIndice === cleanSearch;
|
return cleanItemIndice === cleanSearch;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
|
// Si aucune donnée, utiliser configIndices
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
if (liste.length === 0) {
|
if (liste.length === 0) {
|
||||||
liste = configIndices.filter((item) => {
|
liste = configIndices.filter((item) => {
|
||||||
if (!item.indice) return false;
|
if (!item.indice) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
const cleanItemIndice = item.indice
|
const cleanItemIndice = item.indice
|
||||||
.replace(/[^a-z0-9]/gi, "")
|
.replace(/[^a-z0-9]/gi, "")
|
||||||
.toLowerCase();
|
.toLowerCase();
|
||||||
|
|
||||||
return cleanItemIndice === cleanSearch;
|
return cleanItemIndice === cleanSearch;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
// Fusion et formatage
|
// Fusion et formatage
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
let listeFinale = liste.map((conf) => {
|
let listeFinale = liste.map((conf) => {
|
||||||
let coursMatch =
|
const coursMatch =
|
||||||
coursActionsData.find(
|
coursActionsData.find(
|
||||||
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
(item) => item.symbole === conf.symbole || item.isin === conf.isin,
|
||||||
) || conf;
|
) || conf;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
nom: conf.nom || coursMatch.nom || conf.symbole,
|
nom: conf.nom || coursMatch.nom || conf.symbole,
|
||||||
|
|
||||||
cours: coursMatch.cours || 0,
|
cours: coursMatch.cours || 0,
|
||||||
|
|
||||||
variation_pct: coursMatch.variation_pct || 0,
|
variation_pct: coursMatch.variation_pct || 0,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// ---------------------------------------------------
|
||||||
// Tri alphabétique
|
// Tri alphabétique
|
||||||
|
// ---------------------------------------------------
|
||||||
|
|
||||||
listeFinale.sort((a, b) => a.nom.localeCompare(b.nom));
|
listeFinale.sort((a, b) => a.nom.localeCompare(b.nom));
|
||||||
|
|
||||||
return listeFinale;
|
return listeFinale;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// -------------------------------------------------------
|
||||||
|
// Remplissage des trois bandeaux
|
||||||
|
// -------------------------------------------------------
|
||||||
|
|
||||||
remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
|
remplirUnBandeau("ticker-cac40", preparerDonneesTicker("CAC40"));
|
||||||
|
|
||||||
remplirUnBandeau("ticker-ibex35", preparerDonneesTicker("IBEX35"));
|
remplirUnBandeau("ticker-ibex35", preparerDonneesTicker("IBEX35"));
|
||||||
|
|
||||||
remplirUnBandeau("ticker-dowjones", preparerDonneesTicker("DOWJONES"));
|
remplirUnBandeau("ticker-dowjones", preparerDonneesTicker("DOWJONES"));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// REMPLIR UN BANDEAU
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
function remplirUnBandeau(elementId, donneesTriees) {
|
function remplirUnBandeau(elementId, donneesTriees) {
|
||||||
const container = document.getElementById(elementId);
|
const container = document.getElementById(elementId);
|
||||||
|
|
||||||
if (!container) return;
|
if (!container) return;
|
||||||
|
|
||||||
if (donneesTriees.length === 0) {
|
if (donneesTriees.length === 0) {
|
||||||
container.innerHTML = `<span class="px-4 text-slate-500 text-xs">Aucune donnée disponible</span>`;
|
container.innerHTML = `<span class="px-4 text-slate-500 text-xs">
|
||||||
|
Aucune donnée disponible
|
||||||
|
</span>`;
|
||||||
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
let blocs = "";
|
let blocs = "";
|
||||||
|
|
||||||
donneesTriees.forEach((item) => {
|
donneesTriees.forEach((item) => {
|
||||||
const isPositive = parseFloat(item.variation_pct || 0) >= 0;
|
const isPositive = parseFloat(item.variation_pct || 0) >= 0;
|
||||||
|
|
||||||
const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
|
const colorClass = isPositive ? "text-emerald-400" : "text-rose-400";
|
||||||
|
|
||||||
const sign = isPositive ? "+" : "";
|
const sign = isPositive ? "+" : "";
|
||||||
|
|
||||||
const coursFormate = parseFloat(item.cours || 0).toLocaleString("fr-FR", {
|
const coursFormate = parseFloat(item.cours || 0).toLocaleString("fr-FR", {
|
||||||
minimumFractionDigits: 2,
|
minimumFractionDigits: 2,
|
||||||
});
|
});
|
||||||
|
|
||||||
const variationFormatee = parseFloat(item.variation_pct || 0).toFixed(2);
|
const variationFormatee = parseFloat(item.variation_pct || 0).toFixed(2);
|
||||||
|
|
||||||
blocs += `
|
blocs += `
|
||||||
<div class="inline-flex items-center px-6 space-x-3 border-r border-slate-800/80 whitespace-nowrap">
|
|
||||||
<span class="font-bold text-white">${item.nom}</span>
|
<div
|
||||||
<span class="text-slate-300">${coursFormate}</span>
|
class="inline-flex
|
||||||
<span class="${colorClass} font-semibold">${sign}${variationFormatee}%</span>
|
items-center
|
||||||
|
px-6
|
||||||
|
space-x-3
|
||||||
|
border-r
|
||||||
|
border-slate-800/80
|
||||||
|
whitespace-nowrap"
|
||||||
|
>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="font-bold text-white"
|
||||||
|
>
|
||||||
|
${item.nom}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="text-slate-300"
|
||||||
|
>
|
||||||
|
${coursFormate}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="${colorClass}
|
||||||
|
font-semibold"
|
||||||
|
>
|
||||||
|
${sign}${variationFormatee}%
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
`;
|
`;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Triple répétition pour assurer
|
||||||
|
// le défilement continu
|
||||||
|
|
||||||
container.innerHTML = blocs + blocs + blocs;
|
container.innerHTML = blocs + blocs + blocs;
|
||||||
|
|
||||||
const dureeTotale = Math.max(20, donneesTriees.length * 4);
|
const dureeTotale = Math.max(20, donneesTriees.length * 4);
|
||||||
|
|
||||||
container.style.animationDuration = `${dureeTotale}s`;
|
container.style.animationDuration = `${dureeTotale}s`;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Démarrage
|
// =========================================================
|
||||||
|
// DÉMARRAGE
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
|
// Chargement initial
|
||||||
chargerDonnees();
|
chargerDonnees();
|
||||||
|
|
||||||
|
// Rafraîchissement toutes les 60 secondes
|
||||||
setInterval(chargerDonnees, 60000);
|
setInterval(chargerDonnees, 60000);
|
||||||
|
|
||||||
|
// =========================================================
|
||||||
|
// RACCOURCIS CLAVIER
|
||||||
|
// =========================================================
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
// F1 → Administration
|
||||||
|
|
||||||
|
if (event.key === "F1") {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
window.location.href = "https://www.giraud-finance.com/html/admin.html";
|
||||||
|
}
|
||||||
|
|
||||||
|
// F2 → Site principal
|
||||||
|
|
||||||
|
if (event.key === "F2") {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
window.location.href = "https://giraud-finance.com";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
+916
@@ -0,0 +1,916 @@
|
|||||||
|
"use strict";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CONFIGURATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
const API_LOGIN = "../php/api_login.php";
|
||||||
|
const API = "../php/securite/";
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* ELEMENTS HTML
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
const listeUtilisateurs = document.getElementById("listeUtilisateurs");
|
||||||
|
|
||||||
|
const message = document.getElementById("message");
|
||||||
|
|
||||||
|
const btnNouvelUtilisateur = document.getElementById("btnNouvelUtilisateur");
|
||||||
|
|
||||||
|
/* Modal création */
|
||||||
|
|
||||||
|
const modalCreation = document.getElementById("modalCreation");
|
||||||
|
|
||||||
|
const formCreation = document.getElementById("formCreation");
|
||||||
|
|
||||||
|
const btnAnnulerCreation = document.getElementById("btnAnnulerCreation");
|
||||||
|
|
||||||
|
const creationNom = document.getElementById("creationNom");
|
||||||
|
|
||||||
|
const creationPass = document.getElementById("creationPass");
|
||||||
|
|
||||||
|
const creationPass2 = document.getElementById("creationPass2");
|
||||||
|
|
||||||
|
/* Modal mot de passe */
|
||||||
|
|
||||||
|
const modalPassword = document.getElementById("modalPassword");
|
||||||
|
|
||||||
|
const formPassword = document.getElementById("formPassword");
|
||||||
|
|
||||||
|
const btnAnnulerPassword = document.getElementById("btnAnnulerPassword");
|
||||||
|
|
||||||
|
const passwordId = document.getElementById("passwordId");
|
||||||
|
|
||||||
|
const passwordUtilisateur = document.getElementById("passwordUtilisateur");
|
||||||
|
|
||||||
|
const nouveauPass = document.getElementById("nouveauPass");
|
||||||
|
|
||||||
|
const nouveauPass2 = document.getElementById("nouveauPass2");
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* MESSAGE
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function afficherMessage(texte, type = "success") {
|
||||||
|
if (!message) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
message.textContent = texte;
|
||||||
|
|
||||||
|
message.className = "mb-4 px-4 py-3 rounded-lg";
|
||||||
|
|
||||||
|
if (type === "success") {
|
||||||
|
message.classList.add(
|
||||||
|
"bg-emerald-900",
|
||||||
|
"text-emerald-300",
|
||||||
|
"border",
|
||||||
|
"border-emerald-700",
|
||||||
|
);
|
||||||
|
} else if (type === "error") {
|
||||||
|
message.classList.add(
|
||||||
|
"bg-rose-900",
|
||||||
|
"text-rose-300",
|
||||||
|
"border",
|
||||||
|
"border-rose-700",
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
message.classList.add(
|
||||||
|
"bg-yellow-900",
|
||||||
|
"text-yellow-300",
|
||||||
|
"border",
|
||||||
|
"border-yellow-700",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
message.classList.add("hidden");
|
||||||
|
}, 5000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* 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) {
|
||||||
|
window.location.href = "/html/admin.html";
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
console.log("Vérification session :", data);
|
||||||
|
|
||||||
|
if (data.status !== "success" || data.authenticated !== true) {
|
||||||
|
window.location.href = "/html/admin.html";
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur vérification session :", error);
|
||||||
|
|
||||||
|
window.location.href = "/html/admin.html";
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* ECHAPPER HTML
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function escapeHtml(value) {
|
||||||
|
if (value === null || value === undefined) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
|
||||||
|
return String(value)
|
||||||
|
.replace(/&/g, "&")
|
||||||
|
|
||||||
|
.replace(/</g, "<")
|
||||||
|
|
||||||
|
.replace(/>/g, ">")
|
||||||
|
|
||||||
|
.replace(/"/g, """)
|
||||||
|
|
||||||
|
.replace(/'/g, "'");
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* FORMAT DATE
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function formaterDate(date) {
|
||||||
|
if (!date || date === "0000-00-00 00:00:00") {
|
||||||
|
return "Jamais";
|
||||||
|
}
|
||||||
|
|
||||||
|
const d = new Date(String(date).replace(" ", "T"));
|
||||||
|
|
||||||
|
if (Number.isNaN(d.getTime())) {
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
return d.toLocaleString("fr-FR", {
|
||||||
|
dateStyle: "short",
|
||||||
|
timeStyle: "short",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CHARGER UTILISATEURS
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
async function chargerUtilisateurs() {
|
||||||
|
if (!listeUtilisateurs) {
|
||||||
|
console.error("ERREUR : #listeUtilisateurs introuvable dans securite.html");
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
listeUtilisateurs.innerHTML = `
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<td
|
||||||
|
colspan="5"
|
||||||
|
class="text-center px-6 py-8 text-slate-400"
|
||||||
|
>
|
||||||
|
|
||||||
|
Chargement...
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
`;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(API + "users.php", {
|
||||||
|
method: "GET",
|
||||||
|
|
||||||
|
credentials: "same-origin",
|
||||||
|
|
||||||
|
cache: "no-store",
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("users.php HTTP :", response.status);
|
||||||
|
|
||||||
|
if (response.status === 401) {
|
||||||
|
window.location.href = "/html/admin.html";
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
console.log("Réponse users.php :", data);
|
||||||
|
|
||||||
|
if (data.success !== true) {
|
||||||
|
throw new Error(
|
||||||
|
data.message || "Impossible de charger les utilisateurs.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const utilisateurs = Array.isArray(data.users) ? data.users : [];
|
||||||
|
|
||||||
|
console.log("Utilisateurs reçus :", utilisateurs.length);
|
||||||
|
|
||||||
|
console.table(utilisateurs);
|
||||||
|
|
||||||
|
afficherUtilisateurs(utilisateurs);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur chargement utilisateurs :", error);
|
||||||
|
|
||||||
|
listeUtilisateurs.innerHTML = `
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<td
|
||||||
|
colspan="5"
|
||||||
|
class="text-center px-6 py-8 text-rose-400"
|
||||||
|
>
|
||||||
|
|
||||||
|
Erreur lors du chargement des utilisateurs.
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
`;
|
||||||
|
|
||||||
|
afficherMessage(error.message || "Erreur lors du chargement.", "error");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* AFFICHER UTILISATEURS
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function afficherUtilisateurs(utilisateurs) {
|
||||||
|
if (!utilisateurs || utilisateurs.length === 0) {
|
||||||
|
listeUtilisateurs.innerHTML = `
|
||||||
|
|
||||||
|
<tr>
|
||||||
|
|
||||||
|
<td
|
||||||
|
colspan="5"
|
||||||
|
class="text-center px-6 py-8 text-slate-400"
|
||||||
|
>
|
||||||
|
|
||||||
|
Aucun utilisateur.
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
`;
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
listeUtilisateurs.innerHTML = utilisateurs
|
||||||
|
.map((utilisateur) => {
|
||||||
|
const id = Number(utilisateur.id);
|
||||||
|
|
||||||
|
const nom = escapeHtml(utilisateur.nom);
|
||||||
|
|
||||||
|
const actif = Number(utilisateur.actif) === 1;
|
||||||
|
|
||||||
|
const created = formaterDate(utilisateur.created_at);
|
||||||
|
|
||||||
|
const dernierLogin = formaterDate(utilisateur.dernier_login);
|
||||||
|
|
||||||
|
return `
|
||||||
|
|
||||||
|
<tr
|
||||||
|
class="hover:bg-slate-700/50 transition"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- UTILISATEUR -->
|
||||||
|
|
||||||
|
<td class="px-6 py-4">
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="font-semibold text-white"
|
||||||
|
>
|
||||||
|
|
||||||
|
${nom}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-xs text-slate-500"
|
||||||
|
>
|
||||||
|
|
||||||
|
ID : ${id}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- CREATION -->
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="px-6 py-4
|
||||||
|
text-sm
|
||||||
|
text-slate-300"
|
||||||
|
>
|
||||||
|
|
||||||
|
${created}
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- DERNIERE CONNEXION -->
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="px-6 py-4
|
||||||
|
text-sm
|
||||||
|
text-slate-300"
|
||||||
|
>
|
||||||
|
|
||||||
|
${dernierLogin}
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- STATUT -->
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="px-6 py-4
|
||||||
|
text-center"
|
||||||
|
>
|
||||||
|
|
||||||
|
${
|
||||||
|
actif
|
||||||
|
? `
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="
|
||||||
|
inline-flex
|
||||||
|
px-3
|
||||||
|
py-1
|
||||||
|
rounded-full
|
||||||
|
text-xs
|
||||||
|
font-semibold
|
||||||
|
bg-emerald-900
|
||||||
|
text-emerald-300
|
||||||
|
"
|
||||||
|
>
|
||||||
|
|
||||||
|
Actif
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
`
|
||||||
|
: `
|
||||||
|
|
||||||
|
<span
|
||||||
|
class="
|
||||||
|
inline-flex
|
||||||
|
px-3
|
||||||
|
py-1
|
||||||
|
rounded-full
|
||||||
|
text-xs
|
||||||
|
font-semibold
|
||||||
|
bg-rose-900
|
||||||
|
text-rose-300
|
||||||
|
"
|
||||||
|
>
|
||||||
|
|
||||||
|
Inactif
|
||||||
|
|
||||||
|
</span>
|
||||||
|
|
||||||
|
`
|
||||||
|
}
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- ACTIONS -->
|
||||||
|
|
||||||
|
<td
|
||||||
|
class="px-6 py-4"
|
||||||
|
>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="
|
||||||
|
flex
|
||||||
|
justify-end
|
||||||
|
gap-2
|
||||||
|
"
|
||||||
|
>
|
||||||
|
|
||||||
|
<button
|
||||||
|
|
||||||
|
type="button"
|
||||||
|
|
||||||
|
class="
|
||||||
|
btn-password
|
||||||
|
bg-orange-600
|
||||||
|
hover:bg-orange-500
|
||||||
|
text-white
|
||||||
|
text-xs
|
||||||
|
font-semibold
|
||||||
|
px-3
|
||||||
|
py-2
|
||||||
|
rounded-lg
|
||||||
|
transition
|
||||||
|
"
|
||||||
|
|
||||||
|
data-id="${id}"
|
||||||
|
|
||||||
|
data-nom="${escapeHtml(utilisateur.nom)}"
|
||||||
|
|
||||||
|
>
|
||||||
|
|
||||||
|
Mot de passe
|
||||||
|
|
||||||
|
</button>
|
||||||
|
|
||||||
|
|
||||||
|
<button
|
||||||
|
|
||||||
|
type="button"
|
||||||
|
|
||||||
|
class="
|
||||||
|
btn-status
|
||||||
|
${
|
||||||
|
actif
|
||||||
|
? "bg-rose-600 hover:bg-rose-500"
|
||||||
|
: "bg-emerald-600 hover:bg-emerald-500"
|
||||||
|
}
|
||||||
|
text-white
|
||||||
|
text-xs
|
||||||
|
font-semibold
|
||||||
|
px-3
|
||||||
|
py-2
|
||||||
|
rounded-lg
|
||||||
|
transition
|
||||||
|
"
|
||||||
|
|
||||||
|
data-id="${id}"
|
||||||
|
|
||||||
|
data-actif="${actif ? 1 : 0}"
|
||||||
|
|
||||||
|
>
|
||||||
|
|
||||||
|
${actif ? "Désactiver" : "Activer"}
|
||||||
|
|
||||||
|
</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
|
||||||
|
`;
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Boutons mot de passe
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.querySelectorAll(".btn-password").forEach((button) => {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
ouvrirModalPassword(button.dataset.id, button.dataset.nom);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Boutons statut
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.querySelectorAll(".btn-status").forEach((button) => {
|
||||||
|
button.addEventListener("click", () => {
|
||||||
|
changerStatut(button.dataset.id, Number(button.dataset.actif));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* MODALE CREATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function ouvrirModalCreation() {
|
||||||
|
if (!modalCreation) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
modalCreation.classList.remove("hidden");
|
||||||
|
|
||||||
|
modalCreation.classList.add("flex");
|
||||||
|
|
||||||
|
setTimeout(() => creationNom?.focus(), 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fermerModalCreation() {
|
||||||
|
if (!modalCreation) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
modalCreation.classList.add("hidden");
|
||||||
|
|
||||||
|
modalCreation.classList.remove("flex");
|
||||||
|
|
||||||
|
formCreation?.reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CREER UTILISATEUR
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
async function creerUtilisateur() {
|
||||||
|
const nom = creationNom.value.trim();
|
||||||
|
|
||||||
|
const pass = creationPass.value;
|
||||||
|
|
||||||
|
const pass2 = creationPass2.value;
|
||||||
|
|
||||||
|
if (!nom) {
|
||||||
|
afficherMessage("Veuillez saisir un nom utilisateur.", "error");
|
||||||
|
|
||||||
|
creationNom.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pass.length < 4) {
|
||||||
|
afficherMessage(
|
||||||
|
"Le mot de passe doit contenir au moins 4 caractères.",
|
||||||
|
"error",
|
||||||
|
);
|
||||||
|
|
||||||
|
creationPass.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pass !== pass2) {
|
||||||
|
afficherMessage("Les deux mots de passe ne correspondent pas.", "error");
|
||||||
|
|
||||||
|
creationPass2.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const bouton = formCreation.querySelector('button[type="submit"]');
|
||||||
|
|
||||||
|
bouton.disabled = true;
|
||||||
|
|
||||||
|
bouton.textContent = "Création...";
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(API + "create.php", {
|
||||||
|
method: "POST",
|
||||||
|
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
|
||||||
|
credentials: "same-origin",
|
||||||
|
|
||||||
|
body: JSON.stringify({
|
||||||
|
nom: nom,
|
||||||
|
pass: pass,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 401) {
|
||||||
|
window.location.href = "/html/admin.html";
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.success !== true) {
|
||||||
|
throw new Error(data.message || "Impossible de créer l'utilisateur.");
|
||||||
|
}
|
||||||
|
|
||||||
|
fermerModalCreation();
|
||||||
|
|
||||||
|
afficherMessage("Utilisateur créé avec succès.", "success");
|
||||||
|
|
||||||
|
await chargerUtilisateurs();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur création utilisateur :", error);
|
||||||
|
|
||||||
|
afficherMessage(error.message || "Erreur lors de la création.", "error");
|
||||||
|
} finally {
|
||||||
|
bouton.disabled = false;
|
||||||
|
|
||||||
|
bouton.textContent = "Créer";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* MODALE PASSWORD
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function ouvrirModalPassword(id, nom) {
|
||||||
|
passwordId.value = id;
|
||||||
|
|
||||||
|
passwordUtilisateur.textContent = "Utilisateur : " + nom;
|
||||||
|
|
||||||
|
nouveauPass.value = "";
|
||||||
|
|
||||||
|
nouveauPass2.value = "";
|
||||||
|
|
||||||
|
modalPassword.classList.remove("hidden");
|
||||||
|
|
||||||
|
modalPassword.classList.add("flex");
|
||||||
|
|
||||||
|
setTimeout(() => nouveauPass?.focus(), 100);
|
||||||
|
}
|
||||||
|
|
||||||
|
function fermerModalPassword() {
|
||||||
|
modalPassword.classList.add("hidden");
|
||||||
|
|
||||||
|
modalPassword.classList.remove("flex");
|
||||||
|
|
||||||
|
formPassword?.reset();
|
||||||
|
|
||||||
|
passwordId.value = "";
|
||||||
|
|
||||||
|
passwordUtilisateur.textContent = "";
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* MODIFIER PASSWORD
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
async function modifierPassword() {
|
||||||
|
const id = Number(passwordId.value);
|
||||||
|
|
||||||
|
const pass = nouveauPass.value;
|
||||||
|
|
||||||
|
const pass2 = nouveauPass2.value;
|
||||||
|
|
||||||
|
if (!id) {
|
||||||
|
afficherMessage("Utilisateur invalide.", "error");
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pass.length < 4) {
|
||||||
|
afficherMessage(
|
||||||
|
"Le mot de passe doit contenir au moins 4 caractères.",
|
||||||
|
"error",
|
||||||
|
);
|
||||||
|
|
||||||
|
nouveauPass.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pass !== pass2) {
|
||||||
|
afficherMessage("Les deux mots de passe ne correspondent pas.", "error");
|
||||||
|
|
||||||
|
nouveauPass2.focus();
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const bouton = formPassword.querySelector('button[type="submit"]');
|
||||||
|
|
||||||
|
bouton.disabled = true;
|
||||||
|
|
||||||
|
bouton.textContent = "Modification...";
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(API + "password.php", {
|
||||||
|
method: "POST",
|
||||||
|
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
|
||||||
|
credentials: "same-origin",
|
||||||
|
|
||||||
|
body: JSON.stringify({
|
||||||
|
id: id,
|
||||||
|
pass: pass,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 401) {
|
||||||
|
window.location.href = "/html/admin.html";
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.success !== true) {
|
||||||
|
throw new Error(
|
||||||
|
data.message || "Impossible de modifier le mot de passe.",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
fermerModalPassword();
|
||||||
|
|
||||||
|
afficherMessage("Mot de passe modifié avec succès.", "success");
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur modification mot de passe :", error);
|
||||||
|
|
||||||
|
afficherMessage(
|
||||||
|
error.message || "Erreur lors de la modification.",
|
||||||
|
"error",
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
bouton.disabled = false;
|
||||||
|
|
||||||
|
bouton.textContent = "Modifier";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CHANGER STATUT
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
async function changerStatut(id, actifActuel) {
|
||||||
|
const nouveauStatut = actifActuel === 1 ? 0 : 1;
|
||||||
|
|
||||||
|
const confirmation =
|
||||||
|
nouveauStatut === 1
|
||||||
|
? "Voulez-vous activer cet utilisateur ?"
|
||||||
|
: "Voulez-vous désactiver cet utilisateur ?";
|
||||||
|
|
||||||
|
if (!window.confirm(confirmation)) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
const response = await fetch(API + "status.php", {
|
||||||
|
method: "POST",
|
||||||
|
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
|
||||||
|
credentials: "same-origin",
|
||||||
|
|
||||||
|
body: JSON.stringify({
|
||||||
|
id: Number(id),
|
||||||
|
actif: nouveauStatut,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (response.status === 401) {
|
||||||
|
window.location.href = "/html/admin.html";
|
||||||
|
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const data = await response.json();
|
||||||
|
|
||||||
|
if (data.success !== true) {
|
||||||
|
throw new Error(data.message || "Impossible de modifier le statut.");
|
||||||
|
}
|
||||||
|
|
||||||
|
afficherMessage(
|
||||||
|
nouveauStatut === 1 ? "Utilisateur activé." : "Utilisateur désactivé.",
|
||||||
|
"success",
|
||||||
|
);
|
||||||
|
|
||||||
|
await chargerUtilisateurs();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Erreur changement statut :", error);
|
||||||
|
|
||||||
|
afficherMessage(
|
||||||
|
error.message || "Erreur lors de la modification.",
|
||||||
|
"error",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* EVENEMENTS
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
btnNouvelUtilisateur?.addEventListener("click", ouvrirModalCreation);
|
||||||
|
|
||||||
|
btnAnnulerCreation?.addEventListener("click", fermerModalCreation);
|
||||||
|
|
||||||
|
btnAnnulerPassword?.addEventListener("click", fermerModalPassword);
|
||||||
|
|
||||||
|
formCreation?.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
creerUtilisateur();
|
||||||
|
});
|
||||||
|
|
||||||
|
formPassword?.addEventListener("submit", (event) => {
|
||||||
|
event.preventDefault();
|
||||||
|
|
||||||
|
modifierPassword();
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Fermeture modales
|
||||||
|
*/
|
||||||
|
|
||||||
|
modalCreation?.addEventListener("click", (event) => {
|
||||||
|
if (event.target === modalCreation) {
|
||||||
|
fermerModalCreation();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
modalPassword?.addEventListener("click", (event) => {
|
||||||
|
if (event.target === modalPassword) {
|
||||||
|
fermerModalPassword();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* ESC
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.addEventListener("keydown", (event) => {
|
||||||
|
if (event.key !== "Escape") {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalCreation && !modalCreation.classList.contains("hidden")) {
|
||||||
|
fermerModalCreation();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (modalPassword && !modalPassword.classList.contains("hidden")) {
|
||||||
|
fermerModalPassword();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* INITIALISATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
document.addEventListener("DOMContentLoaded", async () => {
|
||||||
|
console.log("securite.js chargé");
|
||||||
|
|
||||||
|
console.log("listeUtilisateurs =", listeUtilisateurs);
|
||||||
|
|
||||||
|
const authentifie = await verifierSession();
|
||||||
|
|
||||||
|
if (!authentifie) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
await chargerUtilisateurs();
|
||||||
|
});
|
||||||
@@ -0,0 +1,328 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* SESSION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
session_set_cookie_params([
|
||||||
|
'lifetime' => 0,
|
||||||
|
'path' => '/',
|
||||||
|
'secure' => !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off',
|
||||||
|
'httponly' => true,
|
||||||
|
'samesite' => 'Strict'
|
||||||
|
]);
|
||||||
|
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CONFIGURATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
require_once __DIR__ . '/database.php';
|
||||||
|
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* LECTURE JSON
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$data = json_decode(
|
||||||
|
file_get_contents('php://input'),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
$action = $data['action'] ?? '';
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* REPONSE JSON
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
function jsonResponse(
|
||||||
|
string $status,
|
||||||
|
string $message = '',
|
||||||
|
array $extra = []
|
||||||
|
): never {
|
||||||
|
|
||||||
|
echo json_encode(
|
||||||
|
array_merge(
|
||||||
|
[
|
||||||
|
'status' => $status,
|
||||||
|
'message' => $message
|
||||||
|
],
|
||||||
|
$extra
|
||||||
|
),
|
||||||
|
JSON_UNESCAPED_UNICODE
|
||||||
|
);
|
||||||
|
|
||||||
|
exit;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* VERIFICATION SESSION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ($action === 'check') {
|
||||||
|
|
||||||
|
if (
|
||||||
|
isset($_SESSION['user_id']) &&
|
||||||
|
isset($_SESSION['username'])
|
||||||
|
) {
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'success',
|
||||||
|
'',
|
||||||
|
[
|
||||||
|
'authenticated' => true,
|
||||||
|
'user_id' => $_SESSION['user_id'],
|
||||||
|
'nom' => $_SESSION['username']
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'error',
|
||||||
|
'Session inactive.',
|
||||||
|
[
|
||||||
|
'authenticated' => false
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* DECONNEXION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ($action === 'logout') {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Détruire complètement la session
|
||||||
|
*/
|
||||||
|
|
||||||
|
$_SESSION = [];
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Supprimer le cookie de session
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (
|
||||||
|
ini_get('session.use_cookies')
|
||||||
|
) {
|
||||||
|
|
||||||
|
$params = session_get_cookie_params();
|
||||||
|
|
||||||
|
setcookie(
|
||||||
|
session_name(),
|
||||||
|
'',
|
||||||
|
time() - 42000,
|
||||||
|
$params['path'],
|
||||||
|
$params['domain'] ?? '',
|
||||||
|
$params['secure'],
|
||||||
|
$params['httponly']
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
session_destroy();
|
||||||
|
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'success',
|
||||||
|
'Déconnexion effectuée.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CONNEXION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ($action === 'login') {
|
||||||
|
|
||||||
|
$nom =
|
||||||
|
trim(
|
||||||
|
(string)($data['nom'] ?? '')
|
||||||
|
);
|
||||||
|
|
||||||
|
$pass =
|
||||||
|
(string)($data['pass'] ?? '');
|
||||||
|
|
||||||
|
|
||||||
|
if (
|
||||||
|
$nom === '' ||
|
||||||
|
$pass === ''
|
||||||
|
) {
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'error',
|
||||||
|
'Identifiant et mot de passe obligatoires.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Recherche utilisateur
|
||||||
|
*/
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
SELECT
|
||||||
|
id,
|
||||||
|
nom,
|
||||||
|
pass,
|
||||||
|
actif
|
||||||
|
FROM login
|
||||||
|
WHERE nom = :nom
|
||||||
|
LIMIT 1
|
||||||
|
";
|
||||||
|
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
|
||||||
|
$stmt->execute([
|
||||||
|
':nom' => $nom
|
||||||
|
]);
|
||||||
|
|
||||||
|
|
||||||
|
$user =
|
||||||
|
$stmt->fetch(PDO::FETCH_ASSOC);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Utilisateur inexistant
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (!$user) {
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Même traitement que mauvais mot de passe
|
||||||
|
* afin de ne pas révéler si le compte existe.
|
||||||
|
*/
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'error',
|
||||||
|
'Identifiant ou mot de passe incorrect.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Compte désactivé
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ((int)$user['actif'] !== 1) {
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'error',
|
||||||
|
'Ce compte est désactivé.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Vérification du mot de passe
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (
|
||||||
|
!password_verify(
|
||||||
|
$pass,
|
||||||
|
$user['pass']
|
||||||
|
)
|
||||||
|
) {
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'error',
|
||||||
|
'Identifiant ou mot de passe incorrect.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Nouveau numéro de session
|
||||||
|
* après authentification
|
||||||
|
*/
|
||||||
|
|
||||||
|
session_regenerate_id(true);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Variables de session
|
||||||
|
*/
|
||||||
|
|
||||||
|
$_SESSION['user_id'] =
|
||||||
|
(int)$user['id'];
|
||||||
|
|
||||||
|
$_SESSION['username'] =
|
||||||
|
$user['nom'];
|
||||||
|
|
||||||
|
$_SESSION['authenticated'] =
|
||||||
|
true;
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Dernière connexion
|
||||||
|
*/
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
UPDATE login
|
||||||
|
SET dernier_login = NOW()
|
||||||
|
WHERE id = :id
|
||||||
|
";
|
||||||
|
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
|
||||||
|
$stmt->execute([
|
||||||
|
':id' => $user['id']
|
||||||
|
]);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Réponse
|
||||||
|
*/
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'success',
|
||||||
|
'Connexion réussie.',
|
||||||
|
[
|
||||||
|
'authenticated' => true,
|
||||||
|
'user_id' => (int)$user['id'],
|
||||||
|
'nom' => $user['nom']
|
||||||
|
]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* ACTION INCONNUE
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
jsonResponse(
|
||||||
|
'error',
|
||||||
|
'Action inconnue.'
|
||||||
|
);
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* CONNEXION MYSQL / PDO
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$host = 'localhost';
|
||||||
|
$db = 'GF';
|
||||||
|
$user = 'root';
|
||||||
|
$pass = 'sysadm-1963';
|
||||||
|
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
$pdo = new PDO(
|
||||||
|
"mysql:host={$host};dbname={$db};charset=utf8mb4",
|
||||||
|
$user,
|
||||||
|
$pass,
|
||||||
|
[
|
||||||
|
PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
|
||||||
|
PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
|
||||||
|
PDO::ATTR_EMULATE_PREPARES => false
|
||||||
|
]
|
||||||
|
);
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
|
||||||
|
http_response_code(500);
|
||||||
|
|
||||||
|
header(
|
||||||
|
'Content-Type: application/json; charset=utf-8'
|
||||||
|
);
|
||||||
|
|
||||||
|
echo json_encode(
|
||||||
|
[
|
||||||
|
'status' => 'error',
|
||||||
|
'message' => 'Erreur de connexion à la base de données.'
|
||||||
|
],
|
||||||
|
JSON_UNESCAPED_UNICODE
|
||||||
|
);
|
||||||
|
|
||||||
|
exit;
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
declare(strict_types=1);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* SESSION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
session_set_cookie_params([
|
||||||
|
'lifetime' => 0,
|
||||||
|
'path' => '/',
|
||||||
|
'secure' => !empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off',
|
||||||
|
'httponly' => true,
|
||||||
|
'samesite' => 'Strict'
|
||||||
|
]);
|
||||||
|
|
||||||
|
session_start();
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =========================================================
|
||||||
|
* VERIFICATION AUTHENTIFICATION
|
||||||
|
* =========================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (
|
||||||
|
empty($_SESSION['user_id']) ||
|
||||||
|
empty($_SESSION['authenticated'])
|
||||||
|
) {
|
||||||
|
|
||||||
|
http_response_code(401);
|
||||||
|
|
||||||
|
header(
|
||||||
|
'Content-Type: application/json; charset=utf-8'
|
||||||
|
);
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => false,
|
||||||
|
'message' => 'Authentification requise.'
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
|
||||||
|
exit;
|
||||||
|
}
|
||||||
@@ -0,0 +1,122 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
require_once __DIR__ . '/auth.php';
|
||||||
|
require_once __DIR__ . '/../database.php';
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
$data = json_decode(
|
||||||
|
file_get_contents('php://input'),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
$nom = trim($data['nom'] ?? '');
|
||||||
|
$pass = $data['pass'] ?? '';
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* VERIFICATION NOM UTILISATEUR
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ($nom === '') {
|
||||||
|
|
||||||
|
throw new Exception(
|
||||||
|
'Le nom utilisateur est obligatoire.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* VERIFICATION MOT DE PASSE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (strlen($pass) < 4) {
|
||||||
|
|
||||||
|
throw new Exception(
|
||||||
|
'Le mot de passe doit contenir au moins 4 caractères.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* HASH DU MOT DE PASSE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$hash = password_hash(
|
||||||
|
$pass,
|
||||||
|
PASSWORD_DEFAULT
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* CREATION UTILISATEUR
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
INSERT INTO login
|
||||||
|
(nom, pass)
|
||||||
|
VALUES
|
||||||
|
(:nom, :pass)
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
|
||||||
|
$stmt->execute([
|
||||||
|
':nom' => $nom,
|
||||||
|
':pass' => $hash
|
||||||
|
]);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* REPONSE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => true,
|
||||||
|
'message' => 'Utilisateur créé.'
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
|
||||||
|
http_response_code(400);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Nom utilisateur déjà existant
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (($e->errorInfo[1] ?? null) == 1062) {
|
||||||
|
|
||||||
|
$message =
|
||||||
|
'Ce nom utilisateur existe déjà.';
|
||||||
|
} else {
|
||||||
|
|
||||||
|
$message =
|
||||||
|
'Erreur lors de la création.';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => false,
|
||||||
|
'message' => $message
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
} catch (Exception $e) {
|
||||||
|
|
||||||
|
http_response_code(400);
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => false,
|
||||||
|
'message' => $e->getMessage()
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
}
|
||||||
@@ -0,0 +1,97 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
require_once __DIR__ . '/auth.php';
|
||||||
|
require_once __DIR__ . '/../database.php';
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
$data = json_decode(
|
||||||
|
file_get_contents('php://input'),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
$id = (int)($data['id'] ?? 0);
|
||||||
|
$pass = $data['pass'] ?? '';
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* VERIFICATION UTILISATEUR
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if ($id <= 0) {
|
||||||
|
|
||||||
|
throw new Exception(
|
||||||
|
'Utilisateur invalide.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* VERIFICATION MOT DE PASSE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
if (strlen($pass) < 4) {
|
||||||
|
|
||||||
|
throw new Exception(
|
||||||
|
'Le mot de passe doit contenir au moins 4 caractères.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* HASH DU MOT DE PASSE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$hash = password_hash(
|
||||||
|
$pass,
|
||||||
|
PASSWORD_DEFAULT
|
||||||
|
);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* MODIFICATION
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
UPDATE login
|
||||||
|
SET pass = :pass
|
||||||
|
WHERE id = :id
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
|
||||||
|
$stmt->execute([
|
||||||
|
':pass' => $hash,
|
||||||
|
':id' => $id
|
||||||
|
]);
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
* =====================================================
|
||||||
|
* REPONSE
|
||||||
|
* =====================================================
|
||||||
|
*/
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => true,
|
||||||
|
'message' => 'Mot de passe modifié.'
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
} catch (Exception $e) {
|
||||||
|
|
||||||
|
http_response_code(400);
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => false,
|
||||||
|
'message' => $e->getMessage()
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
}
|
||||||
@@ -0,0 +1,46 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
require_once __DIR__ . '/auth.php';
|
||||||
|
require_once __DIR__ . '/../database.php';
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
$data = json_decode(
|
||||||
|
file_get_contents('php://input'),
|
||||||
|
true
|
||||||
|
);
|
||||||
|
|
||||||
|
$id = (int)($data['id'] ?? 0);
|
||||||
|
|
||||||
|
if ($id <= 0) {
|
||||||
|
throw new Exception(
|
||||||
|
'Utilisateur invalide.'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
UPDATE login
|
||||||
|
SET actif = IF(actif = 1, 0, 1)
|
||||||
|
WHERE id = :id
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmt = $pdo->prepare($sql);
|
||||||
|
|
||||||
|
$stmt->execute([
|
||||||
|
':id' => $id
|
||||||
|
]);
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => true
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
} catch (Exception $e) {
|
||||||
|
|
||||||
|
http_response_code(400);
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => false,
|
||||||
|
'message' => $e->getMessage()
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
}
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
<?php
|
||||||
|
|
||||||
|
require_once __DIR__ . '/auth.php';
|
||||||
|
require_once __DIR__ . '/../database.php';
|
||||||
|
|
||||||
|
header('Content-Type: application/json; charset=utf-8');
|
||||||
|
|
||||||
|
try {
|
||||||
|
|
||||||
|
$sql = "
|
||||||
|
SELECT
|
||||||
|
id,
|
||||||
|
nom,
|
||||||
|
actif,
|
||||||
|
dernier_login,
|
||||||
|
created_at,
|
||||||
|
updated_at
|
||||||
|
FROM login
|
||||||
|
ORDER BY nom ASC
|
||||||
|
";
|
||||||
|
|
||||||
|
$stmt = $pdo->query($sql);
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => true,
|
||||||
|
'users' => $stmt->fetchAll(PDO::FETCH_ASSOC)
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
} catch (PDOException $e) {
|
||||||
|
|
||||||
|
http_response_code(500);
|
||||||
|
|
||||||
|
echo json_encode([
|
||||||
|
'success' => false,
|
||||||
|
'message' => 'Erreur base de données.'
|
||||||
|
], JSON_UNESCAPED_UNICODE);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user