105 lines
7.2 KiB
HTML
105 lines
7.2 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 | Login</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">Login</h1>
|
|
<p class="mb-4 text-sm text-zinc-700" data-i18n="subtitle">Access your Bag Exchange account.</p>
|
|
|
|
<form class="grid gap-3" id="login-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" />
|
|
<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="password" type="password" required data-i18n-placeholder="passwordPlaceholder" placeholder="Password" />
|
|
<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">Log in</button>
|
|
</form>
|
|
|
|
<p class="mt-3 text-sm"><a class="text-emerald-900 underline decoration-1 underline-offset-2" href="/forgot-password" data-lang-link data-i18n="forgotLink">Forgot your password?</a></p>
|
|
<p class="mt-1 text-sm"><a class="text-emerald-900 underline decoration-1 underline-offset-2" href="/signup" data-lang-link data-i18n="signupLink">Create an account</a></p>
|
|
<p class="mt-1 text-sm"><a class="text-emerald-900 underline decoration-1 underline-offset-2" href="/" data-lang-link data-i18n="homeLink">Back to homepage</a></p>
|
|
|
|
<div class="mt-4 hidden rounded-xl px-3 py-2 text-sm leading-relaxed" id="feedback"></div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="/static/js/simple_i18n.js"></script>
|
|
<script>
|
|
var i18n = window.initPageI18n({
|
|
en: { pageTitle: "Bag Exchange | Login", title: "Login", subtitle: "Access your Bag Exchange account.", emailPlaceholder: "Your email", passwordPlaceholder: "Password", submit: "Log in", forgotLink: "Forgot your password?", signupLink: "Create an account", homeLink: "Back to homepage", msgInvalid: "Invalid email or password.", msgNotVerified: "Email not verified. Check your inbox or request a new verification email.", msgError: "Unable to log in. Try again." },
|
|
it: { pageTitle: "Bag Exchange | Accesso", title: "Accedi", subtitle: "Accedi al tuo account Bag Exchange.", emailPlaceholder: "La tua email", passwordPlaceholder: "Password", submit: "Accedi", forgotLink: "Hai dimenticato la password?", signupLink: "Crea un account", homeLink: "Torna alla home", msgInvalid: "Email o password non validi.", msgNotVerified: "Email non verificata. Controlla la tua casella o richiedi un nuovo link di verifica.", msgError: "Impossibile effettuare il login. Riprova." },
|
|
fr: { pageTitle: "Bag Exchange | Connexion", title: "Connexion", subtitle: "Accedez a votre compte Bag Exchange.", emailPlaceholder: "Votre email", passwordPlaceholder: "Mot de passe", submit: "Connexion", forgotLink: "Mot de passe oublie ?", signupLink: "Creer un compte", homeLink: "Retour a l'accueil", msgInvalid: "Email ou mot de passe invalide.", msgNotVerified: "Email non verifie. Verifiez votre boite de reception ou demandez un nouveau lien.", msgError: "Connexion impossible. Veuillez reessayer." },
|
|
de: { pageTitle: "Bag Exchange | Login", title: "Anmelden", subtitle: "Melde dich bei deinem Bag Exchange Konto an.", emailPlaceholder: "Deine E-Mail", passwordPlaceholder: "Passwort", submit: "Anmelden", forgotLink: "Passwort vergessen?", signupLink: "Konto erstellen", homeLink: "Zur Startseite", msgInvalid: "Ungueltige E-Mail oder Passwort.", msgNotVerified: "E-Mail nicht verifiziert. Bitte pruefe dein Postfach oder fordere einen neuen Link an.", msgError: "Anmeldung nicht moeglich. Bitte erneut versuchen." },
|
|
es: { pageTitle: "Bag Exchange | Inicio de sesion", title: "Iniciar sesion", subtitle: "Accede a tu cuenta de Bag Exchange.", emailPlaceholder: "Tu email", passwordPlaceholder: "Contrasena", submit: "Iniciar sesion", forgotLink: "Has olvidado tu contrasena?", signupLink: "Crear una cuenta", homeLink: "Volver al inicio", msgInvalid: "Email o contrasena no validos.", msgNotVerified: "Email no verificado. Revisa tu bandeja o solicita un nuevo enlace.", msgError: "No se pudo iniciar sesion. Intentalo de nuevo." }
|
|
});
|
|
|
|
(function () {
|
|
var form = document.getElementById("login-form");
|
|
var emailInput = document.getElementById("email");
|
|
var passwordInput = document.getElementById("password");
|
|
var submitButton = document.getElementById("submit-btn");
|
|
var feedback = document.getElementById("feedback");
|
|
|
|
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();
|
|
var password = passwordInput.value;
|
|
|
|
if (!email || !emailInput.checkValidity() || !password) {
|
|
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/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email: email, password: password })
|
|
});
|
|
var payload = {};
|
|
try { payload = await response.json(); } catch (e) {}
|
|
|
|
if (response.ok) {
|
|
window.location.href = "/welcome?lang=" + encodeURIComponent(i18n.getLanguage());
|
|
} else if (payload.error === "email_not_verified") {
|
|
showMessage("error", i18n.t("msgNotVerified"));
|
|
} else {
|
|
showMessage("error", i18n.t("msgInvalid"));
|
|
}
|
|
} catch (err) {
|
|
showMessage("error", i18n.t("msgError"));
|
|
} finally {
|
|
submitButton.disabled = false;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|