add login and users and all the pizzazz

package.json

···
 		"pug-cli": "^1.0.0-alpha6"
 	},
 	"peerDependencies": {
-		"typescript": "^5.0.0"
+		"typescript": "^5.6.3"
 	},
 	"dependencies": {
-		"express": "^4.19.2",
+		"cookie-parser": "^1.4.7",
+		"express": "^4.21.1",
+		"express-rate-limit": "^7.4.1",
 		"he": "^1.2.0",
+		"jsonwebtoken": "^9.0.2",
 		"pug": "^3.0.3",
 		"timeago.js": "^4.0.2"
 	}

readme.txt

···
 - [x] fix spacing between comments
 - [x] collapse even singular comments
 - [ ] highlights for op, sticky etc.
-- [ ] support 'more comments'
+- [x] support 'more comments'
 - [ ] avoid js to toggle details in views/index.pug
 - [x] set home to sum of subs
 - [x] details tag on safari

src/auth.js

···
+const jwt = require("jsonwebtoken");
+const { JWT_KEY } = require("./");
+
+function authenticateToken(req, res, next) {
+	if (!req.cookies || !req.cookies.auth_token) {
+		return res.redirect("/login");
+	}
+
+	const token = req.cookies.auth_token;
+
+	// If no token, deny access
+	if (!token) {
+		return res.redirect(
+			`/login?redirect=${encodeURIComponent(req.originalUrl)}`,
+		);
+	}
+
+	try {
+		const user = jwt.verify(token, JWT_KEY);
+		req.user = user;
+		next();
+	} catch (error) {
+		res.redirect(`/login?redirect=${encodeURIComponent(req.originalUrl)}`);
+	}
+}
+
+module.exports = { authenticateToken };

src/db.js

···
+const { Database } = require("bun:sqlite");
+const db = new Database("readit.db", {
+	strict: true,
+});
+
+db.query(`
+  CREATE TABLE IF NOT EXISTS users (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    username TEXT UNIQUE,
+    password_hash TEXT
+  )
+`).run();
+
+db.query(`
+  CREATE TABLE IF NOT EXISTS subscriptions (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    user_id INTEGER,
+    subreddit TEXT,
+    FOREIGN KEY(user_id) REFERENCES users(id),
+    UNIQUE(user_id, subreddit)
+  )
+`).run();
+
+module.exports = { db };

src/geddit.js

···
 			include_over_18: true,
 		};
 
-		subreddit = subreddit ? `/r/${subreddit}` : "";
+		const subredditStr = subreddit ? `/r/${subreddit}` : "";
 
 		return await fetch(
 			`${
-				this.host + subreddit
+				this.host + subredditStr
 			}/${sort}.json?${new URLSearchParams(Object.assign(params, options))}`,
 		)
 			.then((res) => res.json())
···
 
 	async searchAll(query, subreddit = null, options = {}) {
 		options.q = query;
-		subreddit = subreddit ? `/r/${subreddit}` : "";
+		const subredditStr = subreddit ? `/r/${subreddit}` : "";
 
 		const params = {
 			limit: 25,
···
 
 		return await fetch(
 			`${
-				this.host + subreddit
+				this.host + subredditStr
 			}/search.json?${new URLSearchParams(Object.assign(params, options))}`,
 		)
 			.then((res) => res.json())

src/index.js

···
 const express = require("express");
+const rateLimit = require("express-rate-limit");
 const path = require("node:path");
 const geddit = require("./geddit.js");
-const { Database } = require("bun:sqlite");
-
-const db = new Database("readit.db");
-
-const createUsers = db.query(`
-  CREATE TABLE IF NOT EXISTS users (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    username TEXT UNIQUE,
-    password_hash TEXT
-  )
-`);
-
-createUsers.run();
-
-const createSubs = db.query(`
-  CREATE TABLE IF NOT EXISTS subscriptions (
-    id INTEGER PRIMARY KEY AUTOINCREMENT,
-    user_id INTEGER,
-    subreddit TEXT,
-    FOREIGN KEY(user_id) REFERENCES users(id),
-    UNIQUE(user_id, subreddit)
-  )
-`);
-
-createSubs.run();
-
-module.exports = { db };
-
+const cookieParser = require("cookie-parser");
 const app = express();
+const hasher = new Bun.CryptoHasher("sha256", "secret-key");
+const JWT_KEY = hasher.update(Math.random().toString()).digest("hex");
+
+module.exports = { JWT_KEY };
 
 app.set("views", path.join(__dirname, "views"));
 app.set("view engine", "pug");
···
 app.use(express.json());
 app.use(express.urlencoded({ extended: true }));
 app.use(express.static(path.join(__dirname, "public")));
+app.use(cookieParser());
+app.use(
+	rateLimit({
+		windowMs: 15 * 60 * 1000,
+		max: 100,
+		message: "Too many requests from this IP, please try again later.",
+		standardHeaders: true,
+		legacyHeaders: false,
+	}),
+);
 app.use("/", routes);
 
 const port = process.env.READIT_PORT;

src/mixins/head.pug

···
-mixin head()
+mixin head(title)
   head
     meta(name="viewport" content="width=device-width, initial-scale=1.0")
     meta(charset='UTF-8')
-    title reddit
+    title #{`readit ${title}`}
     link(rel="stylesheet", href="/styles.css")
     link(rel="preconnect" href="https://rsms.me/")
     link(rel="stylesheet" href="https://rsms.me/inter/inter.css")

src/mixins/header.pug

···
-mixin header()
+mixin header(user)
   div.header
     div.header-item
       a(href=`/`) home
···
       a(href=`/r/popular`) popular
     div.header-item
       a(href=`/subs`) subscriptions
+    if user
+      div.header-item
+        | #{user.username}
+        | 
+        a(href='/logout') (logout)
+    else
+      div.header-item
+        a(href=`/login`) login
 

src/public/styles.css

···
   --link-color: #29BC9B;
   --link-visited-color: #999;
   --accent: var(--link-color);
+  --error-text-color: red;
 
   font-family: Inter, sans-serif;
   font-feature-settings: 'ss01' 1, 'kern' 1, 'liga' 1, 'cv05' 1, 'dlig' 1, 'ss01' 1, 'ss07' 1, 'ss08' 1;
···
     --link-color: #79ffe1;
     --link-visited-color: #999;
     --accent: var(--link-color);
+  --error-text-color: lightcoral;
   }
 }
 
···
 .info-item, .header-item, .footer-item {
   margin-right: 14px;
 }
-
-
+ 
 .media-preview img,
 .media-preview video {
   object-fit: cover;
···
   max-width: 95%;
   padding: 5px;
 }
+ 
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 90%;
+}
 
 @media (min-width: 768px) {
   .post, .comments-container, .hero, .header, .footer {
···
   }
   .post-media {
     max-width: 50%;
+  }
+  form {
+    width: 40%;
   }
 }
 
···
   .post-media {
     max-width: 50%;
   }
+  form {
+    width: 20%;
+  }
 }
 
 @media (min-width: 2560px) {
···
     flex: 1 1 40%;
     width: 40%;
   }
-}
-
-.comments-container, .self-text {
-  text-align: justify;
 }
 
 .comment, .more {
···
 blockquote {
   margin: 0px;
   padding-left: 10px;
-  border-left: 4px solid var(--blockquote-color);
+  border-left: 2px solid var(--blockquote-color);
   color: var(--blockquote-color);
 }
 
···
 }
 
 .gallery-item {
-    flex: 0 0 auto;
-    margin-right: 10px;
+  flex: 0 0 auto;
+  margin-right: 10px;
 }
 
 .gallery img {
···
   color: var(--text-color);
 }
 
-form {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 form label {
   width: 100%;
+  flex-basis: 100%;
   margin: 5px 0;
   color: var(--text-color);
 }
 
 form input[type="submit"] {
-  width: auto;
+  width: 100%;
   padding: 10px 20px;
   margin-top: 20px;
   background-color: var(--link-color);
···
   background-color: var(--link-color);
   opacity: 0.8;
 }
+
+.input-text {
+  width: 100%;
+}
+
+.submit-button {
+  margin: 24px 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+}
+
+.submit-button button {
+  width: 100%;
+  padding: 12px;
+  background-color: var(--accent);
+  color: var(--bg-color);
+}
+
+.register-error-message {
+  flex-flow: row wrap;
+  color: var(--error-text-color);
+}

src/routes/index.js

···
 const he = require("he");
 const { hash, compare } = require("bun");
 const jwt = require("jsonwebtoken");
-const router = express.Router();
-const secretKey = "your_secret_key"; // Replace with your actual secret key
 const geddit = require("../geddit.js");
-const { db } = require("../index");
+const { JWT_KEY } = require("../");
+const { db } = require("../db");
+const { authenticateToken } = require("../auth");
+
+const router = express.Router();
 const G = new geddit.Geddit();
 
 // GET /
-router.get("/", async (req, res) => {
+router.get("/", authenticateToken, async (req, res) => {
 	res.render("home");
 });
 
 // GET /r/:id
-router.get("/r/:subreddit", async (req, res) => {
+router.get("/r/:subreddit", authenticateToken, async (req, res) => {
 	const subreddit = req.params.subreddit;
 	const isMulti = subreddit.includes("+");
 	const query = req.query ? req.query : {};
···
 		query.sort = "hot";
 	}
 
+	let isSubbed = false;
+	if (!isMulti) {
+		isSubbed =
+			db
+				.query(
+					"SELECT * FROM subscriptions WHERE user_id = $id AND subreddit = $subreddit",
+				)
+				.get({ id: req.user.id, subreddit }) !== null;
+	}
 	const postsReq = G.getSubmissions(query.sort, `${subreddit}`, query);
 	const aboutReq = G.getSubreddit(`${subreddit}`);
 
 	const [posts, about] = await Promise.all([postsReq, aboutReq]);
 
-	res.render("index", { subreddit, posts, about, query, isMulti });
+	res.render("index", {
+		subreddit,
+		posts,
+		about,
+		query,
+		isMulti,
+		user: req.user,
+		isSubbed,
+	});
 });
 
 // GET /comments/:id
-router.get("/comments/:id", async (req, res) => {
+router.get("/comments/:id", authenticateToken, async (req, res) => {
 	const id = req.params.id;
 
 	const params = {
···
 	};
 	response = await G.getSubmissionComments(id, params);
 
-	res.render("comments", unescape_submission(response));
+	res.render("comments", {
+		data: unescape_submission(response),
+		user: req.user,
+	});
 });
 
 // GET /comments/:parent_id/comment/:child_id
-router.get("/comments/:parent_id/comment/:child_id", async (req, res) => {
-	const parent_id = req.params.parent_id;
-	const child_id = req.params.child_id;
+router.get(
+	"/comments/:parent_id/comment/:child_id",
+	authenticateToken,
+	async (req, res) => {
+		const parent_id = req.params.parent_id;
+		const child_id = req.params.child_id;
 
-	const params = {
-		limit: 50,
-	};
-	response = await G.getSingleCommentThread(parent_id, child_id, params);
-	const comments = response.comments;
-	comments.forEach(unescape_comment);
-	res.render("single_comment_thread", { comments, parent_id });
-});
-
-router.get("/login", async (req, res) => {
-	res.render("login");
-});
+		const params = {
+			limit: 50,
+		};
+		response = await G.getSingleCommentThread(parent_id, child_id, params);
+		const comments = response.comments;
+		comments.forEach(unescape_comment);
+		res.render("single_comment_thread", {
+			comments,
+			parent_id,
+			user: req.user,
+		});
+	},
+);
 
 // GET /subs
-router.get("/subs", async (req, res) => {
-	res.render("subs");
+router.get("/subs", authenticateToken, async (req, res) => {
+	const subs = db
+		.query("SELECT * FROM subscriptions WHERE user_id = $id")
+		.all({ id: req.user.id });
+	res.render("subs", { subs, user: req.user });
 });
 
 // GET /media
-router.get("/media/*", async (req, res) => {
+router.get("/media/*", authenticateToken, async (req, res) => {
 	const url = req.params[0];
 	const ext = url.split(".").pop().toLowerCase();
 	const kind = ["jpg", "jpeg", "png", "gif", "webp"].includes(ext)
···
 
 router.post("/register", async (req, res) => {
 	const { username, password, confirm_password } = req.body;
-	console.log("Request body:", req.body);
+
 	if (!username || !password || !confirm_password) {
 		return res.status(400).send("All fields are required");
 	}
+
+	const user = db
+		.query("SELECT * FROM users WHERE username = $username")
+		.get({ username });
+	if (user) {
+		return res.render("register", {
+			message: `user by the name "${username}" exists, choose a different username`,
+		});
+	}
+
 	if (password !== confirm_password) {
-		return res.status(400).send("Passwords do not match");
+		return res.render("register", {
+			message: "passwords do not match, try again",
+		});
 	}
+
 	try {
-		const hashedPassword = await hash(password);
-		db.query("INSERT INTO users (username, password_hash) VALUES (?, ?)", [
-			username,
-			hashedPassword,
-		]).run();
-		res.status(201).redirect("/");
+		const hashedPassword = await Bun.password.hash(password);
+		const insertedRecord = db
+			.query(
+				"INSERT INTO users (username, password_hash) VALUES ($username, $hashedPassword)",
+			)
+			.run({
+				username,
+				hashedPassword,
+			});
+		const id = insertedRecord.lastInsertRowid;
+		const token = jwt.sign({ username, id }, JWT_KEY, { expiresIn: "100h" });
+		res
+			.status(200)
+			.cookie("auth_token", token, {
+				httpOnly: true,
+				maxAge: 2 * 24 * 60 * 60 * 1000,
+			})
+			.redirect("/");
 	} catch (err) {
-		console.log(err);
-		res.status(400).send("Error registering user");
+		return res.render("register", {
+			message: "error registering user, try again later",
+		});
 	}
+});
+
+router.get("/login", async (req, res) => {
+	res.render("login", req.query);
 });
 
 // POST /login
 router.post("/login", async (req, res) => {
 	const { username, password } = req.body;
 	const user = db
-		.query("SELECT * FROM users WHERE username = ?", [username])
-		.get();
-	if (user && await compare(password, user.password_hash)) {
-		res.status(200).redirect("/");
+		.query("SELECT * FROM users WHERE username = $username")
+		.get({ username });
+	if (user && (await Bun.password.verify(password, user.password_hash))) {
+		const token = jwt.sign({ username, id: user.id }, JWT_KEY, {
+			expiresIn: "1h",
+		});
+		res
+			.cookie("auth_token", token, {
+				httpOnly: true,
+				maxAge: 2 * 24 * 60 * 60 * 1000,
+			})
+			.redirect(req.query.redirect || "/");
 	} else {
-		res.status(401).send("Invalid credentials");
+		res.render("login", {
+			message: "invalid credentials, try again",
+		});
 	}
 });
 
+// this would be post, but i cant stuff it in a link
+router.get("/logout", (req, res) => {
+	res.clearCookie("auth_token", {
+		httpOnly: true,
+		secure: true,
+	});
+	res.redirect("/login");
+});
+
 // POST /subscribe
-router.post("/subscribe", async (req, res) => {
-	const { username, subreddit } = req.body;
-	const user = db
-		.query("SELECT * FROM users WHERE username = ?", [username])
-		.get();
-	if (user) {
-		const existingSubscription = db
-			.query(
-				"SELECT * FROM subscriptions WHERE user_id = ? AND subreddit = ?",
-				[user.id, subreddit],
-			)
-			.get();
-		if (existingSubscription) {
-			res.status(400).send("Already subscribed to this subreddit");
-		} else {
-			db.query("INSERT INTO subscriptions (user_id, subreddit) VALUES (?, ?)", [
-				user.id,
-				subreddit,
-			]).run();
-			res.status(201).send("Subscribed successfully");
-		}
+router.post("/subscribe", authenticateToken, async (req, res) => {
+	const { subreddit } = req.body;
+	const user = req.user;
+	const existingSubscription = db
+		.query(
+			"SELECT * FROM subscriptions WHERE user_id = $id AND subreddit = $subreddit",
+		)
+		.get({ id: user.id, subreddit });
+	if (existingSubscription) {
+		res.status(400).send("Already subscribed to this subreddit");
 	} else {
-		res.status(404).send("User not found");
+		db.query(
+			"INSERT INTO subscriptions (user_id, subreddit) VALUES ($id, $subreddit)",
+		).run({ id: user.id, subreddit });
+		res.status(201).send("Subscribed successfully");
 	}
 });
 
-router.post("/unsubscribe", async (req, res) => {
-	const { username, subreddit } = req.body;
-	const user = db
-		.query("SELECT * FROM users WHERE username = ?", [username])
-		.get();
-	if (user) {
-		const existingSubscription = db
-			.query(
-				"SELECT * FROM subscriptions WHERE user_id = ? AND subreddit = ?",
-				[user.id, subreddit],
-			)
-			.get();
-		if (existingSubscription) {
-			db.run("DELETE FROM subscriptions WHERE user_id = ? AND subreddit = ?", [
-				user.id,
-				subreddit,
-			]);
-			res.status(200).send("Unsubscribed successfully");
-		} else {
-			res.status(400).send("Subscription not found");
-		}
+router.post("/unsubscribe", authenticateToken, async (req, res) => {
+	const { subreddit } = req.body;
+	const user = req.user;
+	const existingSubscription = db
+		.query(
+			"SELECT * FROM subscriptions WHERE user_id = $id AND subreddit = $subreddit",
+		)
+		.get({ id: user.id, subreddit });
+	if (existingSubscription) {
+		db.query(
+			"DELETE FROM subscriptions WHERE user_id = $id AND subreddit = $subreddit",
+		).run({ id: user.id, subreddit });
+		console.log("done");
+		res.status(200).send("Unsubscribed successfully");
 	} else {
-		res.status(404).send("User not found");
+		console.log("not");
+		res.status(400).send("Subscription not found");
 	}
 });
 

src/views/comments.pug

···
 include ../mixins/head
 include ../utils
 
+- var post = data.post
+- var comments = data.comments
 doctype html
 html
-  +head()
+  +head(post.title)
   script.
     function toggleDetails(details_id) {
       var detailsElement = document.getElementById(details_id);
···
 
   body
     main#content
-      +header()
+      +header(user)
       div.hero
         h3.sub-title
           a(href=`/r/${post.subreddit}`) ← r/#{post.subreddit}
···
                 each item in post.gallery_data.items
                   - var url = `https://i.redd.it/${item.media_id}.jpg`
                   div.gallery-item
+                    div.gallery-item-idx
+                      | #{`${++idx}/${total}`}
                     a(href=`/media/${url}`)
                       img(src=url loading="lazy")
-                    div.gallery-item-idx
-                      | #{`${++idx}/${total}`}
         else if post.post_hint == "image" && post.thumbnail && post.thumbnail != "self" && post.thumbnail != "default"
           img(src=post.url).post-media
         else if post.post_hint == 'hosted:video'

src/views/index.pug

···
   +head("home")
   +subMgmt()
   script(defer).
-    async function updateButton(sub) {
-      var b = document.getElementById("button-container");
-      b.innerHTML = '';
-
-      const button = document.createElement("button");
-
-      if (issub(sub)) {
-         button.innerText = "unsubscribe";
-         button.onclick = async () => await unsubscribe(sub);
-      } else {
-         button.innerText = "subscribe";
-         button.onclick = async () => await subscribe(sub);
-      }
-      b.appendChild(button);
-    }
-
     async function subscribe(sub) {
-      await postSubscription(sub, true);
-      updateButton(sub);
+      await doThing(sub, 'subscribe');
     }
 
     async function unsubscribe(sub) {
-      await postUnsubscription(sub);
-      updateButton(sub);
+      await doThing(sub, 'unsubscribe');
     }
 
-    async function postUnsubscription(sub) {
-      const response = await fetch('/unsubscribe', {
+    function getCookie(name) {
+      const value = `; ${document.cookie}`;
+      const parts = value.split(`; ${name}=`);
+      if (parts.length === 2) return parts.pop().split(";").shift();
+    }
+
+    async function doThing(sub, thing) {
+      const jwtToken = getCookie("auth_token");
+      const response = await fetch(`/${thing}`, {
         method: 'POST',
         headers: {
+          'Authorization': `Bearer ${jwtToken}`,
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({ subreddit: sub }),
       });
 
-      if (!response.ok) {
-        console.error('Failed to update unsubscription');
+      let thinger = document.getElementById('thinger');
+      if (thing == 'subscribe') {
+        thinger.innerText = 'unsubscribe';
+      } else  {
+        thinger.innerText = 'subscribe';
       }
-    }
-      const response = await fetch('/subscribe', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: JSON.stringify({ subreddit: sub, subscribe: subscribe }),
-      });
 
       if (!response.ok) {
-        console.error('Failed to update subscription');
+        console.error(`Failed to do ${thing}`);
       }
     }
 
···
       }
     }
 
-    document.addEventListener('DOMContentLoaded', () => updateButton("#{subreddit}"));
   body
     main#content
       +header(user)
···
                 | r/#{subreddit}
           if !isMulti
             div#button-container
+              if isSubbed
+               button(onclick=`unsubscribe('${subreddit}')`)#thinger unsubscribe
+              else
+               button(onclick=`subscribe('${subreddit}')`)#thinger subscribe
         if about
           p #{about.public_description}
         details

src/views/login.pug

···
+include ../mixins/head
+
+doctype html
+html
+  +head("login")
+  body
+    main#content
+      h1 login
+      if message
+        div.register-error-message
+          | #{message}
+      - var url = redirect ? `/login?redirect=${redirect}` : '/login'
+      form(action=url method="post")
+        div.input-text
+          label(for="username") username
+          input(type="text" name="username" required)
+        div.input-text
+          label(for="password") password
+          input(type="password" name="password" required)
+        div.submit-button
+          button(type="submit") login
+        div
+          p 
+            | don't have an account? 
+            a(href="/register") register
+

src/views/register.pug

···
+include ../mixins/head
+
+doctype html
+html
+  +head("register")
+  body
+    main#content
+      h1 register
+      if message
+        div.register-error-message
+          | #{message}
+      form(action="/register" method="post")
+        div.input-text
+          label(for="username") username
+          input(type="text" name="username" required)
+        div.input-text
+          label(for="password") password
+          input(type="password" name="password" required)
+        div.input-text
+          label(for="confirm_password") confirm password
+          input(type="password" name="confirm_password" required)
+        div.submit-button
+          button(type="submit") register
+        div
+          p 
+            | already have an account? 
+            a(href="/login") login
+

src/views/single_comment_thread.pug

···
 
 doctype html
 html
-  +head()
+  +head("more comments")
   body
     main#content
       +header()

src/views/subs.pug

···
 
 doctype html
 html
-  +head()
+  +head("subscriptions")
   +subMgmt()
   script.
     function newSubItem(sub) {
···
     document.addEventListener('DOMContentLoaded', buildSubList);
   body
     main#content
-      +header()
+      +header(user)
       div.hero
         h1 subscriptions
-        div#subList
+        p
+          each s in subs 
+            a(href=`/r/${s.subreddit}`) 
+              | r/#{s.subreddit}
+            br