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
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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" },
|
||||
},
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user