From 99f170750c4ea95ff1541363483a5ae2de939632 Mon Sep 17 00:00:00 2001 From: creations Date: Wed, 19 Mar 2025 01:04:49 -0400 Subject: [PATCH] move to generalized auth instead of login register page --- public/css/{auth/login.css => auth.css} | 78 ++++++++++++------------- public/js/{auth/login.js => auth.js} | 46 +++++++++++---- src/routes/auth/register.ts | 24 ++++++++ src/views/auth/login.ejs | 50 +++------------- src/views/auth/register.ejs | 25 ++++++++ src/views/partials/authForm.ejs | 49 ++++++++++++++++ 6 files changed, 179 insertions(+), 93 deletions(-) rename public/css/{auth/login.css => auth.css} (72%) rename public/js/{auth/login.js => auth.js} (59%) create mode 100644 src/routes/auth/register.ts create mode 100644 src/views/auth/register.ejs create mode 100644 src/views/partials/authForm.ejs diff --git a/public/css/auth/login.css b/public/css/auth.css similarity index 72% rename from public/css/auth/login.css rename to public/css/auth.css index ae96ca0..bfb37f7 100644 --- a/public/css/auth/login.css +++ b/public/css/auth.css @@ -24,7 +24,7 @@ justify-content: center; } -.login-container { +.auth-container { display: flex; justify-content: center; align-items: center; @@ -33,24 +33,24 @@ background: linear-gradient(135deg, rgba(31 30 30 / 90%) 0%, rgba(45 45 45 / 90%) 100%); } -.login-logo { +.auth-logo { margin-bottom: 2rem; text-align: center; } -.login-logo h1 { +.auth-logo h1 { font-size: 2.5rem; font-weight: bold; color: var(--text); margin: 0; } -.login-logo p { +.auth-logo p { color: var(--text-secondary); margin-top: 0.5rem; } -.login-card { +.auth-card { width: 100%; max-width: 400px; border-radius: 8px; @@ -60,29 +60,29 @@ animation: fade-in 0.5s ease; } -.login-header { +.auth-header { padding: 1.5rem; background-color: rgba(0 0 0 / 10%); text-align: center; } -.login-header h2 { +.auth-header h2 { margin: 0; color: var(--text); font-size: 1.5rem; } -.login-form { +.auth-form { padding: 1.5rem; } -.login-form form { +.auth-form form { display: flex; flex-direction: column; width: 100%; } -.login-register { +.auth-toggle { text-align: center; margin-top: 1.5rem; } @@ -105,46 +105,46 @@ } .form-footer label { - display: flex; - align-items: center; - gap: 0.25rem; - white-space: nowrap; + display: flex; + align-items: center; + gap: 0.25rem; + white-space: nowrap; } -.login-form button { +.auth-form button { margin-top: 1rem; width: 100%; } .password-group { - position: relative; - width: 100%; + position: relative; + width: 100%; } .password-wrapper { - position: relative; - width: 100%; + position: relative; + width: 100%; } .password-wrapper input { - width: 100%; - padding-right: 2rem; + width: 100%; + padding-right: 2rem; } .toggle-password { - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - cursor: pointer; - width: 20px; - height: 20px; - fill: var(--text-secondary); - transition: fill 0.2s; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + cursor: pointer; + width: 20px; + height: 20px; + fill: var(--text-secondary); + transition: fill 0.2s; } .toggle-password:hover { - fill: var(--accent); + fill: var(--accent); } .error-message { @@ -169,22 +169,22 @@ } } -.register-link { - color: #57f287; - text-decoration: none; - font-weight: bold; +.auth-link { + color: #57f287; + text-decoration: none; + font-weight: bold; } -.register-link:hover { - text-decoration: underline; +.auth-link:hover { + text-decoration: underline; } @media (width <= 480px) { - .login-card { + .auth-card { max-width: 100%; } - .login-logo h1 { + .auth-logo h1 { font-size: 2rem; } } diff --git a/public/js/auth/login.js b/public/js/auth.js similarity index 59% rename from public/js/auth/login.js rename to public/js/auth.js index b107efe..5f81984 100644 --- a/public/js/auth/login.js +++ b/public/js/auth.js @@ -1,19 +1,38 @@ const loginForm = document.getElementById("login-form"); const errorMessage = document.getElementById("error-message"); +const rememberMe = document.getElementById("remember-me"); +const emailInput = document.getElementById("email"); + +if (emailInput && localStorage.getItem("email")) { + emailInput.value = localStorage.getItem("email"); +} if (loginForm) { loginForm.addEventListener("submit", async (e) => { e.preventDefault(); - const email = document.getElementById("email").value; - const password = document.getElementById("password").value; + const email = emailInput?.value.trim(); + const password = document.getElementById("password")?.value.trim(); + + if (!email || !password) { + if (errorMessage) { + errorMessage.style.display = "block"; + errorMessage.textContent = + "Please enter both email and password."; + } + return; + } + + if (rememberMe?.checked) { + localStorage.setItem("email", email); + } else { + sessionStorage.setItem("email", email); + } try { const response = await fetch("/api/auth/login", { method: "POST", - headers: { - "Content-Type": "application/json", - }, + headers: { "Content-Type": "application/json" }, credentials: "same-origin", body: JSON.stringify({ email, password }), }); @@ -23,15 +42,20 @@ if (loginForm) { if (data.success) { window.location.href = "/"; } else { - errorMessage.style.display = "block"; - errorMessage.textContent = - data.error || - "Invalid email or password. Please try again."; + if (errorMessage) { + errorMessage.style.display = "block"; + errorMessage.textContent = + data.error || + "Invalid email or password. Please try again."; + } } } catch (error) { console.error("Login error:", error); - errorMessage.style.display = "block"; - errorMessage.textContent = "An error occurred. Please try again."; + if (errorMessage) { + errorMessage.style.display = "block"; + errorMessage.textContent = + "An error occurred. Please try again."; + } } }); } diff --git a/src/routes/auth/register.ts b/src/routes/auth/register.ts new file mode 100644 index 0000000..072f127 --- /dev/null +++ b/src/routes/auth/register.ts @@ -0,0 +1,24 @@ +import { getSetting } from "@config/sql/settings"; +import { renderEjsTemplate } from "@helpers/ejs"; + +const routeDef: RouteDef = { + method: "GET", + accepts: "*/*", + returns: "text/html", +}; + +async function handler(request: ExtendedRequest): Promise { + if (request.session) return Response.redirect("/"); + + const instanceName: string = + (await getSetting("instance_name")) || "Unnamed Instance"; + + const ejsTemplateData: EjsTemplateData = { + title: `Register - ${instanceName}`, + instance_name: instanceName, + }; + + return await renderEjsTemplate("auth/register", ejsTemplateData); +} + +export { handler, routeDef }; diff --git a/src/views/auth/login.ejs b/src/views/auth/login.ejs index 7776779..2715879 100644 --- a/src/views/auth/login.ejs +++ b/src/views/auth/login.ejs @@ -2,58 +2,22 @@ - <%- include("../global", { styles: ["auth/login"], scripts: ["auth/login"] }) %> + <%- include("../global", { styles: ["auth"], scripts: ["auth"] }) %> -