move to generalized auth instead of login register page

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;
 }
@@ -111,7 +111,7 @@
 	white-space: nowrap;
 }
 
-.login-form button {
+.auth-form button {
 	margin-top: 1rem;
 	width: 100%;
 }
@@ -169,22 +169,22 @@
 	}
 }
 
-.register-link {
+.auth-link {
 	color: #57f287;
 	text-decoration: none;
 	font-weight: bold;
 }
 
-.register-link:hover {
+.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;
 	}
 }

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 email = emailInput?.value.trim();
-		const password = document.getElementById("password").value;
+		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: {
+				headers: { "Content-Type": "application/json" },
-					"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 {
+				if (errorMessage) {
 					errorMessage.style.display = "block";
 					errorMessage.textContent =
 						data.error ||
 						"Invalid email or password. Please try again.";
 				}
+			}
 		} catch (error) {
 			console.error("Login error:", error);
+			if (errorMessage) {
 				errorMessage.style.display = "block";
-			errorMessage.textContent = "An error occurred. Please try again.";
+				errorMessage.textContent =
+					"An error occurred. Please try again.";
+			}
 		}
 	});
 }

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<Response> {
+	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 };

src/views/auth/login.ejs

@@ -2,58 +2,22 @@
 <html lang="en">
 
 <head>
-	<%- include("../global", { styles: ["auth/login"], scripts: ["auth/login"] }) %>
+	<%- include("../global", { styles: ["auth"], scripts: ["auth"] }) %>
 </head>
 
 <body>
-	<div class="login-container">
+	<div class="auth-container">
-		<div class="login-logo">
+		<div class="auth-logo">
-			<h1>
+			<h1><%= instance_name %></h1>
-				<%= instance_name %>
-			</h1>
 			<p>Sign in to your account</p>
 		</div>
 
-		<div class="login-card">
+		<div class="auth-card">
-			<div class="login-header">
+			<div class="auth-header">
 				<h2>Welcome Back</h2>
 			</div>
 
-			<div class="login-form">
+			<%- include("../partials/authForm", { pageType: "login" }) %>
-				<div class="error-message" id="error-message">
-					Invalid email or password. Please try again.
-				</div>
-
-				<form id="login-form">
-					<div class="form-group">
-						<label for="email">Email</label>
-						<input type="email" name="email" id="email" required placeholder="Enter your email">
-					</div>
-
-					<div class="form-group password-group">
-						<label for="password">Password</label>
-						<div class="password-wrapper">
-							<input type="password" name="password" id="password" required placeholder="Enter your password">
-							<svg id="toggle-password" class="toggle-password" viewBox="0 0 24 24">
-								<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 13c-3.03 0-5.5-2.47-5.5-5.5s2.47-5.5 5.5-5.5 5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm0-9a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/>
-							</svg>
-						</div>
-					</div>
-
-					<div class="form-footer">
-						<label>
-							<input type="checkbox" name="remember" id="remember">Remember me
-						</label>
-						<a href="/auth/forgot-password">Forgot password?</a>
-					</div>
-
-					<button type="submit">Login</button>
-				</form>
-
-				<div class="login-register">
-					<p>Don't have an account? <a href="/auth/register" class="register-link">Register</a></p>
-				</div>
-			</div>
 		</div>
 	</div>
 </body>

src/views/auth/register.ejs

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<%- include("../global", { styles: ["auth"], scripts: ["auth"] }) %>
+</head>
+
+<body>
+	<div class="auth-container">
+		<div class="auth-logo">
+			<h1><%= instance_name %></h1>
+			<p>Create your account</p>
+		</div>
+
+		<div class="auth-card">
+			<div class="auth-header">
+				<h2>Join Us</h2>
+			</div>
+
+			<%- include("../partials/authForm", { pageType: "register" }) %>
+		</div>
+	</div>
+</body>
+
+</html>

src/views/partials/authForm.ejs

@@ -0,0 +1,49 @@
+<div class="auth-form">
+	<div class="error-message" id="error-message">
+		<%= pageType === "register" ? "Registration failed. Please try again." : "Invalid email or password. Please try again." %>
+	</div>
+
+	<form id="<%= pageType === "register" ? "register-form" : "login-form" %>" class="form">
+		<% if (pageType === "register") { %>
+			<div class="form-group">
+				<label for="username">Username</label>
+				<input type="text" name="username" id="username" required placeholder="Enter your username">
+			</div>
+		<% } %>
+
+		<div class="form-group">
+			<label for="email">Email</label>
+			<input type="email" name="email" id="email" required placeholder="Enter your email">
+		</div>
+
+		<div class="form-group password-group">
+			<label for="password">Password</label>
+			<div class="password-wrapper">
+				<input type="password" name="password" id="password" required placeholder="Enter your password">
+				<svg id="toggle-password" class="toggle-password" viewBox="0 0 24 24">
+					<path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zm0 13c-3.03 0-5.5-2.47-5.5-5.5s2.47-5.5 5.5-5.5 5.5 2.47 5.5 5.5-2.47 5.5-5.5 5.5zm0-9a3.5 3.5 0 100 7 3.5 3.5 0 000-7z"/>
+				</svg>
+			</div>
+		</div>
+
+		<% if (pageType !== "register") { %>
+			<div class="form-footer">
+				<label>
+					<input type="checkbox" name="remember" id="remember-me">Remember me
+				</label>
+				<a href="/auth/forgot-password">Forgot password?</a>
+			</div>
+		<% } %>
+
+		<button type="submit"><%= pageType === "register" ? "Register" : "Login" %></button>
+	</form>
+
+	<div class="auth-toggle">
+		<p>
+			<%= pageType === "register" ? "Already have an account?" : "Don't have an account?" %>
+			<a href="<%= pageType === 'register' ? '/auth/login' : '/auth/register' %>" class="auth-link">
+				<%= pageType === "register" ? "Login" : "Register" %>
+			</a>
+		</p>
+	</div>
+</div>