feat: Introduce a comprehensive authentication system, including user management, JWT handling, and initial frontend components with Docker support.

frontend/index.html

@@ -72,7 +72,46 @@
 </head>
 <body>
   <div class="search-progress-bar" id="search-progress-bar"><div class="search-progress-bar__fill"></div></div>
-  <div class="app-container">
+
+  <!-- Login Screen (hidden by default, shown when auth is required) -->
+  <div id="login-screen" class="login-screen hidden">
+    <div class="login-card">
+      <div class="login-header">
+        <div class="login-logo">
+          <span class="login-logo-icon">📖</span>
+          <span class="login-logo-text">ObsiGate</span>
+        </div>
+        <p class="login-subtitle">Accès sécurisé à vos vaults</p>
+      </div>
+      <form id="login-form" class="login-form" autocomplete="on">
+        <div class="form-group">
+          <label for="login-username">Nom d'utilisateur</label>
+          <input type="text" id="login-username" name="username" autocomplete="username" placeholder="utilisateur" required autofocus />
+        </div>
+        <div class="form-group">
+          <label for="login-password">Mot de passe</label>
+          <div class="password-input-wrapper">
+            <input type="password" id="login-password" name="password" autocomplete="current-password" placeholder="••••••••" required />
+            <button type="button" id="toggle-password" class="password-toggle" aria-label="Afficher le mot de passe">👁</button>
+          </div>
+        </div>
+        <div class="form-group form-group--inline">
+          <label class="checkbox-label">
+            <input type="checkbox" id="remember-me" name="remember_me" />
+            <span>Se souvenir de moi (30 jours)</span>
+          </label>
+        </div>
+        <div id="login-error" class="login-error hidden"></div>
+        <button type="submit" id="login-btn" class="btn-login">
+          <span class="btn-text">Se connecter</span>
+          <span class="btn-spinner hidden">⏳</span>
+        </button>
+      </form>
+    </div>
+  </div>
+
+  <!-- Main Application (wrapped for show/hide) -->
+  <div id="app" class="app-container">
 
     <!-- Header -->
     <header class="header">
@@ -138,6 +177,8 @@
           <i data-lucide="database" style="width:14px;height:14px"></i>
           <span id="vault-context-text">All</span>
         </div>
+        <!-- User menu (visible when logged in) -->
+        <div class="user-menu" id="user-menu"></div>
         <div class="header-menu">
           <button class="header-menu-btn" id="header-menu-btn" title="Options">
             <i data-lucide="settings" style="width:18px;height:18px"></i>