Settings can be loaded

package-lock.json

@@ -932,6 +932,11 @@
         "safe-buffer": "~5.1.1"
       }
     },
+    "cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-ZwrFkGJxUR3EIoXtO+yVE69Eb7KlixbaeAWfBQB9vVsNn/o+Yw69gBWSSDK825hQNdN+wF8zELf3dFNl/kxkUA=="
+    },
     "core-js": {
       "version": "2.6.11",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",

package.json

@@ -14,6 +14,7 @@
   "license": "AGPL-3.0-only",
   "dependencies": {
     "better-sqlite3": "^6.0.1",
+    "cookie": "^0.4.1",
     "feed": "github:cloudrac3r/feed#f42b4d7183fc2b6e566cb400ad083c4dd714c858",
     "mixin-deep": "^2.0.1",
     "node-dir": "^0.1.17",

src/site/api/settings.js

@@ -1,13 +1,16 @@
 const constants = require("../../lib/constants")
 const {render, redirect} = require("pinski/plugins")
+const {getSettings} = require("./utils/getsettings")
 const crypto = require("crypto")
 const db = require("../../lib/db")
 
 module.exports = [
 	{
-		route: "/settings", methods: ["GET"], code: async ({url}) => {
+		route: "/settings", methods: ["GET"], code: async ({req, url}) => {
+			const settings = getSettings(req)
+			// console.log(settings)
 			const saved = url.searchParams.has("saved")
-			return render(200, "pug/settings.pug", {saved})
+			return render(200, "pug/settings.pug", {saved, settings})
 		}
 	},
 	{
@@ -31,6 +34,7 @@ module.exports = [
 				}
 				prepared[setting.name] = valueCorrectType
 			}
+			// console.log(prepared)
 			const checkPrepared = db.prepare("SELECT token FROM UserSettings WHERE token = ?")
 			do {
 				prepared.token = crypto.randomBytes(16).toString("hex")

src/site/api/utils/getsettings.js

@@ -0,0 +1,28 @@
+const {parse} = require("cookie")
+
+const constants = require("../../../lib/constants")
+const db = require("../../../lib/db")
+
+function addDefaults(input = {}) {
+	const result = {}
+	for (const setting of constants.user_settings) {
+		if (input[setting.name] !== undefined) {
+			result[setting.name] = input[setting.name]
+		} else {
+			result[setting.name] = setting.default
+		}
+	}
+	return result
+}
+
+function getSettings(req) {
+	if (!req.headers.cookie) return addDefaults()
+	const cookie = parse(req.headers.cookie)
+	const settings = cookie.settings
+	if (!settings) return addDefaults()
+	const row = db.prepare("SELECT * FROM UserSettings WHERE token = ?").get(settings)
+	if (!row) return addDefaults()
+	return addDefaults(row)
+}
+
+module.exports.getSettings = getSettings

src/site/pug/settings.pug

@@ -1,9 +1,4 @@
-//- Needs saved
+//- Needs saved, settings
-
-mixin form-component(id, description)
-	.field-row
-		label.description(for=id)= description
-		block(id="ten")
 
 mixin fieldset(name)
 	fieldset
@@ -11,15 +6,15 @@ mixin fieldset(name)
 		.fieldset-contents
 			block
 
-mixin input(id, description, value, disabled)
+mixin input(id, description, disabled)
 	.field-row
 		label.description(for=id)= description
-		input(type="text" id=id name=id value=value disabled=disabled)
+		input(type="text" id=id name=id value=settings[id] disabled=disabled)
 
-mixin checkbox(id, description, label, checked, disabled)
+mixin checkbox(id, description, label, disabled)
 	.field-row.checkbox-row
 		label.description(for=id)= description
-		input.checkbox(type="checkbox" id=id name=id checked=checked disabled=disabled autocomplete="off")
+		input.checkbox(type="checkbox" id=id name=id checked=(settings[id] !== 0) disabled=disabled autocomplete="off")
 		label.pill(for=id tabindex=(disabled ? null : 0) onkeypress=`[" ", "Enter"].includes(event.key) && this.click()`)= label
 			span.fake-checkbox
 
@@ -27,7 +22,8 @@ mixin select(id, description, disabled, options)
 	.field-row
 		label.description(for=id)= description
 		select(id=id name=id disabled=disabled)
-			block
+			each option in options
+				option(value=option.value selected=(option.value === settings[id]))= option.text
 
 doctype html
 html
@@ -44,24 +40,28 @@ html
 				h1 Settings
 
 				+fieldset("Features")
-					+select("language", "Language", true)
+					+select("language", "Language", true, [
-						option English (International)
+						{value: "en", text: "English (International)"},
+						{value: "en-us", text: "English (US)"}
+					])
 
-					+checkbox("show_comments", "Display comments", "Display", false, true)
+					+checkbox("show_comments", "Display comments", "Display", true)
 
-					+checkbox("link_hashtags", "Clickable hashtags", "Clickable", false, true)
+					+checkbox("link_hashtags", "Clickable hashtags", "Clickable", true)
 
-					+checkbox("spa", "Fast navigation", "Enabled", true, true)
+					+checkbox("spa", "Fast navigation", "Enabled", true)
 
 				+fieldset("Appearance")
-					+select("theme", "Theme", true)
+					+select("theme", "Theme", true, [
-						option Classic
+						{value: "classic", text: "Classic"}
+					])
 
-					+select("caption_side", "Caption side", true)
+					+select("caption_side", "Caption side", true, [
-						option Left (Bibliogram)
+						{value: "left", text: "Left (Bibliogram)"},
-						option Right (Instagram)
+						{value: "right", text: "Right (Instagram)"}
+					])
 
-					+checkbox("display_alt", "Display alt text inline", "Display", false, true)
+					+checkbox("display_alt", "Display alt text inline", "Display", true)
 
 				//- div
 					//- Here are all the possible input styles. Uncomment to test styling.