feat: allow containerized deployments

At the moment, it seems like it should be working, but I get:
```
lua5.1: error loading module 'bcrypt' from file '/usr/local/openresty/luajit/lib/lua/5.1/bcrypt.so':
	Error relocating /usr/local/openresty/luajit/lib/lua/5.1/bcrypt.so: luaL_setfuncs: symbol not found
```

.gitignore

@@ -3,5 +3,8 @@ nginx.conf.compiled
 db.*.sqlite
 .vscode/
 .local/
-static/avatars/
+static/avatars/*
+!static/avatars/default.webp
 secrets.lua
+
+.first_launch.*

README.md

@@ -5,13 +5,41 @@ porous forum
 Released under [CNPLv7+](https://thufie.lain.haus/NPL.html).
 Please read the [full terms](./LICENSE.md) for proper wording.
 
-# deps
-this is all off the top of my head so if you try to run it got help you
+# installing & first time setup
+1. first, install OpenResty. instructions for linux can be found [here](https://openresty.org/en/linux-packages.html).
+2. then, install LuaJIT and Lua 5.1 (usually called `lua5.1` in package managers)
+3. then, install [LuaRocks](https://luarocks.org) (prefer your package manager instead of a local install recommended by the guide)
+4. add luarocks search dirs to path:
 
-- lapis
-- lsqlite3
-- [magick](https://github.com/leafo/magick)
-- bcrypt
-- luaossl
+```bash
+  # in .bashrc (or other shell equivalent)
+  eval "$(luarocks --lua-version 5.1 path)"
+```
+5. clone repo
+6. install the dependencies:
 
-i think thats it
+```bash
+$ luarocks --local --lua-version 5.1 build --only-deps
+```
+7. create a file named `secrets.lua` in the project directory.  
+use the `secrets.lua.example` file as reference, and generate a cryptographically secure random key, for example, with:
+
+```bash
+$ openssl rand -hex 32
+```
+8. run:
+
+```bash
+$ start.sh production
+```
+the script will perform some necessary first time setup (and create a hidden file in the folder to ensure it won't do so again). it will create an administrator account and print the credentials to the console; **this will only happen once**. make sure you save them somewhere. the administrator account is the only one that can promote other users to moderator.  
+(note the `production` argument. if called with no arguments, `start.sh` will run in a development environment, which uses a separate database.)
+
+this app is made with the assumption that it is being reverse-proxied. as such, you may want to change the port to something other than the default `8080`. you can do that in [`config.lua`]([./config.lua]).
+
+after the first time setup is complete, everything is ready to go. put the app behind your reverse proxy and serve it on the web. the app does not run in https by itself, but the reverse proxy can be set up to do that.
+
+once you are able to navigate to the forum, you can log in as the administrator account. other people may also sign up, but they are not able to post until manually verified by an administrator or a moderator. the administrator can promote regular users to moderator.
+
+# icons
+the icons in the `icons/` folder are by [Gabriele Malaspina](https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license)

app.lua

@@ -11,19 +11,27 @@ local util = require("util")
 app:enable("etlua")
 app.layout = require "views.base"
 
+local function inject_constants(req)
+  req.constants = constants
+end
+
 local function inject_methods(req)
   req.avatar_url = util.get_user_avatar_url
   req.ntob = function(_, v)
     return util.ntob(v)
   end
   req.PermissionLevelString = constants.PermissionLevelString
+
+  util.pop_infobox(req)
 end
 
+app:before_filter(inject_constants)
 app:before_filter(inject_methods)
 
 app:include("apps.users", {path = "/user"})
 app:include("apps.topics", {path = "/topics"})
 app:include("apps.threads", {path = "/threads"})
+app:include("apps.mod", {path = "/mod"})
 
 app:get("/", function(self)
   return {redirect_to = self:url_for("all_topics")}

apps/mod.lua

@@ -0,0 +1,23 @@
+local app = require("lapis").Application()
+
+local util = require("util")
+
+local models = require("models")
+local Users = models.Users
+
+app:get("user_list", "/list", function(self)
+  self.me = util.get_logged_in_user(self)
+  if not self.me then
+    return {redirect_to = self:url_for("all_topics")}
+  end
+  
+  if not self.me:is_mod() then
+    return {redirect_to = self:url_for("all_topics")}
+  end
+  
+  self.users = Users:select("")
+  
+  return {render = "mod.user-list"}
+end)
+
+return app

apps/threads.lua

@@ -14,7 +14,7 @@ local POSTS_PER_PAGE = 10
 app:get("thread_create", "/create", function(self)
   local user = util.get_logged_in_user(self)
   if not user then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local all_topics = db.query("select * from topics limit 25;")
@@ -30,7 +30,7 @@ end)
 app:post("thread_create", "/create", function(self)
   local user = util.get_logged_in_user(self)
   if not user then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local topic = Topics:find(self.params.topic_id)
@@ -69,6 +69,11 @@ app:get("thread", "/:slug", function(self)
   end
   self.thread = thread
 
+  local post_count = Posts:count(db.clause({
+    thread_id = thread.id
+  }))
+  self.pages = math.max(math.ceil(post_count / POSTS_PER_PAGE), 1)
+
   if self.params.after then
     local after_id = tonumber(self.params.after)
     local post_position = Posts:count(db.clause({
@@ -77,13 +82,9 @@ app:get("thread", "/:slug", function(self)
     }))
     self.page = math.floor((post_position - 1) / POSTS_PER_PAGE) + 1
   else
-    self.page = tonumber(self.params.page) or 1
+    self.page = math.max(1, math.min(tonumber(self.params.page) or 1, self.pages))
   end
 
-  local post_count = Posts:count(db.clause({
-    thread_id = thread.id
-  }))
-  self.pages = math.ceil(post_count / POSTS_PER_PAGE)
   -- self.page = math.max(1, math.min(self.page, self.pages))
   local posts = db.query([[
     SELECT

apps/topics.lua

@@ -12,6 +12,8 @@ local Avatars = models.Avatars
 local Topics = models.Topics
 local Threads = models.Threads
 
+local THREADS_PER_PAGE = 10
+
 local ThreadCreateError = {
   OK = 0,
   GUEST = 1,
@@ -20,7 +22,27 @@ local ThreadCreateError = {
 }
 
 app:get("all_topics", "", function(self)
-  self.topic_list = db.query("select * from topics limit 25;")
+  self.topic_list = db.query([[
+    SELECT
+      topics.name, topics.slug, topics.description, topics.is_locked,
+      users.username AS latest_thread_username,
+      threads.title AS latest_thread_title,
+      threads.slug AS latest_thread_slug,
+      threads.created_at AS latest_thread_created_at
+    FROM
+      topics
+    LEFT JOIN (
+        SELECT
+        *,
+        row_number() OVER (PARTITION BY threads.topic_id ORDER BY threads.created_at DESC) as rn
+      FROM
+        threads
+      ) threads ON threads.topic_id = topics.id AND threads.rn = 1
+    LEFT JOIN
+      users on users.id = threads.user_id
+    ORDER BY
+      topics.sort_order ASC
+  ]])
   self.me = util.get_logged_in_user_or_transient(self)
   return {render = "topics.topics"}
 end)
@@ -48,13 +70,17 @@ app:post("topic_create", "/create", function(self)
   local time = os.time()
   local slug = lapis_util.slugify(topic_name) .. "-" .. time
 
+  local topic_count = Topics:count()
   local topic = Topics:create({
     name = topic_name,
     description = topic_description,
     slug = slug,
+    sort_order = topic_count + 1,
   })
+  
+  util.inject_infobox(self, "Topic created.")
 
-  return {redirect_to = self:url_for("all_topics")}
+  return {redirect_to = self:url_for("topic", {slug = topic.slug})}
 end)
 
 app:get("topic", "/:slug", function(self)
@@ -64,11 +90,51 @@ app:get("topic", "/:slug", function(self)
   if not topic then
     return {status = 404}
   end
+  local threads_count = Threads:count(db.clause({
+    topic_id = topic.id
+  }))
   self.topic = topic
-  self.threads_list = db.query("SELECT * FROM threads WHERE topic_id = ? ORDER BY is_stickied DESC, created_at DESC", topic.id)
+
+  self.pages = math.max(math.ceil(threads_count / THREADS_PER_PAGE), 1)
+  self.page = math.max(1, math.min(tonumber(self.params.page) or 1, self.pages))
+  -- self.threads_list = db.query("SELECT * FROM threads WHERE topic_id = ? ORDER BY is_stickied DESC, created_at DESC", topic.id)
+  self.threads_list = db.query([[
+    SELECT
+      threads.title, threads.slug, threads.created_at, threads.is_locked, threads.is_stickied,
+      users.username AS started_by,
+      u.username AS latest_post_username,
+      ph.content AS latest_post_content,
+      posts.created_at AS latest_post_created_at,
+      posts.id AS latest_post_id
+    FROM
+      threads
+    JOIN users ON users.id = threads.user_id
+    JOIN (
+      SELECT
+        posts.thread_id,
+        posts.id,
+        posts.user_id,
+        posts.created_at,
+        posts.current_revision_id,
+        ROW_NUMBER() OVER (PARTITION BY posts.thread_id ORDER BY posts.created_at DESC) AS rn
+      FROM
+        posts
+    ) posts ON posts.thread_id = threads.id AND posts.rn = 1
+    JOIN
+      post_history ph ON ph.id = posts.current_revision_id
+    JOIN
+      users u ON u.id = posts.user_id
+    WHERE
+      threads.topic_id = ?
+    ORDER BY
+      threads.is_stickied DESC,
+      threads.created_at DESC
+    LIMIT ? OFFSET ?
+  ]], topic.id, THREADS_PER_PAGE, (self.page - 1) * THREADS_PER_PAGE)
+  
   local user = util.get_logged_in_user_or_transient(self)
-  print(topic.is_locked, type(topic.is_locked))
   self.me = user
+  
   self.ThreadCreateError = ThreadCreateError
   self.thread_create_error = ThreadCreateError.OK
   if user:is_logged_in_guest() then
@@ -79,7 +145,7 @@ app:get("topic", "/:slug", function(self)
     self.thread_create_error = ThreadCreateError.TOPIC_LOCKED
   end
   
-  self.page_title = "all threads in " .. topic.name
+  self.page_title = "browsing topic " .. topic.name
   
   return {render = "topics.topic"}
 end)

apps/users.lua

@@ -66,11 +66,6 @@ app:get("user", "/:username", function(self)
     return {status = 404}
   end
 
-  if self.session.flash ~= nil and self.session.flash.just_logged_in then
-    self.just_logged_in = true
-    self.session.flash = {}
-  end
-
   local me = util.get_logged_in_user_or_transient(self)
   self.user = user
   self.me = me
@@ -106,47 +101,39 @@ app:get("user", "/:username", function(self)
 end)
 
 app:post("user_delete", "/:username/delete", function(self)
+  -- this route explicitly does not handle admins deleting other users
+  -- i might make a separate route for it later, but guesting users is possible
   local me = util.get_logged_in_user(self)
   if me == nil then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local target_user = Users:find({username = self.params.username})
-  if not me:is_mod() then
-    if me.id ~= target_user.id then
-      return {redirect_to = self:url_for("user", {username = self.params.username})}
-    end
-    
-    if not authenticate_user(target_user, self.params.password) then
-      self.session.flash = {error = "The password you entered is incorrect."}
-      return {redirect_to = self:url_for("user_delete_confirm", {username = me.username})}
-    end
-    
-    util.transfer_and_delete_user(target_user)
-    self.session.flash = {error = "Your account has been added to the deletion queue."}
-    return {redirect_to = self:url_for("user_signup")}
-  else
-    if target_user.permission >= me.permission then
-      self.session.flash = {error = "You can not delete another moderator."}
-      return {redirect_to = self:url_for("user", {username = me.username})}
-    end
+  
+  if me.id ~= target_user.id then
+    return {redirect_to = self:url_for("user", {username = self.params.username})}
   end
+  
+  if not authenticate_user(target_user, self.params.password) then
+    util.inject_err_infobox(self, "The password you entered is incorrect.")
+    return {redirect_to = self:url_for("user_delete_confirm", {username = me.username})}
+  end
+  
+  util.transfer_and_delete_user(target_user)
+  util.inject_infobox(self, "Your account has been added to the deletion queue.")
+  return {redirect_to = self:url_for("user_signup")}
 end)
 
 app:get("user_delete_confirm", "/:username/delete_confirm", function(self)
   local me = util.get_logged_in_user(self)
   if me == nil then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    -- util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local target_user = Users:find({username = self.params.username})
   if me.id ~= target_user.id then
     return {redirect_to = self:url_for("user", {username = self.params.username})}
   end
-  if self.session.flash then
-    self.err = self.session.flash.error
-    self.session.flash = {}
-  end
   self.me = target_user
   self.page_title = "confirm deletion"
 
@@ -156,24 +143,26 @@ end)
 app:post("user_clear_avatar", "/:username/clear_avatar", function(self)
   local me = util.get_logged_in_user(self)
   if me == nil then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local target_user = Users:find({username = self.params.username})
   if me.id ~= target_user.id then
     return {redirect_to = self:url_for("user", {username = self.params.username})}
   end
+  local old_avatar_id = target_user.avatar_id
   target_user:update({
-    avatar_id = db.NULL,
+    avatar_id = 1,
   })
-  self.session.flash = {success = true, msg = "Avatar cleared."}
+  util.destroy_avatar(old_avatar_id)
+  util.inject_infobox(self, "Avatar cleared.")
   return {redirect_to = self:url_for("user_settings", {username = self.params.username})}
 end)
 
 app:post("user_set_avatar", "/:username/set_avatar", function(self)
   local me = util.get_logged_in_user(self)
   if me == nil then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local target_user = Users:find({username = self.params.username})
@@ -182,7 +171,7 @@ app:post("user_set_avatar", "/:username/set_avatar", function(self)
   end
   local file = self.params.avatar
   if not file then
-    self.session.flash = {error = "Something went wrong. Try again later."}
+    util.inject_warn_infobox(self, "Something went wrong. Try again later.")
     return {redirect_to = self:url_for("user_settings", {username = self.params.username})}
   end
   local time = os.time()
@@ -191,11 +180,11 @@ app:post("user_set_avatar", "/:username/set_avatar", function(self)
   local save_path = "static" .. proxied_filename
   local res = util.validate_and_create_image(file.content, save_path)
   if not res then
-    self.session.flash = {error = "Something went wrong. Try again later."}
+    util.inject_warn_infobox(self, "Something went wrong. Try again later.")
     return {redirect_to = self:url_for("user_settings", {username = self.params.username})}
   end
 
-  self.session.flash = {success = true, msg = "Avatar updated."}
+  util.inject_infobox(self, "Avatar updated.")
   local avatar = Avatars:create({
     file_path = proxied_filename,
     uploaded_at = time,
@@ -211,22 +200,13 @@ end)
 app:get("user_settings", "/:username/settings", function(self)
   local me = util.get_logged_in_user(self)
   if me == nil then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local target_user = Users:find({username = self.params.username})
   if me.id ~= target_user.id then
     return {redirect_to = self:url_for("user", {username = self.params.username})}
   end
-  if self.session.flash then
-    local flash = self.session.flash
-    self.session.flash = nil
-    if flash.success then
-      self.flash_msg = flash.msg
-    elseif flash.error then
-      self.flash_msg = flash.error
-    end
-  end
   self.me = target_user
   self.page_title = "settings"
 
@@ -236,7 +216,7 @@ end)
 app:post("user_settings", "/:username/settings", function(self)
   local me = util.get_logged_in_user(self)
   if me == nil then
-    self.session.flash = {error = "You must be logged in to perform this action."}
+    util.inject_err_infobox(self, "You must be logged in to perform this action.")
     return {redirect_to = self:url_for("user_login")}
   end
   local target_user = Users:find({username = self.params.username})
@@ -249,10 +229,7 @@ app:post("user_settings", "/:username/settings", function(self)
   target_user:update({
     status = status,
   })
-  self.session.flash = {
-    success = true,
-    msg = "Settings updated."
-  }
+  util.inject_infobox(self, "Status updated.")
   return {redirect_to = self:url_for("user_settings", {username = self.params.username})}
 end)
 
@@ -264,11 +241,6 @@ app:get("user_login", "/login", function(self)
     end
   end
 
-  if self.session.flash then
-    self.err = self.session.flash.error
-    self.session.flash = {}
-  end
-
   self.page_title = "log in"
 
   return {render = "user.login"}
@@ -285,19 +257,19 @@ app:post("user_login", "/login", function(self)
   local password = self.params.password
   local user = Users:find({username = username})
   if not user then
-    self.session.flash = {error = "Invalid username or password"}
+    util.inject_err_infobox(self, "Invalid username or password")
     return {redirect_to = self:url_for("user_login")}
   end
   if user.permission == constants.PermissionLevel.SYSTEM then
-    self.session.flash = {error = "Invalid username or password"}
+    util.inject_err_infobox(self, "Invalid username or password")
     return {redirect_to = self:url_for("user_login")}
   end
   if not authenticate_user(user, password) then
-    self.session.flash = {error = "Invalid username or password"}
+    util.inject_err_infobox(self, "Invalid username or password")
     return {redirect_to = self:url_for("user_login")}
   end
   local session = create_session(user.id)
-  self.session.flash = {just_logged_in = true}
+  util.inject_infobox(self, "Logged in successfully.")
   self.session.session_key = session.key
   return {redirect_to = self:url_for("user", {username = username})}
 end)
@@ -309,10 +281,6 @@ app:get("user_signup", "/signup", function(self)
       return {redirect_to = self:url_for("user", {username = user.username})}
     end
   end
-  if self.session.flash then
-    self.err = self.session.flash.error
-    self.session.flash = {}
-  end
 
   self.page_title = "sign up"
 
@@ -332,22 +300,22 @@ app:post("user_signup", "/signup", function(self)
   local password2 = self.params.password2
   local user = Users:find({username = username})
   if user then
-    self.session.flash = {error = "Username '" .. username .. "' is already taken."}
+    util.inject_err_infobox(self, "Username '" .. username .. "' is already taken.")
     return {redirect_to = self:url_for("user_signup")}
   end
 
   if not validate_username(username) then
-    self.session.flash = {error = "Username must be 3-20 characters with only upper and lowercase letters, hyphens, and underscores."}
+    util.inject_err_infobox(self, "Username must be 3-20 characters with only upper and lowercase letters, hyphens, and underscores.")
     return {redirect_to = self:url_for("user_signup")}
   end
-
+  
   if not validate_password(password) then
-    self.session.flash = {error = "Password must be 10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces."}
+    util.inject_err_infobox(self, "Password must be 10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces.")
     return {redirect_to = self:url_for("user_signup")}
   end
-
+  
   if password ~= password2 then
-    self.session.flash = {error = "Passwords do not match."}
+    util.inject_err_infobox(self, "Passwords do not match.")
     return {redirect_to = self:url_for("user_signup")}
   end
 
@@ -358,7 +326,7 @@ app:post("user_signup", "/signup", function(self)
   })
 
   local session = create_session(new_user.id)
-  self.session.flash = {just_logged_in = true}
+  util.inject_infobox(self, "Siged up successfully.")
   self.session.session_key = session.key
   return {redirect_to = self:url_for("user", {username = username})}
 end)

config.lua

@@ -2,6 +2,7 @@ local config = require("lapis.config")
 local secrets = require("secrets")
 
 config({"development", "production"}, {
+  port = 8080,
   server = "nginx",
   code_cache = "off",
   num_workers = "1",
@@ -21,4 +22,5 @@ config("production", {
   sqlite = {
     database = "db.prod.sqlite"
   },
+  session_name = "porom_session_s"
 })

constants.lua

@@ -16,6 +16,26 @@ Constants.PermissionLevelString = {
   [Constants.PermissionLevel.ADMIN] = "Administrator",
 }
 
+Constants.InfoboxKind = {
+  INFO = 0,
+  LOCK = 1,
+  WARN = 2,
+  ERROR = 3,
+}
+
+Constants.InfoboxIcons = {
+  [Constants.InfoboxKind.INFO] = "svg-icons.info",
+  [Constants.InfoboxKind.LOCK] = "svg-icons.lock",
+  [Constants.InfoboxKind.WARN] = "svg-icons.warn",
+  [Constants.InfoboxKind.ERROR] = "svg-icons.error",
+}
+Constants.InfoboxHTMLClass = {
+  [Constants.InfoboxKind.INFO] = "",
+  [Constants.InfoboxKind.LOCK] = "warn",
+  [Constants.InfoboxKind.WARN] = "warn",
+  [Constants.InfoboxKind.ERROR] = "critical",
+}
+
 Constants.BCRYPT_ROUNDS = 10
 
 return Constants

create_default_accounts.lua

@@ -4,6 +4,17 @@ local constants = require("constants")
 
 local alphabet = "-_@0123456789abcdefghijklmnopqrstuvwABCDEFGHIJKLMNOPQRSTUVWXYZ"
 
+local function create_default_avatar()
+  if models.Avatars:count() > 0 then
+    print("default avatar must exist")
+    return
+  end
+  models.Avatars:create({
+    file_path = "/avatars/default.webp",
+    uploaded_at = os.time(),
+  })
+end
+
 local function create_admin()
   local username = "admin"
   local root_count = models.Users:count("username = ?", username)
@@ -44,5 +55,6 @@ local function create_deleted_user()
   })
 end
 
+create_default_avatar()
 create_admin()
 create_deleted_user()

docker-compose.yaml

@@ -0,0 +1,13 @@
+# Generate a random secret key
+# export PROD_SECRET_KEY=$(openssl rand -hex 32)
+# Start the container
+# docker-compose up
+version: "3"
+services:
+  porom:
+    build: 
+      context: .
+      args:
+        - PROD_SECRET_KEY=${PROD_SECRET_KEY}
+    ports: 
+      - "8080:8080"

dockerfile

@@ -0,0 +1,36 @@
+# HOW TO:
+#
+# Generate a random secret key & build the Docker image
+# ```sh
+# SECRET_KEY=$(openssl rand -hex 32) docker build --build-arg PROD_SECRET_KEY="$SECRET_KEY" -t porom:latest .
+# ```
+#
+# Then run the container
+# ```sh
+# docker run -d -p 8080:8080 --name porom porom:latest
+# ```
+#
+FROM openresty/openresty:alpine-fat
+COPY ./nginx.conf /usr/local/openresty/nginx/conf/nginx.conf
+COPY . /usr/local/openresty/nginx/html
+WORKDIR /usr/local/openresty/nginx/html
+RUN apk add --no-cache \ 
+    make \
+    git \
+    make \
+    gcc \
+    g++ \
+    musl-dev \
+    libffi-dev \
+    openssl-dev \
+    sqlite-dev \
+    imagemagick-dev \
+    lua5.1 \
+    lua5.1-dev
+RUN eval "$(luarocks --lua-version 5.1 path)"
+RUN luarocks --lua-version 5.1 build --only-deps
+ARG PROD_SECRET_KEY
+RUN echo "return { key = \"${PROD_SECRET_KEY}\",}" > /usr/local/openresty/nginx/html/secrets.lua
+EXPOSE 8080
+RUN chmod +x /usr/local/openresty/nginx/html/start.sh
+ENTRYPOINT ["/usr/local/openresty/nginx/html/start.sh", "production"]

migrations.lua

@@ -52,4 +52,15 @@ return {
   [6] = function ()
     schema.drop_column("post_history", "user_id")
   end,
+  
+  [7] = function ()
+    db.query('DROP INDEX "idx_users_avatar"')
+    schema.drop_column("users", "avatar_id")
+    schema.add_column("users", "avatar_id", "REFERENCES avatars(id) DEFAULT 1")
+  end,
+  
+  [8] = function ()
+    schema.add_column("topics", "sort_order", types.integer{default = 0})
+    db.query("UPDATE topics SET sort_order = (SELECT COUNT(*) FROM topics t2 WHERE t2.ROWID <= topics.ROWID)")
+  end
 }

models.lua

@@ -25,7 +25,7 @@ function Users_mt:is_logged_in_guest()
 end
 
 function Users_mt:is_default_avatar()
-  return self.avatar_id == nil
+  return self.avatar_id == 1
 end
 
 function Users_mt:is_logged_in()

porom-dev-1.rockspec

@@ -0,0 +1,25 @@
+package = "porom"
+version = "dev-1"
+
+source = {
+  url = "ssh://gitea@git.poto.cafe:222/yagich/porom.git"
+}
+
+description = {
+  summary = "Homegrown forum software",
+  homepage = "",
+  license = "CNPLv7+"
+}
+
+dependencies = {
+  "lua ~> 5.1",
+  "lapis == 1.16.0",
+  "lsqlite3",
+  "magick",
+  "bcrypt",
+  "luaossl",
+}
+
+build = {
+  type = "none"
+}

sass/style.scss

@@ -8,6 +8,7 @@ $dark_bg: color.scale($accent_color, $lightness: -25%, $saturation: -97%);
 $dark2: color.scale($accent_color, $lightness: -30%, $saturation: -60%);
 
 $light: color.scale($accent_color, $lightness: 40%, $saturation: -60%);
+$lighter: color.scale($accent_color, $lightness: 60%, $saturation: -60%);
 
 $main_bg: color.scale($accent_color, $lightness: -10%, $saturation: -40%);
 $button_color: color.adjust($accent_color, $hue: 90);
@@ -34,6 +35,10 @@ $button_color: color.adjust($accent_color, $hue: 90);
   &:active {
     background-color: color.scale($color, $lightness: -10%, $saturation: -70%);
   }
+  
+  &:disabled {
+    background-color: color.scale($color, $lightness: 30%, $saturation: -90%);
+  }
 }
 
 @mixin navbar($color) {
@@ -45,7 +50,7 @@ $button_color: color.adjust($accent_color, $hue: 90);
 
 body {
   font-family: sans-serif;
-  margin: 20px;
+  margin: 20px 100px;
   background-color: $main_bg;
 }
 
@@ -66,6 +71,7 @@ body {
 .darkbg {
   padding-bottom: 10px;
   padding-left: 10px;
+  padding-right: 10px;
   background-color: $dark_bg;
 }
 
@@ -75,12 +81,17 @@ body {
 }
 
 .site-title {
-  display: inline;
   padding-right: 30px;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-decoration: none;
+  color: black;
 }
 
 .thread-title {
   margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
 .post {
@@ -182,6 +193,7 @@ body {
 }
 
 button, input[type="submit"], .linkbutton {
+  display: inline-block;
   @include button($button_color);
   
   &.critical {
@@ -197,6 +209,11 @@ button, input[type="submit"], .linkbutton {
 // not sure why this one has to be separate, but if it's included in the rule above everything breaks
 input[type="file"]::file-selector-button {
   @include button($button_color);
+  margin: 10px 10px;
+}
+
+p {
+  margin: 15px 0;
 }
 
 .pagebutton {
@@ -221,3 +238,131 @@ input[type="file"]::file-selector-button {
 .modform {
   display: inline;
 }
+
+.login-container > * {
+  width: 25%;
+  margin: auto;
+}
+
+.settings-container > * {
+  width: 40%;
+  margin: auto;
+}
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+}
+
+input[type="text"], input[type="password"], textarea, select {
+  border: 1px solid black;
+  border-radius: 3px;
+  padding: 7px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  background-color: color.scale($accent_color, $lightness: 40%);
+  
+  &:focus {
+    background-color: color.scale($accent_color, $lightness: 60%);
+  }
+}
+
+.infobox {
+  border: 2px solid black;
+  background-color: $accent_color;
+  padding: 20px 15px;
+  
+  &.critical {
+    background-color: rgb(237, 129, 129);
+  }
+  
+  &.warn {
+    background-color: #fbfb8d;
+  }
+}
+
+.infobox > span {
+  display: flex;
+  align-items: center;
+}
+
+.infobox-icon-container {
+  min-width: 60px;
+  padding-right: 15px;
+}
+
+.thread {
+  display: grid;
+  grid-template-columns: 96px 1.6fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  min-height: 96px;
+  grid-template-areas:
+    "thread-sticky-container thread-info-container thread-locked-container";
+}
+
+.thread-sticky-container {
+  grid-area: thread-sticky-container;
+  border: 2px outset $light;
+}
+
+.thread-locked-container {
+  grid-area: thread-locked-container;
+  border: 2px outset $light;
+}
+
+.contain-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.contain-svg > svg {
+  height: 50%;
+  width: 50%;
+}
+
+.thread-info-container {
+  grid-area: thread-info-container;
+  background-color: $accent_color;
+  padding: 5px 20px;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.thread-info-post-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline;
+}
+
+.topic {
+  display: grid;
+  grid-template-columns: 1.5fr 64px;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas:
+    "topic-info-container topic-locked-container";
+}
+
+.topic-info-container {
+  grid-area: topic-info-container;
+  background-color: $accent_color;
+  padding: 5px 20px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-locked-container {
+  grid-area: topic-locked-container;
+  border: 2px outset $light;
+}

secrets.lua.example

@@ -1,3 +1,3 @@
 return {
-  key = PROD_SECRET_KEY_HERE,
+  key = "PROD_SECRET_KEY_HERE",
 }

start.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+
+start() {
+  lapis serve
+}
+
+first_launch() {
+  echo "Setting up for the first time"
+  touch ".first_launch.$LAPIS_ENVIRONMENT"
+  lua5.1 schema.lua
+  lapis migrate
+  lua5.1 create_default_accounts.lua
+}
+
+if [[ $# -ne 1 ]]; then
+  export LAPIS_ENVIRONMENT="development"
+  echo "WARN: no environment passed, assuming default (development)"
+else
+  export LAPIS_ENVIRONMENT="$1"
+fi
+
+echo "Starting in $LAPIS_ENVIRONMENT"
+
+if ! [ -f ".first_launch.$LAPIS_ENVIRONMENT" ]; then
+  first_launch
+fi
+
+start

static/style.css

@@ -12,7 +12,7 @@
 
 body {
   font-family: sans-serif;
-  margin: 20px;
+  margin: 20px 100px;
   background-color: rgb(173.5214173228, 183.6737007874, 161.0262992126);
 }
 
@@ -39,6 +39,7 @@ body {
 .darkbg {
   padding-bottom: 10px;
   padding-left: 10px;
+  padding-right: 10px;
   background-color: rgb(143.7039271654, 144.3879625984, 142.8620374016);
 }
 
@@ -48,12 +49,17 @@ body {
 }
 
 .site-title {
-  display: inline;
   padding-right: 30px;
+  font-size: 1.5rem;
+  font-weight: bold;
+  text-decoration: none;
+  color: black;
 }
 
 .thread-title {
   margin: 0;
+  font-size: 1.5rem;
+  font-weight: bold;
 }
 
 .post {
@@ -149,6 +155,7 @@ body {
 }
 
 button, input[type=submit], .linkbutton {
+  display: inline-block;
   background-color: rgb(177, 206, 204.5);
 }
 button:hover, input[type=submit]:hover, .linkbutton:hover {
@@ -157,6 +164,9 @@ button:hover, input[type=submit]:hover, .linkbutton:hover {
 button:active, input[type=submit]:active, .linkbutton:active {
   background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
 }
+button:disabled, input[type=submit]:disabled, .linkbutton:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
 button.critical, input[type=submit].critical, .linkbutton.critical {
   color: white;
   background-color: red;
@@ -167,6 +177,9 @@ button.critical:hover, input[type=submit].critical:hover, .linkbutton.critical:h
 button.critical:active, input[type=submit].critical:active, .linkbutton.critical:active {
   background-color: rgb(149.175, 80.325, 80.325);
 }
+button.critical:disabled, input[type=submit].critical:disabled, .linkbutton.critical:disabled {
+  background-color: rgb(174.675, 156.825, 156.825);
+}
 button.warn, input[type=submit].warn, .linkbutton.warn {
   background-color: #fbfb8d;
 }
@@ -176,9 +189,13 @@ button.warn:hover, input[type=submit].warn:hover, .linkbutton.warn:hover {
 button.warn:active, input[type=submit].warn:active, .linkbutton.warn:active {
   background-color: rgb(198.3813559322, 198.3813559322, 154.4186440678);
 }
+button.warn:disabled, input[type=submit].warn:disabled, .linkbutton.warn:disabled {
+  background-color: rgb(217.55, 217.55, 209.85);
+}
 
 input[type=file]::file-selector-button {
   background-color: rgb(177, 206, 204.5);
+  margin: 10px 10px;
 }
 input[type=file]::file-selector-button:hover {
   background-color: rgb(192.6, 215.8, 214.6);
@@ -186,6 +203,13 @@ input[type=file]::file-selector-button:hover {
 input[type=file]::file-selector-button:active {
   background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
 }
+input[type=file]::file-selector-button:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
+
+p {
+  margin: 15px 0;
+}
 
 .pagebutton {
   background-color: rgb(177, 206, 204.5);
@@ -201,6 +225,9 @@ input[type=file]::file-selector-button:active {
 .pagebutton:active {
   background-color: rgb(166.6881496063, 178.0118503937, 177.4261417323);
 }
+.pagebutton:disabled {
+  background-color: rgb(209.535, 211.565, 211.46);
+}
 
 .currentpage {
   border: none;
@@ -214,3 +241,126 @@ input[type=file]::file-selector-button:active {
 .modform {
   display: inline;
 }
+
+.login-container > * {
+  width: 25%;
+  margin: auto;
+}
+
+.settings-container > * {
+  width: 40%;
+  margin: auto;
+}
+
+.avatar-form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 20px 0;
+}
+
+input[type=text], input[type=password], textarea, select {
+  border: 1px solid black;
+  border-radius: 3px;
+  padding: 7px 10px;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  background-color: rgb(217.8, 225.6, 208.2);
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
+  background-color: rgb(230.2, 235.4, 223.8);
+}
+
+.infobox {
+  border: 2px solid black;
+  background-color: #c1ceb1;
+  padding: 20px 15px;
+}
+.infobox.critical {
+  background-color: rgb(237, 129, 129);
+}
+.infobox.warn {
+  background-color: #fbfb8d;
+}
+
+.infobox > span {
+  display: flex;
+  align-items: center;
+}
+
+.infobox-icon-container {
+  min-width: 60px;
+  padding-right: 15px;
+}
+
+.thread {
+  display: grid;
+  grid-template-columns: 96px 1.6fr 96px;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  min-height: 96px;
+  grid-template-areas: "thread-sticky-container thread-info-container thread-locked-container";
+}
+
+.thread-sticky-container {
+  grid-area: thread-sticky-container;
+  border: 2px outset rgb(217.26, 220.38, 213.42);
+}
+
+.thread-locked-container {
+  grid-area: thread-locked-container;
+  border: 2px outset rgb(217.26, 220.38, 213.42);
+}
+
+.contain-svg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.contain-svg > svg {
+  height: 50%;
+  width: 50%;
+}
+
+.thread-info-container {
+  grid-area: thread-info-container;
+  background-color: #c1ceb1;
+  padding: 5px 20px;
+  border-top: 1px solid black;
+  border-bottom: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.thread-info-post-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: inline;
+}
+
+.topic {
+  display: grid;
+  grid-template-columns: 1.5fr 64px;
+  grid-template-rows: 1fr;
+  gap: 0px 0px;
+  grid-auto-flow: row;
+  grid-template-areas: "topic-info-container topic-locked-container";
+}
+
+.topic-info-container {
+  grid-area: topic-info-container;
+  background-color: #c1ceb1;
+  padding: 5px 20px;
+  border: 1px solid black;
+  display: flex;
+  flex-direction: column;
+}
+
+.topic-locked-container {
+  grid-area: topic-locked-container;
+  border: 2px outset rgb(217.26, 220.38, 213.42);
+}

svg-icons/error.etlua

@@ -0,0 +1,5 @@
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.364 5.63604C19.9926 7.26472 21 9.51472 21 12C21 16.9706 16.9706 21 12 21C9.51472 21 7.26472 19.9926 5.63604 18.364M18.364 5.63604C16.7353 4.00736 14.4853 3 12 3C7.02944 3 3 7.02944 3 12C3 14.4853 4.00736 16.7353 5.63604 18.364M18.364 5.63604L5.63604 18.364" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

svg-icons/info.etlua

@@ -0,0 +1,5 @@
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 8V8.5M12 12V16M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

svg-icons/lock.etlua

@@ -0,0 +1,5 @@
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 14V16M8 9V6C8 3.79086 9.79086 2 12 2C14.2091 2 16 3.79086 16 6V9M7 21H17C18.1046 21 19 20.1046 19 19V11C19 9.89543 18.1046 9 17 9H7C5.89543 9 5 9.89543 5 11V19C5 20.1046 5.89543 21 7 21Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

svg-icons/sticky.etlua

@@ -0,0 +1,5 @@
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 20H6C4.89543 20 4 19.1046 4 18V6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V13M13 20L20 13M13 20V14C13 13.4477 13.4477 13 14 13H20" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

svg-icons/warn.etlua

@@ -0,0 +1,5 @@
+<!-- https://www.figma.com/community/file/1136337054881623512/iconcino-v2-0-0-free-icons-cc0-1-0-license -->
+<?xml version="1.0" encoding="utf-8"?>
+<svg width="60px" height="60px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 15H12.01M12 12V9M4.98207 19H19.0179C20.5615 19 21.5233 17.3256 20.7455 15.9923L13.7276 3.96153C12.9558 2.63852 11.0442 2.63852 10.2724 3.96153L3.25452 15.9923C2.47675 17.3256 3.43849 19 4.98207 19Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

util.lua

@@ -2,6 +2,7 @@ local util = {}
 local magick = require("magick")
 local db = require("lapis.db")
 local html_escape = require("lapis.html").escape
+local constants   = require("constants")
 
 local Avatars = require("models").Avatars
 local Users = require("models").Users
@@ -33,9 +34,6 @@ util.TransientUser = {
 }
 
 function util.get_user_avatar_url(req, user)
-  if not user.avatar_id then
-    return "/avatars/default.webp"
-  end
   return Avatars:find(user.avatar_id).file_path
 end
 
@@ -71,6 +69,29 @@ function util.validate_and_create_image(input_image, filename)
   return true
 end
 
+function util.destroy_avatar(avatar_id)
+  if avatar_id == 1 then
+    print("won't delete default avatar")
+    return
+  end
+  
+  local avatar = Avatars:find(avatar_id)
+  
+  if not avatar then
+    return
+  end
+  
+  local file_path = "static" .. avatar.file_path
+  local f = io.open(file_path, "r")
+  if not f then
+    print("can't open avatar file")
+  else
+    f:close()
+    os.remove(file_path)
+    avatar:delete()
+  end
+end
+
 function util.get_logged_in_user(req)
   if req.session.session_key == nil then
     return nil
@@ -147,4 +168,35 @@ function util.transfer_and_delete_user(user)
   db.query("COMMIT")
 end
 
+function util.pop_infobox(req)
+  if not req.session.infobox then return end
+  req.infobox = req.session.infobox
+  req.session.infobox = nil
+end
+
+function util.inject_infobox(req, message, kind)
+  kind = kind or constants.InfoboxKind.INFO
+  local ib = {
+    msg = message,
+    kind = kind,
+  }
+  req.session.infobox = ib
+end
+
+function util.inject_err_infobox(req, message)
+  local ib = {
+    msg = message,
+    kind = constants.InfoboxKind.ERROR,
+  }
+  req.session.infobox = ib
+end
+
+function util.inject_warn_infobox(req, message)
+  local ib = {
+    msg = message,
+    kind = constants.InfoboxKind.WARN,
+  }
+  req.session.infobox = ib
+end
+
 return util

views/base.etlua

@@ -11,6 +11,7 @@
   <link rel="stylesheet" href="<%= "/static/style.css?" .. math.random(1, 100) %>">
 </head>
 <body>
+  <% render("views.common.topnav") -%>
   <% content_for("inner") %>
 </body>
 </html>

views/common/bbcode_help.etlua

@@ -0,0 +1,11 @@
+<details>
+  <summary>Supported babycode tags</summary>
+  <ul>
+    <li>[b]<b>bold</b>[/b]</li>
+    <li>[i]<i>italic</i>[/i]</li>
+    <li>[s]<del>strikethrough</del>[/s]</li>
+    <li>[url=https://example.com]<a href="https://example.com">labeled URL</a>[/url]</li>
+    <li>[url]<a href="https://unlabeled-url.example.com">https://unlabeled-url.example.com</a>[/url]</li>
+    <li>[code]<code>code block</code>[/code]</li>
+  </ul>
+</details>

views/common/infobox.etlua

@@ -0,0 +1,13 @@
+<%
+  local class = "infobox " .. constants.InfoboxHTMLClass[kind]
+  local icon = constants.InfoboxIcons[kind]
+%>
+
+<div class="<%= class %>">
+  <span>
+  <div class="infobox-icon-container">
+  <% render(icon) %>
+  </div>
+    <%= msg %>
+  </span>
+</div>

views/common/topnav.etlua

@@ -1,11 +1,16 @@
 <nav id="topnav">
   <span>
-    <h1 class="site-title">Porom</h1>
-    <a href="<%= url_for("all_topics") %>">All topics</a>
+    <% local topics_url = url_for("all_topics") %>
+    <a class="site-title" href="<%= topics_url %>">Porom</a>
+    <a href="<%= topics_url %>">All topics</a>
   </span>
   <span>
-    <% if me:is_logged_in() then -%>
+    <% if me and me:is_logged_in() then -%>
       Welcome, <a href="<%= url_for("user", {username = me.username}) %>"><%= me.username %></a>
+      <% if me:is_mod() then %>
+        &bullet;
+        <a href="<%= url_for("user_list") %>">User list</a>
+      <% end %>
     <% else -%>
       Welcome, guest. Please <a href="<%= url_for("user_signup") %>">sign up</a> or <a href="<%= url_for("user_login") %>">log in</a>
     <% end -%>

views/mod/user-list.etlua

@@ -0,0 +1,8 @@
+<div class="darkbg settings-container">
+  <h1>All users</h1>
+  <ul>
+    <% for _, user in ipairs(users) do %>
+      <li><a href="<%= url_for("user", {username = user.username}) %>"><%= user.username %></a></li>
+    <% end %>
+  </ul>
+</div>

views/threads/create.etlua

@@ -1,13 +1,17 @@
-<h1>New thread</h1>
-<form method="post">
-  <label for="topic_id">Topic:</label>
-  <select name="topic_id", id="topic_id" autocomplete="off">
-    <% for _, topic in ipairs(all_topics) do %>
-      <option value="<%= topic.id %>" <%- params.topic_id == tostring(topic.id) and "selected" or "" %>><%= topic.name %></value>
-    <% end %>
-  </select><br>
-  <label for="title">Thread title:</label>
-  <input type="text" id="title" name="title" required><br>
-  <textarea id="initial_post" name="initial_post" placeholder="Post body" required></textarea><br>
-  <input type="submit" value="Create thread">
-</form>
+<div class="darkbg settings-container">
+  <h1>New thread</h1>
+    <form method="post">
+      <label for="topic_id">Topic</label>
+      <select name="topic_id", id="topic_id" autocomplete="off">
+        <% for _, topic in ipairs(all_topics) do %>
+          <option value="<%= topic.id %>" <%- params.topic_id == tostring(topic.id) and "selected" or "" %>><%= topic.name %></value>
+        <% end %>
+      </select><br>
+      <label for="title">Thread title</label>
+      <input type="text" id="title" name="title" placeholder="Required" required>
+      <label for="initial_post">Post body</label>
+      <textarea id="initial_post" name="initial_post" placeholder="Required" rows=5 required></textarea>
+      <% render "views.common.bbcode_help" %>
+      <input type="submit" value="Create thread">
+    </form>
+</div>

views/threads/post.etlua

@@ -1,7 +1,7 @@
 <div class="post" id="post-<%= post.id %>">
   <div class="usercard">
     <a href="<%= url_for("user", {username = post.username}) %>" style="display: contents;">
-    <img src="<%= post.avatar_path or "/avatars/default.webp" %>" class="avatar">
+    <img src="<%= post.avatar_path %>" class="avatar">
     </a>
     <a href="<%= url_for("user", {username = post.username}) %>" class="username-link"><%= post.username %></a>
     <% if post.status ~= "" then %>

views/threads/thread.etlua

@@ -1,4 +1,4 @@
-<% render("views.common.topnav") -%>
+<% local is_locked = ntob(thread.is_locked) %>
 <main>
   <nav class="darkbg">
     <h1 class="thread-title"><%= thread.title %></h1>
@@ -13,10 +13,13 @@
   <% render("views.common.pagination", {page_count = pages, current_page = page}) %>
 </nav>
 
-<% if not me:is_guest() then %>
+<% if is_locked then -%>
+  <% render("views.common.infobox", {kind = constants.InfoboxKind.LOCK, msg = "This thread is locked."}) %>
+<% end -%>
+<% if not me:is_guest() and not is_locked then %>
 <h1>Respond to "<%= thread.title %>"</h1>
 <form method="post">
   <textarea id="post_content" name="post_content" placeholder="Response body" required></textarea><br>
-  <input type="submit" value="Reply">
+  <input type="submit" value="Post reply">
 </form>
 <% end %>

views/topics/create.etlua

@@ -1,6 +1,10 @@
-<h1>Create topic</h1>
-<form method="post">
-  <input type="text" name="name" id="name" placeholder="Topic name" required><br>
-  <textarea id="description" name="description" placeholder="Topic description" required></textarea><br>
-  <input type="submit" value="Create topic">
-</form>
+<div class="darkbg settings-container">
+  <h1>Create topic</h1>
+  <form method="post">
+    <label for=name>Name</label>
+    <input type="text" name="name" id="name" required><br>
+    <label for=description>Description</label>
+    <textarea id="description" name="description" required rows=5></textarea><br>
+    <input type="submit" value="Create topic">
+  </form>
+</div>

views/topics/edit.etlua

@@ -1,12 +1,12 @@
-<h1>Editing topic <%= topic.name %></h1>
-<form method="post">
-  <input type="text" name="name" id="name" value="<%= topic.name %>" placeholder="Topic name" required><br>
-  <textarea id="description" name="description" value="<%= topic.description %>" placeholder="Topic description"></textarea><br>
-  <input type="checkbox" id="is_locked" name="is_locked" value="<%= ntob(topic.is_locked) %>">
-  <label for="is_locked">Locked</label><br>
-  <input type="submit" value="Save changes">
-</form>
-<form method="get" action="<%= url_for("topic", {slug = topic.slug}) %>">
-  <input type="submit" value="Cancel">
-</form>
-<i>Note: to preserve history, you cannot change the topic URL.</i>
+<div class="darkbg settings-container">
+  <h1>Editing topic <%= topic.name %></h1>
+  <form method="post">
+    <label for=name>Name</label>
+    <input type="text" name="name" id="name" value="<%= topic.name %>" placeholder="Topic name" required>
+    <label for=description>Description</label>
+    <textarea id="description" name="description" placeholder="Topic description" rows=4><%= topic.description %></textarea>
+    <input type="submit" value="Save changes">
+    <a class="linkbutton" href="<%= url_for("topic", {slug = topic.slug}) %>">Cancel</a><br>
+  <i>Note: to preserve history, you cannot change the topic URL.</i>
+  </form>
+</div>

views/topics/topic.etlua

@@ -1,33 +1,68 @@
-<h1><%= topic.name %></h1>
-<h2><%= topic.description %></h2>
+<% if infobox then %>
+  <% render("views.common.infobox", infobox) %>
+<% end %>
+
+<nav class="darkbg">
+  <h1 class="thread-title">All threads in "<%= topic.name %>"</h1>
+  <span><%= topic.description %></span>
+  <div>
+  <% if thread_create_error == ThreadCreateError.OK then %>
+    <a class="linkbutton" href=<%= url_for("thread_create", nil, {topic_id = topic.id}) %>>New thread</a>
+  <% elseif thread_create_error == ThreadCreateError.GUEST then %>
+    <p>Your account is still pending confirmation by a moderator. You are not able to create a new thread or post at this time.</p>
+  <% elseif thread_create_error == ThreadCreateError.LOGGED_OUT then %>
+    <p>Only logged in users can create threads. <a href="<%= url_for("user_signup") %>">Sign up</a> or <a href="<%= url_for("user_login")%>">log in</a> to create a thread.</p>
+  <% else %>
+    <p>This topic is locked.</p>
+  <% end %>
+  <% if me:is_mod() then %>
+    <a class="linkbutton" href="<%= url_for("topic_edit", {slug = topic.slug}) %>">Edit topic</a>
+    <form class="modform" method="post" action="<%= url_for("topic_edit", {slug = topic.slug}) %>">
+      <input type="hidden" name="is_locked" value="<%= not ntob(topic.is_locked) %>">
+      <input class="warn" type="submit" id="lock" value="<%= ntob(topic.is_locked) and "Unlock topic" or "Lock topic" %>">
+    </form>
+  <% end %>
+  </div>
+</nav>
+
 <% if #threads_list == 0 then %>
   <p>There are no threads in this topic.</p>
 <% else %>
-  <ul>
-    <% for _, thread in ipairs(threads_list) do %>
-      <li>
-      <a href="<%= url_for("thread", {slug = thread.slug}) %>"><%= thread.title %></a><% if ntob(thread.is_stickied) then %> - pinned<% end %>
-      </li>
-    <% end %>
-  </ul>
+  <% for _, thread in ipairs(threads_list) do %>
+    <% local is_stickied = ntob(thread.is_stickied) %>
+    <% local is_locked = ntob(thread.is_locked) %>
+    <div class="thread">
+      <div class="thread-sticky-container contain-svg">
+        <% if is_stickied then -%>
+          <% render("svg-icons.sticky") %>
+          <i>Stickied</i>
+        <% end -%>
+      </div>
+      <div class="thread-info-container">
+        <span>
+          <span class="thread-title"><a href="<%= url_for("thread", {slug = thread.slug}) %>"><%= thread.title %></a></span>
+          &bullet;
+          Started by <a href=<%= url_for("user", {username = thread.started_by}) %>><%= thread.started_by %></a>
+          on <%= os.date("%c", thread.created_at) %>
+        </span>
+        <span>
+          Latest post by <a href="<%= url_for("user", {username = thread.latest_post_username}) %>"><%= thread.latest_post_username %></a>
+          <a href="<%= url_for("thread", {slug = thread.slug}, {after = thread.latest_post_id}) .. "#post-" .. thread.latest_post_id %>">on <%= os.date("%c", thread.latest_post_created_at) %></a>:
+        </span>
+        <span class="thread-info-post-preview">
+          <%- thread.latest_post_content %>
+        </span>
+      </div>
+      <div class="thread-locked-container contain-svg">
+        <% if is_locked then -%>
+          <% render("svg-icons.lock") %>
+          <i>Locked</i>
+        <% end -%>
+      </div>
+    </div>
+  <% end %>
 <% end %>
 
-<% if thread_create_error == ThreadCreateError.OK then %>
-<a href=<%= url_for("thread_create", nil, {topic_id = topic.id}) %>>New thread</a>
-<% elseif thread_create_error == ThreadCreateError.GUEST then %>
-<p>Your account is still pending confirmation by a moderator. You are not able to create a new thread or post at this time.</p>
-<% elseif thread_create_error == ThreadCreateError.LOGGED_OUT then %>
-<p>Only logged in users can create threads. <a href="<%= url_for("user_signup") %>">Sign up</a> or <a href="<%= url_for("user_login")%>">log in</a> to create a thread.</p>
-<% else %>
-<p>This topic is locked.</p>
-<% end %>
-
-<% if me:is_mod() then %>
-  <br>
-  <a href="<%= url_for("topic_edit", {slug = topic.slug}) %>">Edit topic</a>
-  <form method="post" action="<%= url_for("topic_edit", {slug = topic.slug}) %>">
-  <input type="hidden" name="is_locked" value="<%= not ntob(topic.is_locked) %>">
-  <p><%= "This topic is " .. (ntob(topic.is_locked) and "" or "un") .. "locked." %></p>
-  <input type="submit" id="lock" value="<%= ntob(topic.is_locked) and "Unlock" or "Lock" %>">
-  </form>
-<% end %>
+<nav id="bottomnav">
+  <% render("views.common.pagination", {page_count = pages, current_page = page}) %>
+</nav>

views/topics/topics.etlua

@@ -1,16 +1,33 @@
-<h1>Topics</h1>
+<nav class="darkbg">
+  <h1 class="thread-title">All topics</h1>
+  <% if me:is_mod() then %>
+    <a class="linkbutton" href="<%= url_for("topic_create") %>">Create new topic</a>
+  <% end %>
+</nav>
 
 <% if #topic_list == 0 then %>
-<p>There are no topics.</p>
+  <p>There are no topics.</p>
 <% else %>
-  <ul>
-  <% for i, v in ipairs(topic_list) do %>
-    <li>
-    <a href=<%= url_for("topic", {slug = v.slug}) %>><%= v.name %></a> - <%= v.description %>
-    </li>
+  <% for _, topic in ipairs(topic_list) do %>
+    <% local is_locked = ntob(topic.is_locked) %>
+    <div class="topic">
+      <div class="topic-info-container">
+        <a href=<%= url_for("topic", {slug = topic.slug}) %>><%= topic.name %></a>
+        <%= topic.description %>
+        <% if topic.latest_thread_username then %>
+        <span>
+          Latest thread: <a href="<%= url_for("thread", {slug = topic.latest_thread_slug}) %>"><%= topic.latest_thread_title %></a> by <a href="<%= url_for("user", {username = topic.latest_thread_username}) %>"><%= topic.latest_thread_username %></a> on <%= os.date("%c", topic.latest_thread_created_at) %>
+        </span>
+        <% else %>
+        <i>No threads yet.</i>
+        <% end %>
+      </div>
+      <div class="topic-locked-container contain-svg">
+        <% if is_locked then -%>
+          <% render("svg-icons.lock") %>
+          <i>Locked</i>
+        <% end -%>
+      </div>
+    </div>
   <% end %>
 <% end %>
-</ul>
-<% if me:is_mod() then %>
-<a href="<%= url_for("topic_create") %>">Create new topic</a>
-<% end %>

views/user/delete_confirm.etlua

@@ -1,12 +1,14 @@
-<h1>Are you sure you want to delete your account, <%= me.username %>?</h1>
-<p>This cannot be undone. This will not delete your posts, only anonymize them.</p>
-<p>If you are sure, please type your password below.</p>
+<div class="darkbg settings-container">
+  <h1>Are you sure you want to delete your account, <%= me.username %>?</h1>
+  <p>This cannot be undone. This will not delete your posts, only anonymize them.</p>
+  <p>If you are sure, please type your password below.</p>
 
-<% if err then %>
-  <h2><%= err %></h2>
-<% end %>
+  <% if infobox then %>
+    <% render("views.common.infobox", infobox) %>
+  <% end %>
 
-<form method="post" action="<%= url_for("user_delete", {username = me.username}) %>">
-  <input type="password" name="password" id="password" autocomplete="current-password" placeholder="Password" required><br>
-  <input class="critical" type="submit" value="Delete my account (NO UNDO)">
-</form>
+  <form method="post" action="<%= url_for("user_delete", {username = me.username}) %>">
+    <input type="password" name="password" id="password" autocomplete="current-password" placeholder="Password" required><br>
+    <input class="critical" type="submit" value="Delete my account (NO UNDO)">
+  </form>
+</div>

views/user/login.etlua

@@ -1,12 +1,13 @@
-<h1>Log In</h1>
-
-<% if err then %>
-<h2><%= err %></h2>
-<% end %>
-<form method="post" action="<%= url_for('user_login') %>" enctype="multipart/form-data">
-  <label for="username">Username</label><br>
-  <input type="text" id="username" name="username" required autocomplete="username"><br>
-  <label for="password">Password</label><br>
-  <input type="password" id="password" name="password" required autocomplete="current-password"><br>
-  <input type="submit" value="Log in">
-</form>
+<div class="darkbg login-container">
+  <h1>Log In</h1>
+  <% if infobox then %>
+    <% render("views.common.infobox", infobox) %>
+  <% end %>
+  <form method="post" action="<%= url_for('user_login') %>" enctype="multipart/form-data">
+    <label for="username">Username</label><br>
+    <input type="text" id="username" name="username" required autocomplete="username"><br>
+    <label for="password">Password</label><br>
+    <input type="password" id="password" name="password" required autocomplete="current-password"><br>
+    <input type="submit" value="Log in">
+  </form>
+</div>

views/user/settings.etlua

@@ -1,20 +1,25 @@
-<h1>User settings</h1>
-<% if flash_msg then %>
-  <h2><%= flash_msg %></h2>
-<% end %>
-<form method="post" action="<%= url_for("user_set_avatar", {username = me.username}) %>" enctype="multipart/form-data">
-  <img src="<%= avatar_url(me) %>"><br>
-  <input id="file" type="file" name="avatar" accept="image/*">
-  <input type="submit" value="Update avatar">
-<% if not me:is_default_avatar() then %>
-  <input type="submit" value="Clear avatar" formaction="<%= url_for("user_clear_avatar", {username = me.username}) %>">
-<% end %>
-<br>
-</form>
-<form method="post" action="">
-  <label for="status">Status</label>
-  <input type="text" id="status" name="status" value="<%= me.status %>" maxlength="30"><br>
-  <input type="submit" value="Save status">
-</form>
-<br>
-<a class="linkbutton critical" href="<%= url_for("user_delete_confirm", {username = me.username}) %>">Delete account</a>
+<% local disable_avatar = me:is_logged_in_guest() %>
+<div class="darkbg settings-container">
+  <h1>User settings</h1>
+  <% if infobox then %>
+    <% render("views.common.infobox", infobox) %>
+  <% end %>
+  <form class="avatar-form" method="post" action="<%= url_for("user_set_avatar", {username = me.username}) %>" enctype="multipart/form-data">
+    <img src="<%= avatar_url(me) %>">
+    <input id="file" type="file" name="avatar" accept="image/*" required>
+    <div>
+    <input type="submit" value="Update avatar" <%= disable_avatar and "disabled=disabled" %>>
+  <% if not me:is_default_avatar() then %>
+    <input type="submit" value="Clear avatar" formaction="<%= url_for("user_clear_avatar", {username = me.username}) %>" formnovalidate>
+  <% end %>
+  </div>
+  </form>
+  <form method="post" action="">
+    <label for="status">Status</label>
+    <input type="text" id="status" name="status" value="<%= me.status %>" maxlength="30">
+    <input type="submit" value="Save status">
+  </form>
+  <div>
+  <a class="linkbutton critical" href="<%= url_for("user_delete_confirm", {username = me.username}) %>">Delete account</a>
+  </div>
+</div>

views/user/signup.etlua

@@ -1,15 +1,16 @@
-<h1>Sign up</h1>
-
-<% if err then %>
-<h2><%= err %></h2>
-<% end %>
-<form method="post" action="<%= url_for('user_signup') %>" enctype="multipart/form-data">
-  <label for="username">Username</label><br>
-  <input type="text" id="username" name="username" pattern="[\w\-]{3,20}" title="3-20 characters. Only upper and lowercase letters, hyphens, and underscores" required autocomplete="username"><br>
-  <label for="password">Password</label><br>
-  <input type="password" id="password" name="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
-  <label for="password2">Confirm Password</label><br>
-  <input type="password" id="password2" name="password2" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
-  <input type="submit" value="Sign up">
-</form>
-<p>After you sign up, a moderator will need to confirm your account before you will be allowed to post.</p>
+<div class="darkbg login-container">
+  <h1>Sign up</h1>
+  <% if infobox then %>
+    <% render("views.common.infobox", infobox) %>
+  <% end %>
+  <form method="post" action="<%= url_for('user_signup') %>" enctype="multipart/form-data">
+    <label for="username">Username</label><br>
+    <input type="text" id="username" name="username" pattern="[\w\-]{3,20}" title="3-20 characters. Only upper and lowercase letters, hyphens, and underscores" required autocomplete="username"><br>
+    <label for="password">Password</label><br>
+    <input type="password" id="password" name="password" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <label for="password2">Confirm Password</label><br>
+    <input type="password" id="password2" name="password2" pattern="(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_])(?!.*\s).{10,}" title="10+ chars with: 1 uppercase, 1 lowercase, 1 number, 1 special char, and no spaces" required autocomplete="new-password"><br>
+    <input type="submit" value="Sign up">
+  </form>
+  <p>After you sign up, a moderator will need to confirm your account before you will be allowed to post.</p>
+</div>

views/user/user.etlua

@@ -1,7 +1,6 @@
-<% if just_logged_in then %>
-  <h1>Logged in successfully.</h1>
+<% if infobox then %>
+  <% render("views.common.infobox", pop_infobox) %>
 <% end %>
-<% render("views.common.topnav") -%>
 <div class="darkbg">
   <h1 class="thread-title">Latest posts by <i><%= user.username %></i></h1>
   <div>