Authentification : login/mot de passe (admin/admin par défaut)

- Page de connexion, session 7 jours par cookie HMAC signé (secret persisté)
- Protection de l'API (401) et du WebSocket (code 4401), / redirige vers /login
- Bouton de déconnexion, redirection automatique à l'expiration de session
- Identifiants configurables via LIVEFLOW_USER / LIVEFLOW_PASSWORD

https://claude.ai/code/session_01YHMp3EKzr4s6o8w1ygxuUe

app/static/app.js

@@ -15,6 +15,16 @@ const state = {
 
 const BATCH_SAMPLES = 4096; // ~256 ms de PCM 16 kHz par message WebSocket
 
+// fetch avec redirection vers la page de connexion si la session a expiré
+async function api(url, opts) {
+  const resp = await fetch(url, opts);
+  if (resp.status === 401) {
+    location.href = '/login';
+    throw new Error('session expirée');
+  }
+  return resp;
+}
+
 // ----------------------------------------------------------- enregistrement
 
 async function startRecording() {
@@ -43,7 +53,10 @@ async function startRecording() {
   state.ws = new WebSocket(`${proto}://${location.host}/ws`);
   state.ws.onopen = () => state.ws.send(JSON.stringify({ type: 'start', title: $('title').value }));
   state.ws.onmessage = onServerMessage;
-  state.ws.onclose = () => { if (state.recording) stopRecording(true); };
+  state.ws.onclose = (e) => {
+    if (e.code === 4401) { location.href = '/login'; return; }
+    if (state.recording) stopRecording(true);
+  };
 
   state.audioContext = new AudioContext();
   await state.audioContext.audioWorklet.addModule('worklet.js');
@@ -174,7 +187,7 @@ function showExportBar(meetingId) {
 // ----------------------------------------------------------------- réunions
 
 async function loadMeetings() {
-  const meetings = await (await fetch('/api/meetings')).json();
+  const meetings = await (await api('/api/meetings')).json();
   const ul = $('meeting-list');
   ul.innerHTML = '';
   for (const m of meetings) {
@@ -190,7 +203,7 @@ async function loadMeetings() {
 
 async function openMeeting(id) {
   if (state.recording) return;
-  const meeting = await (await fetch(`/api/meetings/${id}`)).json();
+  const meeting = await (await api(`/api/meetings/${id}`)).json();
   state.currentMeetingId = id;
   $('transcript-title').textContent = meeting.title;
   clearTranscript();
@@ -206,7 +219,7 @@ async function openMeeting(id) {
 async function deleteCurrentMeeting() {
   if (!state.currentMeetingId || state.recording) return;
   if (!confirm('Supprimer définitivement cette réunion et sa transcription ?')) return;
-  await fetch(`/api/meetings/${state.currentMeetingId}`, { method: 'DELETE' });
+  await api(`/api/meetings/${state.currentMeetingId}`, { method: 'DELETE' });
   state.currentMeetingId = null;
   $('transcript-title').textContent = 'Transcription';
   clearTranscript();
@@ -226,6 +239,7 @@ async function copyTranscript() {
 // --------------------------------------------------------------------- init
 
 $('record-btn').onclick = () => (state.recording ? stopRecording() : startRecording());
+$('logout-btn').onclick = async () => { await fetch('/api/logout', { method: 'POST' }); location.href = '/login'; };
 $('copy-btn').onclick = copyTranscript;
 $('delete-btn').onclick = deleteCurrentMeeting;
 loadMeetings();

app/static/index.html

@@ -11,6 +11,7 @@
   <header>
     <h1>🎙️ LiveFlow</h1>
     <span id="status" class="badge idle">Prêt</span>
+    <button id="logout-btn" title="Se déconnecter">Déconnexion</button>
   </header>
 
   <div class="layout">

app/static/login.html

@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>LiveFlow — Connexion</title>
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%8E%99%EF%B8%8F%3C/text%3E%3C/svg%3E">
+  <link rel="stylesheet" href="style.css">
+  <style>
+    body { align-items: center; justify-content: center; }
+    .login-box {
+      background: var(--panel);
+      border: 1px solid #262b3a;
+      border-radius: 14px;
+      padding: 32px;
+      width: min(360px, 90vw);
+      display: flex;
+      flex-direction: column;
+      gap: 14px;
+    }
+    .login-box h1 { font-size: 1.3rem; text-align: center; margin-bottom: 6px; }
+    .login-box input {
+      background: var(--panel-2);
+      border: 1px solid #2c3245;
+      color: var(--text);
+      padding: 11px 14px;
+      border-radius: 10px;
+      font-size: 0.95rem;
+    }
+    .login-box input:focus { outline: none; border-color: var(--accent); }
+    .login-box button { background: var(--accent); font-weight: 600; padding: 11px; }
+    #login-error { color: #ff8589; font-size: 0.85rem; text-align: center; min-height: 1.2em; }
+  </style>
+</head>
+<body>
+  <form class="login-box" id="login-form">
+    <h1>🎙️ LiveFlow</h1>
+    <input id="username" type="text" placeholder="Utilisateur" autocomplete="username" required autofocus>
+    <input id="password" type="password" placeholder="Mot de passe" autocomplete="current-password" required>
+    <button type="submit">Se connecter</button>
+    <div id="login-error"></div>
+  </form>
+  <script>
+    document.getElementById('login-form').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const resp = await fetch('/api/login', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          username: document.getElementById('username').value,
+          password: document.getElementById('password').value,
+        }),
+      });
+      if (resp.ok) {
+        location.href = '/';
+      } else {
+        document.getElementById('login-error').textContent = 'Identifiants invalides';
+        document.getElementById('password').value = '';
+      }
+    });
+  </script>
+</body>
+</html>

app/static/style.css

@@ -41,6 +41,14 @@ header h1 { font-size: 1.2rem; }
 .badge.busy { background: #2a2410; color: #ffd166; }
 .badge.error { background: #3a181a; color: #ff8589; }
 
+#logout-btn {
+  margin-left: auto;
+  font-size: 0.8rem;
+  padding: 6px 12px;
+  color: var(--muted);
+}
+#logout-btn:hover { color: var(--text); }
+
 .layout { display: flex; flex: 1; min-height: 0; }
 
 aside {