maj de 18h38

2026-04-01 18:39:00 +02:00
parent 0ab04110ad
commit 41312b0f75
9 changed files with 522 additions and 39 deletions
--- a/flask/index.html
+++ b/flask/index.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Loustiques Home - Connexion</title>
+  <style>
+    *  {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0; 
+    }
+
+    body {
+      font-family: system-ui, sans-serif;
+      background: #1f1f1f;
+      color: #f0f0f0;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .carte {
+      width: 380px;
+      max-width: 95vw;
+      background: #2a2a2a;
+      border-radius: 8px;
+      padding: 40px 36px;
+    }
+
+    h1 {
+      font-size: 26px;
+      font-weight: 700;
+      margin-bottom: 8px;
+      text-align: center;
+    }
+
+    .soustitre {
+      font-size: 14px;
+      color: #888;
+      margin-bottom: 36px;
+      text-align: center;
+    }
+
+    .champ {
+      margin-bottom: 18px;
+    }
+
+    label {
+      display: block;
+      font-size: 13px;
+      font-weight: 500;
+      margin-bottom: 6px;
+      color: #aaa;
+    }
+
+    input {
+      width: 100%;
+      padding: 11px 14px;
+      font-size: 14px;
+      font-family: inherit;
+      border: 1px solid #3a3a3a;
+      border-radius: 6px;
+      outline: none;
+      transition: border-color 0.15s;
+      color: #f0f0f0;
+      background: #333;
+    }
+
+    input:focus {
+      border-color: #2563eb;
+    }
+
+    input::placeholder {
+      color: #555;
+    }
+
+    button {
+      width: 100%;
+      margin-top: 10px;
+      padding: 12px;
+      background: #2563eb;
+      color: #fff;
+      border: none;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 600;
+      font-family: inherit;
+      cursor: pointer;
+      transition: background 0.15s;
+    }
+
+    button:hover { background: #1d4ed8; }
+    button:active { background: #1e40af; }
+    button:disabled { opacity: 0.4; cursor: not-allowed; }
+
+    .message {
+      margin-top: 14px;
+      font-size: 13px;
+      display: none;
+    }
+    .message.error { 
+      display: block;
+      color: #f87171;
+    }
+    .message.success {
+      display: block;
+      color: #4ade80;
+    }
+
+    .footer {
+      margin-top: 28px;
+      font-size: 12px;
+      color: #555;
+    }
+  </style>
+</head>
+<body>
+
+  <div class="carte">
+    <h1>Loustiques Home</h1>
+    <p class="soustitre">Connectez-vous via mot de passe ou avec votre bagde pour accéder à votre espace.</p>
+
+    <div class="champ">
+      <label for="username">Identifiant</label>
+      <input type="text" id="username" placeholder="Nom du loustique" autocomplete="username" />
+    </div>
+
+    <div class="champ">
+      <label for="password">Mot de passe</label>
+      <input type="password" id="password" placeholder="Wola ouais" autocomplete="current-password" />
+    </div>
+
+    <button id="btn" onclick="handleLogin()">Se connecter</button>
+
+    <div class="message" id="msg"></div>
+
+    <p class="footer">Accès réservé aux utilisateurs ajoutés par les loustiques.</p>
+  </div>
+
+ <script>
+    // 1. Écoute de la touche Entrée
+    ["username", "password"].forEach(id => {
+      document.getElementById(id).addEventListener("keydown", e => {
+        if (e.key === "Enter") handleLogin();
+      });
+    });
+
+    // 2. Fonction de connexion manuelle (Mot de passe)
+    async function handleLogin() {
+      const username = document.getElementById("username").value.trim();
+      const password = document.getElementById("password").value;
+      const btn = document.getElementById("btn");
+      const msg = document.getElementById("msg");
+
+      msg.className = "message";
+
+      if (!username || !password) {
+        msg.className = "message error";
+        msg.textContent = "Veuillez remplir tous les champs.";
+        return;
+      }
+
+      btn.disabled = true;
+      btn.textContent = "Vérification...";
+
+      try {
+        const res = await fetch("/login", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ username, password })
+        });
+        const data = await res.json();
+
+        if (data.success) {
+          msg.className = "message success";
+          msg.textContent = "Connexion réussie !";
+          window.location.href = "/dashboard";
+        } else {
+          msg.className = "message error";
+          msg.textContent = data.message || "Identifiants incorrects.";
+        }
+      } catch {
+        msg.className = "message error";
+        msg.textContent = "Impossible de contacter le serveur.";
+      } finally {
+        btn.disabled = false;
+        btn.textContent = "Se connecter";
+      }
+    }
+
+    // 3. Écoute automatique du badge (RFID) - SORTI DE LA FONCTION !
+    setInterval(async () => {
+      try {
+        // Attention : Vérifie que cette route correspond bien à celle dans main.py
+        // (J'avais mis /check-rfid-login dans mon exemple précédent)
+        const res = await fetch('/check-rfid-login'); 
+        const data = await res.json();
+
+        if (data.success) {
+          const msg = document.getElementById("msg");
+          const btn = document.getElementById("btn");
+          const inputs = document.querySelectorAll("input");
+        
+          btn.disabled = true;
+          inputs.forEach(input => input.disabled = true);
+          
+          msg.className = "message success";
+          msg.textContent = "Badge reconnu ! Bienvenue " + data.username + "...";
+          
+          setTimeout(() => {
+            window.location.href = "/dashboard";
+          }, 1000);
+        }
+      } catch (e) {
+        // Erreurs ignorées silencieusement
+      }
+    }, 1500); 
+  </script>
+</body>
+</html>