Added Login + Register Frontend and Authorization

gambling.js

@@ -2,15 +2,17 @@ const express = require("express");
 const app = express();
 const swaggerUi = require("swagger-ui-express");
 const swaggerDocument = require("./swagger.json");
-
 const path = require("path");
+app.use(express.static(path.join(__dirname, "public")));
 const fs = require("fs");
 const dotenv = require("dotenv").config();
 const jwt = require("jsonwebtoken");
+const cookieParser = require("cookie-parser");
 const port = 3000;
 
 app.use(express.json());
 app.use("/swagger-ui", swaggerUi.serve, swaggerUi.setup(swaggerDocument));
+app.use(cookieParser());
 
 function get_data() {
     const dataPath = path.join(__dirname, "data.json");
@@ -39,9 +41,9 @@ function authenticateToken(request, response, next) {
     /* #swagger.security = [{
         "bearerAuth": []
 }] */
-    const authHeader = request.headers.authorization;
-    console.log(authHeader);
-    const token = authHeader && authHeader.split(" ")[1];
+    const token =
+        request.headers.authorization?.split(" ")[1] ||
+        request.cookies.authorization;
 
     if (token == null) return response.sendStatus(401);
 
@@ -76,6 +78,9 @@ app.post("/register", (request, response) => {
     response.json({ username, token });
 });
 
+app.get("/login", (request, response) => {
+    response.sendFile(path.join(__dirname, ".\\public\\login.html"));
+})
 app.post("/login", (request, response) => {
     const { username, password } = request.body;
     if (!username && !password)

package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "cookie-parser": "^1.4.7",
     "dotenv": "^16.5.0",
     "express": "^5.1.0",
     "jsonwebtoken": "^9.0.2",

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