14 files changed, 366 insertions, 178 deletions

diff --git a/src/auth.js b/src/auth.js
new file mode 100644
index 0000000..f907e6c
--- /dev/null
+++ b/src/auth.js
@@ -0,0 +1,27 @@
+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 };
diff --git a/src/db.js b/src/db.js
new file mode 100644
index 0000000..24bba3d
--- /dev/null
+++ b/src/db.js
@@ -0,0 +1,24 @@
+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 };
diff --git a/src/geddit.js b/src/geddit.js
index 3231b5e..aee7703 100644
--- a/src/geddit.js
+++ b/src/geddit.js
@@ -18,11 +18,11 @@ class Geddit {
                         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())
@@ -300,7 +300,7 @@ class Geddit {
 
         async searchAll(query, subreddit = null, options = {}) {
                 options.q = query;
-                subreddit = subreddit ? `/r/${subreddit}` : "";
+                const subredditStr = subreddit ? `/r/${subreddit}` : "";
 
                 const params = {
                         limit: 25,
@@ -310,7 +310,7 @@ class Geddit {
 
                 return await fetch(
                         `${
-                                this.host + subreddit
+                                this.host + subredditStr
                         }/search.json?${new URLSearchParams(Object.assign(params, options))}`,
                 )
                         .then((res) => res.json())
diff --git a/src/index.js b/src/index.js
index 6885ee5..6296534 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,35 +1,13 @@
 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");
@@ -38,6 +16,16 @@ const routes = require("./routes/index");
 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;
diff --git a/src/mixins/head.pug b/src/mixins/head.pug
index f7c1baf..b95f661 100644
--- a/src/mixins/head.pug
+++ b/src/mixins/head.pug
@@ -1,8 +1,8 @@
-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")
diff --git a/src/mixins/header.pug b/src/mixins/header.pug
index f4b85e0..02a8667 100644
--- a/src/mixins/header.pug
+++ b/src/mixins/header.pug
@@ -1,4 +1,4 @@
-mixin header()
+mixin header(user)
   div.header
     div.header-item
       a(href=`/`) home
@@ -8,4 +8,12 @@ mixin header()
       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
 
diff --git a/src/public/styles.css b/src/public/styles.css
index b753bd8..0a0a2e2 100644
--- a/src/public/styles.css
+++ b/src/public/styles.css
@@ -8,6 +8,7 @@
   --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;
@@ -24,6 +25,7 @@
     --link-color: #79ffe1;
     --link-visited-color: #999;
     --accent: var(--link-color);
+  --error-text-color: lightcoral;
   }
 }
 
@@ -156,8 +158,7 @@ summary::before {
 .info-item, .header-item, .footer-item {
   margin-right: 14px;
 }
-
-
+ 
 .media-preview img,
 .media-preview video {
   object-fit: cover;
@@ -185,6 +186,13 @@ summary::before {
   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 {
@@ -203,6 +211,9 @@ summary::before {
   .post-media {
     max-width: 50%;
   }
+  form {
+    width: 40%;
+  }
 }
 
 @media (min-width: 1080px) {
@@ -226,6 +237,9 @@ summary::before {
   .post-media {
     max-width: 50%;
   }
+  form {
+    width: 20%;
+  }
 }
 
 @media (min-width: 2560px) {
@@ -235,10 +249,6 @@ summary::before {
   }
 }
 
-.comments-container, .self-text {
-  text-align: justify;
-}
-
 .comment, .more {
   width: 100%;
   border-left: 1px dashed var(--text-color-muted);
@@ -320,7 +330,7 @@ hr {
 blockquote {
   margin: 0px;
   padding-left: 10px;
-  border-left: 4px solid var(--blockquote-color);
+  border-left: 2px solid var(--blockquote-color);
   color: var(--blockquote-color);
 }
 
@@ -400,8 +410,8 @@ a {
 }
 
 .gallery-item {
-    flex: 0 0 auto;
-    margin-right: 10px;
+  flex: 0 0 auto;
+  margin-right: 10px;
 }
 
 .gallery img {
@@ -439,20 +449,15 @@ textarea {
   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);
@@ -466,3 +471,27 @@ form input[type="submit"]:hover {
   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);
+}
diff --git a/src/routes/index.js b/src/routes/index.js
index d517ba2..7e68636 100644
--- a/src/routes/index.js
+++ b/src/routes/index.js
@@ -2,19 +2,21 @@ const express = require("express");
 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 : {};
@@ -22,16 +24,33 @@ router.get("/r/:subreddit", async (req, res) => {
                 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 = {
@@ -39,34 +58,44 @@ router.get("/comments/:id", async (req, res) => {
         };
         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)
@@ -81,89 +110,124 @@ router.get("/register", async (req, res) => {
 
 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");
         }
 });
 
diff --git a/src/views/comments.pug b/src/views/comments.pug
index a7dd396..541a7bd 100644
--- a/src/views/comments.pug
+++ b/src/views/comments.pug
@@ -3,9 +3,11 @@ include ../mixins/header
 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);
@@ -16,7 +18,7 @@ html
 
   body
     main#content
-      +header()
+      +header(user)
       div.hero
         h3.sub-title
           a(href=`/r/${post.subreddit}`) ← r/#{post.subreddit}
@@ -40,10 +42,10 @@ html
                 each item in post.gallery_data.items
                   - var url = `https://i.redd.it/${item.media_id}.jpg`
                   div.gallery-item
-                    a(href=`/media/${url}`)
-                      img(src=url loading="lazy")
                     div.gallery-item-idx
                       | #{`${++idx}/${total}`}
+                    a(href=`/media/${url}`)
+                      img(src=url loading="lazy")
         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'
diff --git a/src/views/index.pug b/src/views/index.pug
index 513491d..6eedfe3 100644
--- a/src/views/index.pug
+++ b/src/views/index.pug
@@ -9,55 +9,40 @@ html
   +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');
+    }
+
+    function getCookie(name) {
+      const value = `; ${document.cookie}`;
+      const parts = value.split(`; ${name}=`);
+      if (parts.length === 2) return parts.pop().split(";").shift();
     }
 
-    async function postUnsubscription(sub) {
-      const response = await fetch('/unsubscribe', {
+    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}`);
       }
     }
 
@@ -68,7 +53,6 @@ html
       }
     }
 
-    document.addEventListener('DOMContentLoaded', () => updateButton("#{subreddit}"));
   body
     main#content
       +header(user)
@@ -82,6 +66,10 @@ html
                 | 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
diff --git a/src/views/login.pug b/src/views/login.pug
new file mode 100644
index 0000000..dd3c359
--- /dev/null
+++ b/src/views/login.pug
@@ -0,0 +1,26 @@
+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
+
diff --git a/src/views/register.pug b/src/views/register.pug
new file mode 100644
index 0000000..22bca48
--- /dev/null
+++ b/src/views/register.pug
@@ -0,0 +1,28 @@
+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
+
diff --git a/src/views/single_comment_thread.pug b/src/views/single_comment_thread.pug
index cd652e6..1f37e9f 100644
--- a/src/views/single_comment_thread.pug
+++ b/src/views/single_comment_thread.pug
@@ -5,7 +5,7 @@ include ../utils
 
 doctype html
 html
-  +head()
+  +head("more comments")
   body
     main#content
       +header()
diff --git a/src/views/subs.pug b/src/views/subs.pug
index f7e2b81..86de604 100644
--- a/src/views/subs.pug
+++ b/src/views/subs.pug
@@ -4,7 +4,7 @@ include ../mixins/head
 
 doctype html
 html
-  +head()
+  +head("subscriptions")
   +subMgmt()
   script.
     function newSubItem(sub) {
@@ -26,7 +26,11 @@ html
     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