Added preferences and serialize to repo. Stale sessions are refreshed on restart or after a period of time now.

components/user/preferences.vue

@@ -0,0 +1,94 @@
+<script setup>
+import { inject, reactive } from 'vue';
+
+import Checkbox from '#/components/form/checkbox.vue';
+
+import { patch } from '#/src/api.js';
+
+const pageContext = inject('pageContext');
+const { user } = pageContext;
+
+const settings = reactive({
+	...user.settings,
+});
+
+async function updateSettings() {
+	await patch('/me/settings', settings);
+}
+</script>
+
+<template>
+	<form
+		class="profile-section"
+		@submit.prevent
+	>
+		<div class="setting">
+			<span class="setting-label">
+				<strong class="setting-title">Enable alert e-mails</strong>
+				<span class="setting-description">Whether you receive e-mail alerts</span>
+			</span>
+
+			<span class="setting-value">
+				<Checkbox
+					:checked="settings.alertEmailEnabled"
+					@change="(checked) => { settings.alertEmailEnabled = checked; updateSettings(); }"
+				/>
+			</span>
+		</div>
+
+		<label class="setting">
+			<span class="setting-label">
+				<strong class="setting-title">Alert e-mail frequency</strong>
+				<span class="setting-description">How often you receive your e-mail alerts</span>
+			</span>
+
+			<span class="setting-value">
+				<select
+					v-model="settings.alertEmailFrequency"
+					class="input"
+					@change="updateSettings"
+				>
+					<option :value="null">Immediately</option>
+					<option value="daily">Daily</option>
+					<option value="weekly">Weekly</option>
+					<option value="monthly">Monthly</option>
+				</select>
+			</span>
+		</label>
+	</form>
+</template>
+
+<style scoped>
+.input {
+	background: var(--background);
+}
+
+.setting {
+	width: 100%;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	box-sizing: border-box;
+	padding: .75rem 1rem;
+	border-bottom: solid 1px var(--glass-weak-30);
+
+	&:hover {
+		border-color: var(--glass-weak-20);
+	}
+}
+
+.setting-label {
+	display: flex;
+	flex-direction: column;
+}
+
+.setting-title {
+	color: var(--glass-strong-20);
+	margin-bottom: .25rem;
+}
+
+.setting-description {
+	color: var(--glass);
+	font-size: .9rem;
+}
+</style>

src/web/serialize.js

@@ -0,0 +1,13 @@
+import { stringify } from '@brillout/json-serializer/stringify';
+
+export default function serializeApiResponses(req, res, next) {
+	res.json = function json(obj) { // eslint-disable-line no-param-reassign
+		if (!this.get('Content-Type')) {
+			this.set('Content-Type', 'application/json');
+		}
+
+		return this.send(stringify(obj));
+	};
+
+	next();
+}