100 lines
6.3 KiB
HTML
100 lines
6.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<title>Bag Exchange | Forgot Password</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
</head>
|
|
<body class="min-h-screen bg-gradient-to-br from-amber-50 via-orange-50 to-stone-200 text-zinc-800">
|
|
<main class="mx-auto grid min-h-screen w-full max-w-2xl place-items-center px-4 py-8">
|
|
<section class="w-full max-w-xl rounded-2xl border border-zinc-300/70 bg-amber-50/80 p-6 shadow-2xl shadow-stone-700/10 backdrop-blur-sm">
|
|
<div class="mb-4 flex justify-end">
|
|
<select id="language-select" class="rounded-lg border border-zinc-300 bg-white px-2 py-1 text-sm">
|
|
<option value="en">English</option>
|
|
<option value="it">Italiano</option>
|
|
<option value="fr">Français</option>
|
|
<option value="de">Deutsch</option>
|
|
<option value="es">Español</option>
|
|
</select>
|
|
</div>
|
|
|
|
<h1 class="mb-2 text-3xl font-bold tracking-tight" data-i18n="title">Recover your password</h1>
|
|
<p class="mb-4 text-sm text-zinc-700" id="intro-text" data-i18n="subtitle">Enter your email and we will send you a password reset link if your account exists.</p>
|
|
|
|
<form class="grid gap-3" id="forgot-form">
|
|
<input class="w-full rounded-xl border border-zinc-400/40 bg-white px-3 py-3 text-sm outline-none ring-orange-300 transition focus:ring-2" id="email" type="email" required data-i18n-placeholder="emailPlaceholder" placeholder="Your email" />
|
|
<button class="rounded-xl bg-orange-500 px-4 py-3 text-sm font-semibold text-white transition hover:bg-orange-600 disabled:cursor-not-allowed disabled:opacity-60" id="submit-btn" type="submit" data-i18n="submit">Send reset link</button>
|
|
</form>
|
|
|
|
<div class="mt-4 hidden rounded-xl px-3 py-2 text-sm leading-relaxed" id="feedback"></div>
|
|
<a class="mt-4 inline-block text-sm text-emerald-900 underline decoration-1 underline-offset-2" href="/" data-lang-link data-i18n="homeLink">Back to homepage</a>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/static/js/simple_i18n.js"></script>
|
|
<script>
|
|
var i18n = window.initPageI18n({
|
|
en: { pageTitle: "Bag Exchange | Forgot Password", title: "Recover your password", subtitle: "Enter your email and we will send you a password reset link if your account exists.", emailPlaceholder: "Your email", submit: "Send reset link", homeLink: "Back to homepage", msgInvalid: "Enter a valid email address.", msgOk: "If the account exists, a reset link has been sent.", msgError: "Unable to process request. Try again." },
|
|
it: { pageTitle: "Bag Exchange | Recupero Password", title: "Recupera la tua password", subtitle: "Inserisci la tua email e invieremo un link di reset se l'account esiste.", emailPlaceholder: "La tua email", submit: "Invia link di reset", homeLink: "Torna alla home", msgInvalid: "Inserisci un indirizzo email valido.", msgOk: "Se l'account esiste, e stato inviato un link di reset.", msgError: "Impossibile elaborare la richiesta. Riprova." },
|
|
fr: { pageTitle: "Bag Exchange | Recuperation du mot de passe", title: "Recuperer votre mot de passe", subtitle: "Entrez votre email et nous enverrons un lien de reinitialisation si le compte existe.", emailPlaceholder: "Votre email", submit: "Envoyer le lien", homeLink: "Retour a l'accueil", msgInvalid: "Entrez une adresse email valide.", msgOk: "Si le compte existe, un lien de reinitialisation a ete envoye.", msgError: "Impossible de traiter la demande. Veuillez reessayer." },
|
|
de: { pageTitle: "Bag Exchange | Passwort wiederherstellen", title: "Passwort wiederherstellen", subtitle: "Gib deine E-Mail ein und wir senden einen Reset-Link, falls das Konto existiert.", emailPlaceholder: "Deine E-Mail", submit: "Reset-Link senden", homeLink: "Zur Startseite", msgInvalid: "Bitte eine gueltige E-Mail-Adresse eingeben.", msgOk: "Falls das Konto existiert, wurde ein Reset-Link gesendet.", msgError: "Anfrage konnte nicht verarbeitet werden. Bitte erneut versuchen." },
|
|
es: { pageTitle: "Bag Exchange | Recuperar contrasena", title: "Recupera tu contrasena", subtitle: "Introduce tu email y enviaremos un enlace de restablecimiento si la cuenta existe.", emailPlaceholder: "Tu email", submit: "Enviar enlace", homeLink: "Volver al inicio", msgInvalid: "Introduce un correo electronico valido.", msgOk: "Si la cuenta existe, se ha enviado un enlace de restablecimiento.", msgError: "No se pudo procesar la solicitud. Intentalo de nuevo." }
|
|
});
|
|
|
|
(function () {
|
|
var form = document.getElementById("forgot-form");
|
|
var emailInput = document.getElementById("email");
|
|
var submitButton = document.getElementById("submit-btn");
|
|
var feedback = document.getElementById("feedback");
|
|
var introText = document.getElementById("intro-text");
|
|
|
|
function showMessage(kind, text) {
|
|
feedback.className = "mt-4 rounded-xl px-3 py-2 text-sm leading-relaxed";
|
|
if (kind === "error") {
|
|
feedback.classList.add("bg-red-100", "text-red-800");
|
|
} else {
|
|
feedback.classList.add("bg-emerald-100", "text-emerald-900");
|
|
}
|
|
feedback.textContent = text;
|
|
}
|
|
|
|
form.addEventListener("submit", async function (event) {
|
|
event.preventDefault();
|
|
|
|
var email = emailInput.value.trim();
|
|
if (!email || !emailInput.checkValidity()) {
|
|
showMessage("error", i18n.t("msgInvalid"));
|
|
return;
|
|
}
|
|
|
|
submitButton.disabled = true;
|
|
feedback.className = "mt-4 hidden rounded-xl px-3 py-2 text-sm leading-relaxed";
|
|
feedback.textContent = "";
|
|
|
|
try {
|
|
var response = await fetch("/api/auth/forgot-password", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email: email })
|
|
});
|
|
|
|
if (response.ok) {
|
|
showMessage("ok", i18n.t("msgOk"));
|
|
form.reset();
|
|
form.classList.add("hidden");
|
|
if (introText) introText.classList.add("hidden");
|
|
} else {
|
|
showMessage("error", i18n.t("msgError"));
|
|
}
|
|
} catch (err) {
|
|
showMessage("error", i18n.t("msgError"));
|
|
} finally {
|
|
submitButton.disabled = false;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|