121 lines
9.1 KiB
HTML
121 lines
9.1 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 | Sign Up</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">Create account</h1>
|
|
<p class="mb-4 text-sm text-zinc-700" data-i18n="subtitle">Join Bag Exchange and verify your email to activate access.</p>
|
|
|
|
<form class="grid gap-3" id="signup-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" minlength="8" required data-i18n-placeholder="passwordPlaceholder" placeholder="Password" />
|
|
<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="confirm-password" type="password" minlength="8" required data-i18n-placeholder="confirmPlaceholder" placeholder="Confirm 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">Create account</button>
|
|
</form>
|
|
|
|
<p class="mt-3 text-sm"><a class="text-emerald-900 underline decoration-1 underline-offset-2" href="/login" data-lang-link data-i18n="loginLink">Already have an account? Log in</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 | Sign Up", title: "Create account", subtitle: "Join Bag Exchange and verify your email to activate access.", emailPlaceholder: "Your email", passwordPlaceholder: "Password", confirmPlaceholder: "Confirm password", submit: "Create account", loginLink: "Already have an account? Log in", homeLink: "Back to homepage", msgInvalidEmail: "Please enter a valid email address.", msgMismatch: "Passwords do not match.", msgWeak: "Use at least 8 characters with letters and numbers.", msgExists: "This email is already registered.", msgGeneric: "Unable to create account. Try again.", msgSuccess: "Account created. Check your email to verify your account before login." },
|
|
it: { pageTitle: "Bag Exchange | Registrazione", title: "Crea account", subtitle: "Unisciti a Bag Exchange e verifica la tua email per attivare l'accesso.", emailPlaceholder: "La tua email", passwordPlaceholder: "Password", confirmPlaceholder: "Conferma password", submit: "Crea account", loginLink: "Hai gia un account? Accedi", homeLink: "Torna alla home", msgInvalidEmail: "Inserisci un indirizzo email valido.", msgMismatch: "Le password non coincidono.", msgWeak: "Usa almeno 8 caratteri con lettere e numeri.", msgExists: "Questa email e gia registrata.", msgGeneric: "Impossibile creare l'account. Riprova.", msgSuccess: "Account creato. Controlla la tua email per verificare l'account prima del login." },
|
|
fr: { pageTitle: "Bag Exchange | Inscription", title: "Creer un compte", subtitle: "Rejoignez Bag Exchange et verifiez votre email pour activer l'acces.", emailPlaceholder: "Votre email", passwordPlaceholder: "Mot de passe", confirmPlaceholder: "Confirmer le mot de passe", submit: "Creer un compte", loginLink: "Vous avez deja un compte ? Connectez-vous", homeLink: "Retour a l'accueil", msgInvalidEmail: "Veuillez entrer une adresse email valide.", msgMismatch: "Les mots de passe ne correspondent pas.", msgWeak: "Utilisez au moins 8 caracteres avec lettres et chiffres.", msgExists: "Cet email est deja enregistre.", msgGeneric: "Impossible de creer le compte. Veuillez reessayer.", msgSuccess: "Compte cree. Verifiez votre email avant de vous connecter." },
|
|
de: { pageTitle: "Bag Exchange | Registrierung", title: "Konto erstellen", subtitle: "Tritt Bag Exchange bei und bestaetige deine E-Mail, um den Zugang zu aktivieren.", emailPlaceholder: "Deine E-Mail", passwordPlaceholder: "Passwort", confirmPlaceholder: "Passwort bestaetigen", submit: "Konto erstellen", loginLink: "Schon ein Konto? Anmelden", homeLink: "Zur Startseite", msgInvalidEmail: "Bitte gib eine gueltige E-Mail-Adresse ein.", msgMismatch: "Die Passwoerter stimmen nicht ueberein.", msgWeak: "Mindestens 8 Zeichen mit Buchstaben und Zahlen verwenden.", msgExists: "Diese E-Mail ist bereits registriert.", msgGeneric: "Konto konnte nicht erstellt werden. Bitte erneut versuchen.", msgSuccess: "Konto erstellt. Bitte bestaetige deine E-Mail vor dem Login." },
|
|
es: { pageTitle: "Bag Exchange | Registro", title: "Crear cuenta", subtitle: "Unete a Bag Exchange y verifica tu email para activar el acceso.", emailPlaceholder: "Tu email", passwordPlaceholder: "Contrasena", confirmPlaceholder: "Confirmar contrasena", submit: "Crear cuenta", loginLink: "Ya tienes cuenta? Inicia sesion", homeLink: "Volver al inicio", msgInvalidEmail: "Introduce un correo electronico valido.", msgMismatch: "Las contrasenas no coinciden.", msgWeak: "Usa al menos 8 caracteres con letras y numeros.", msgExists: "Este email ya esta registrado.", msgGeneric: "No se pudo crear la cuenta. Intentalo de nuevo.", msgSuccess: "Cuenta creada. Revisa tu email para verificar la cuenta antes de iniciar sesion." }
|
|
});
|
|
|
|
(function () {
|
|
var form = document.getElementById("signup-form");
|
|
var emailInput = document.getElementById("email");
|
|
var passwordInput = document.getElementById("password");
|
|
var confirmInput = document.getElementById("confirm-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;
|
|
var confirmPassword = confirmInput.value;
|
|
|
|
if (!email || !emailInput.checkValidity()) {
|
|
showMessage("error", i18n.t("msgInvalidEmail"));
|
|
return;
|
|
}
|
|
if (password !== confirmPassword) {
|
|
showMessage("error", i18n.t("msgMismatch"));
|
|
return;
|
|
}
|
|
if (password.length < 8) {
|
|
showMessage("error", i18n.t("msgWeak"));
|
|
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/register", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email: email, password: password, confirmPassword: confirmPassword })
|
|
});
|
|
var payload = {};
|
|
try { payload = await response.json(); } catch (e) {}
|
|
|
|
if (response.ok) {
|
|
form.classList.add("hidden");
|
|
showMessage("ok", i18n.t("msgSuccess"));
|
|
} else if (payload.error === "email_exists") {
|
|
showMessage("error", i18n.t("msgExists"));
|
|
} else if (payload.error === "password_too_weak") {
|
|
showMessage("error", i18n.t("msgWeak"));
|
|
} else if (payload.error === "password_mismatch") {
|
|
showMessage("error", i18n.t("msgMismatch"));
|
|
} else {
|
|
showMessage("error", i18n.t("msgGeneric"));
|
|
}
|
|
} catch (err) {
|
|
showMessage("error", i18n.t("msgGeneric"));
|
|
} finally {
|
|
submitButton.disabled = false;
|
|
}
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|