From fd2d5408d6a216d3122e437d201d1a1ee60499aa Mon Sep 17 00:00:00 2001
From: nlevesque <nassim.levesque@gmail.com>
Date: Tue, 28 Jul 2026 23:30:18 +0200
Subject: [PATCH] Fix login error feedback + load basecoat toast module

- inline error message on the login form (401 shows a visible French
  message, hidden again on submit)
- import basecoat-css/toast in BaseLayout: every showToast in the app
  was silently no-oping because the toast JS was never loaded
---
 src/components/LoginForm.astro | 28 ++++++++++++++--------------
 src/layouts/BaseLayout.astro   |  1 +
 src/pages/api/login.ts         | 11 +++++++----
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/src/components/LoginForm.astro b/src/components/LoginForm.astro
index f5c9af3..90645c2 100644
--- a/src/components/LoginForm.astro
+++ b/src/components/LoginForm.astro
@@ -27,6 +27,12 @@
                     required
                 />
             </div>
+            <p
+                id="login-error"
+                class="hidden text-sm m-0"
+                style="color: var(--destructive)"
+                role="alert"
+            ></p>
         </form>
     </section>
     <footer class="flex-col gap-2">
@@ -46,20 +52,18 @@
     const submitBtn = document.getElementById(
         "login-submit",
     ) as HTMLButtonElement;
-    const toaster = document.getElementById("toaster") as ToasterElement;
+    const errorEl = document.getElementById("login-error");
 
-    const showToast = (
-        category: "success" | "error",
-        title: string,
-        description: string,
-    ) => {
-        if (toaster?.toast) {
-            toaster.toast({ category, title, description });
+    const showError = (message: string) => {
+        if (errorEl) {
+            errorEl.textContent = message;
+            errorEl.classList.remove("hidden");
         }
     };
 
     form?.addEventListener("submit", async (e) => {
         e.preventDefault();
+        errorEl?.classList.add("hidden");
 
         const formData = new FormData(form as HTMLFormElement);
         const username = formData.get("username");
@@ -80,16 +84,12 @@
                 window.location.href = "/";
             } else {
                 const data = await res.json();
-                showToast(
-                    "error",
-                    "Erreur",
-                    data.error ?? "Identifiants incorrects",
-                );
+                showError(data.error ?? "Email ou mot de passe incorrect");
                 submitBtn.disabled = false;
                 submitBtn.innerHTML = originalText;
             }
         } catch {
-            showToast("error", "Erreur", "Erreur réseau");
+            showError("Erreur réseau, veuillez réessayer.");
             submitBtn.disabled = false;
             submitBtn.innerHTML = originalText;
         }
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
index d6aa556..3198f0a 100644
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@@ -68,6 +68,7 @@ if (themePreference === "Dark") {
             import "basecoat-css/basecoat";
             import "basecoat-css/tabs";
             import "basecoat-css/dropdown-menu";
+            import "basecoat-css/toast";
         </script>
         <script is:inline>
             // Register the service worker so the browser offers "Install app"
diff --git a/src/pages/api/login.ts b/src/pages/api/login.ts
index 3fb63ee..6e41fac 100644
--- a/src/pages/api/login.ts
+++ b/src/pages/api/login.ts
@@ -69,9 +69,12 @@ export const POST: APIRoute = async ({ request, cookies }) => {
         });
     } catch (err) {
         console.error("Login failed:", err);
-        return new Response(JSON.stringify({ error: "Invalid credentials" }), {
-            status: 401,
-            headers: { "Content-Type": "application/json" },
-        });
+        return new Response(
+            JSON.stringify({ error: "Email ou mot de passe incorrect" }),
+            {
+                status: 401,
+                headers: { "Content-Type": "application/json" },
+            },
+        );
     }
 };