Added Login + Register Frontend and Authorization

public/frontend.js

@@ -0,0 +1,45 @@
+const TokenHeader = new Headers();
+document.addEventListener("DOMContentLoaded", () => {
+    const form = document.querySelector("form");
+
+    form.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const username = form.username.value;
+        const password = form.password.value;
+        const credentials = {username, password};
+
+        try {
+            const loginRes = await fetch("/login", {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify(credentials),
+            });
+
+            if (loginRes.ok) {
+                const loginData = await loginRes.json();
+                alert(`Welcome back, ${loginData.username}!`);
+                document.cookie = `authorization=${loginData.token}`
+                return;
+            }
+
+            const registerRes = await fetch("/register", {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                body: JSON.stringify(credentials),
+            });
+
+            if (registerRes.ok) {
+                const registerData = await registerRes.json();
+                alert(`Account created! Welcome, ${registerData.username}`);
+                document.cookie = `authorization=${registerData.token}`
+            } else {
+                const error = await registerRes.json();
+                alert("Register failed: " + (error.error || "Unknown error"));
+            }
+        } catch (err) {
+            console.error("Network error:", err);
+            alert("Server unreachable.");
+        }
+    });
+});

public/login.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Login</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+<form method="post" action="/login">
+  <input type="text" name="username" placeholder="Username">
+  <input type="password" name="password" placeholder="Password">
+  <button type="submit">Login</button>
+</form>
+</body>
+<script src="frontend.js"></script>
+</html>

public/nogger.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>I am a Nogger Glace</title>
+</head>
+<body>
+
+</body>
+</html>

public/styles.css

@@ -0,0 +1,54 @@
+body {
+    background: radial-gradient(circle at top, #111, #000);
+    color: #fff;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+}
+
+form {
+    background: rgba(0, 0, 0, 0.85);
+    border: 2px solid #0f0;
+    border-radius: 12px;
+    padding: 40px 30px;
+    box-shadow: 0 0 15px rgba(0, 255, 0, 0.3), 0 0 5px rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    width: 300px;
+}
+
+input {
+    padding: 12px 15px;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    background: #222;
+    color: white;
+    outline: none;
+    box-shadow: inset 0 0 5px #0f0;
+    transition: 0.2s ease-in-out;
+}
+
+input:focus {
+    box-shadow: inset 0 0 10px #0f0, 0 0 5px #0f0;
+}
+
+button {
+    padding: 12px;
+    background: #06d429;
+    color: #000;
+    border: none;
+    border-radius: 8px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background 0.2s ease-in-out;
+    font-size: 16px;
+}
+
+button:hover {
+    background: #1f1;
+}