From 3c95af87f5b9ce848a33ec0402f6489b36914b19 Mon Sep 17 00:00:00 2001
From: Al McKinlay <github@10people.co.uk>
Date: Tue, 25 Aug 2020 16:42:03 +0100
Subject: [PATCH] Add settings tabs

---
 client/components/Windows/Settings.vue        | 660 ++----------------
 client/components/Windows/settings/Main.vue   | 244 +++++++
 .../components/Windows/settings/Messages.vue  | 180 +++++
 .../Windows/settings/Notifications.vue        | 176 +++++
 client/js/router.js                           |  24 +
 5 files changed, 692 insertions(+), 592 deletions(-)
 create mode 100644 client/components/Windows/settings/Main.vue
 create mode 100644 client/components/Windows/settings/Messages.vue
 create mode 100644 client/components/Windows/settings/Notifications.vue

diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index 927238a1..f9d1ce92 100644
--- a/client/components/Windows/Settings.vue
+++ b/client/components/Windows/Settings.vue
@@ -4,573 +4,105 @@
 			<SidebarToggle />
 		</div>
 		<form ref="settingsForm" class="container" @change="onChange" @submit.prevent>
-			<h1 class="title">Settings</h1>
+			<div class="static">
+				<h1 class="title">Settings - {{ $route.name }}</h1>
 
-			<div>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.advanced"
-						type="checkbox"
-						name="advanced"
-					/>
-					Advanced settings
-				</label>
-			</div>
-
-			<div v-if="canRegisterProtocol || hasInstallPromptEvent">
-				<h2>Native app</h2>
-				<button
-					v-if="hasInstallPromptEvent"
-					type="button"
-					class="btn"
-					@click.prevent="nativeInstallPrompt"
-				>
-					Add The Lounge to Home screen
-				</button>
-				<button
-					v-if="canRegisterProtocol"
-					type="button"
-					class="btn"
-					@click.prevent="registerProtocol"
-				>
-					Open irc:// URLs with The Lounge
-				</button>
-			</div>
-
-			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
-				<h2>Settings synchronisation</h2>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.syncSettings"
-						type="checkbox"
-						name="syncSettings"
-					/>
-					Synchronize settings with other clients
-				</label>
-				<template v-if="!$store.state.settings.syncSettings">
-					<div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
-						<p>
-							<strong>Warning:</strong> Checking this box will override the settings
-							of this client with those stored on the server.
-						</p>
-						<p>
-							Use the button below to enable synchronization, and override any
-							settings already synced to the server.
-						</p>
-						<button type="button" class="btn btn-small" @click="onForceSyncClick">
-							Sync settings and enable
-						</button>
-					</div>
-					<div v-else class="settings-sync-panel">
-						<p>
-							<strong>Warning:</strong> No settings have been synced before. Enabling
-							this will sync all settings of this client as the base for other
-							clients.
-						</p>
-					</div>
-				</template>
-			</div>
-
-			<h2>Messages</h2>
-			<div>
-				<label class="opt">
-					<input :checked="$store.state.settings.motd" type="checkbox" name="motd" />
-					Show <abbr title="Message Of The Day">MOTD</abbr>
-				</label>
-			</div>
-			<div>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.showSeconds"
-						type="checkbox"
-						name="showSeconds"
-					/>
-					Show seconds in timestamp
-				</label>
-			</div>
-			<div>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.use12hClock"
-						type="checkbox"
-						name="use12hClock"
-					/>
-					Show 12-hour timestamps
-				</label>
-			</div>
-			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
-				<h2>Automatic away message</h2>
-
-				<label class="opt">
-					<label for="awayMessage" class="sr-only">Automatic away message</label>
-					<input
-						id="awayMessage"
-						:value="$store.state.settings.awayMessage"
-						type="text"
-						name="awayMessage"
-						class="input"
-						placeholder="Away message if The Lounge is not open"
-					/>
-				</label>
-			</div>
-			<h2 id="label-status-messages">
-				Status messages
-				<span
-					class="tooltipped tooltipped-n tooltipped-no-delay"
-					aria-label="Joins, parts, quits, kicks, nick changes, and mode changes"
-				>
-					<button class="extra-help" />
-				</span>
-			</h2>
-			<div role="group" aria-labelledby="label-status-messages">
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.statusMessages === 'shown'"
-						type="radio"
-						name="statusMessages"
-						value="shown"
-					/>
-					Show all status messages individually
-				</label>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.statusMessages === 'condensed'"
-						type="radio"
-						name="statusMessages"
-						value="condensed"
-					/>
-					Condense status messages together
-				</label>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.statusMessages === 'hidden'"
-						type="radio"
-						name="statusMessages"
-						value="hidden"
-					/>
-					Hide all status messages
-				</label>
-			</div>
-			<h2>Visual Aids</h2>
-			<div>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.coloredNicks"
-						type="checkbox"
-						name="coloredNicks"
-					/>
-					Enable colored nicknames
-				</label>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.autocomplete"
-						type="checkbox"
-						name="autocomplete"
-					/>
-					Enable autocomplete
-				</label>
-			</div>
-			<div v-if="$store.state.settings.advanced">
-				<label class="opt">
-					<label for="nickPostfix" class="sr-only">
-						Nick autocomplete postfix (for example a comma)
-					</label>
-					<input
-						id="nickPostfix"
-						:value="$store.state.settings.nickPostfix"
-						type="text"
-						name="nickPostfix"
-						class="input"
-						placeholder="Nick autocomplete postfix (e.g. ', ')"
-					/>
-				</label>
-			</div>
-
-			<h2>Theme</h2>
-			<div>
-				<label for="theme-select" class="sr-only">Theme</label>
-				<select
-					id="theme-select"
-					:value="$store.state.settings.theme"
-					name="theme"
-					class="input"
-				>
-					<option
-						v-for="theme in $store.state.serverConfiguration.themes"
-						:key="theme.name"
-						:value="theme.name"
-					>
-						{{ theme.displayName }}
-					</option>
-				</select>
-			</div>
-
-			<template v-if="$store.state.serverConfiguration.prefetch">
-				<h2>Link previews</h2>
 				<div>
 					<label class="opt">
 						<input
-							:checked="$store.state.settings.media"
+							:checked="$store.state.settings.advanced"
 							type="checkbox"
-							name="media"
+							name="advanced"
 						/>
-						Auto-expand media
+						Advanced settings
 					</label>
 				</div>
-				<div>
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.links"
-							type="checkbox"
-							name="links"
-						/>
-						Auto-expand websites
-					</label>
-				</div>
-			</template>
+			</div>
 
-			<div
-				v-if="$store.state.settings.advanced && $store.state.serverConfiguration.fileUpload"
-			>
-				<h2>File uploads</h2>
-				<div>
-					<label class="opt">
-						<input
-							:checked="$store.state.settings.uploadCanvas"
-							type="checkbox"
-							name="uploadCanvas"
-						/>
-						Attempt to remove metadata from images before uploading
-						<span
-							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="This option renders the image into a canvas element to remove metadata from the image.
-This may break orientation if your browser does not support that."
+			<div class="subcontainer">
+				<div class="tabs">
+					<ul>
+						<router-link
+							to="/settings/main"
+							tag="li"
+							active-class="active"
+							:class="['channel-list-item']"
+							aria-label="Main Settings"
+							role="tab"
+							aria-controls="main"
+							:aria-selected="$route.name === 'Main'"
+							>Main</router-link
 						>
-							<button class="extra-help" />
-						</span>
-					</label>
-				</div>
-			</div>
-
-			<template v-if="!$store.state.serverConfiguration.public">
-				<h2>Push Notifications</h2>
-				<div>
-					<button
-						id="pushNotifications"
-						type="button"
-						class="btn"
-						:disabled="
-							$store.state.pushNotificationState !== 'supported' &&
-							$store.state.pushNotificationState !== 'subscribed'
-						"
-						@click="onPushButtonClick"
-					>
-						<template v-if="$store.state.pushNotificationState === 'subscribed'">
-							Unsubscribe from push notifications
-						</template>
-						<template v-else-if="$store.state.pushNotificationState === 'loading'">
-							Loading…
-						</template>
-						<template v-else> Subscribe to push notifications </template>
-					</button>
-					<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
-						<strong>Warning</strong>: Push notifications are only supported over HTTPS
-						connections.
-					</div>
-					<div v-if="$store.state.pushNotificationState === 'unsupported'" class="error">
-						<strong>Warning</strong>:
-						<span>Push notifications are not supported by your browser.</span>
-
-						<div v-if="isIOS" class="apple-push-unsupported">
-							Safari does
-							<a
-								href="https://bugs.webkit.org/show_bug.cgi?id=182566"
-								target="_blank"
-								rel="noopener"
-								>not support the web push notification specification</a
-							>, and because all browsers on iOS use Safari under the hood, The Lounge
-							is unable to provide push notifications on iOS devices.
-						</div>
-					</div>
-				</div>
-			</template>
-
-			<h2>Browser Notifications</h2>
-			<div>
-				<label class="opt">
-					<input
-						id="desktopNotifications"
-						:checked="$store.state.settings.desktopNotifications"
-						type="checkbox"
-						name="desktopNotifications"
-					/>
-					Enable browser notifications<br />
-					<div
-						v-if="$store.state.desktopNotificationState === 'unsupported'"
-						class="error"
-					>
-						<strong>Warning</strong>: Notifications are not supported by your browser.
-					</div>
-					<div
-						v-if="$store.state.desktopNotificationState === 'blocked'"
-						id="warnBlockedDesktopNotifications"
-						class="error"
-					>
-						<strong>Warning</strong>: Notifications are blocked by your browser.
-					</div>
-				</label>
-			</div>
-			<div>
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.notification"
-						type="checkbox"
-						name="notification"
-					/>
-					Enable notification sound
-				</label>
-			</div>
-			<div>
-				<div class="opt">
-					<button id="play" @click.prevent="playNotification">Play sound</button>
-				</div>
-			</div>
-
-			<div v-if="$store.state.settings.advanced">
-				<label class="opt">
-					<input
-						:checked="$store.state.settings.notifyAllMessages"
-						type="checkbox"
-						name="notifyAllMessages"
-					/>
-					Enable notification for all messages
-				</label>
-			</div>
-
-			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
-				<label class="opt">
-					<label for="highlights" class="opt">
-						Custom highlights
-						<span
-							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="If a message contains any of these comma-separated 
-expressions, it will trigger a highlight."
+						<router-link
+							to="/settings/messages"
+							tag="li"
+							active-class="active"
+							:class="['channel-list-item']"
+							aria-label="Message Settings"
+							role="tab"
+							aria-controls="message"
+							:aria-selected="$route.name === 'Messages'"
+							>Messages</router-link
 						>
-							<button class="extra-help" />
-						</span>
-					</label>
-					<input
-						id="highlights"
-						:value="$store.state.settings.highlights"
-						type="text"
-						name="highlights"
-						class="input"
-						placeholder="Comma-separated, e.g.: word, some more words, anotherword"
-					/>
-				</label>
-			</div>
-
-			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
-				<label class="opt">
-					<label for="highlightExceptions" class="opt">
-						Highlight exceptions
-						<span
-							class="tooltipped tooltipped-n tooltipped-no-delay"
-							aria-label="If a message contains any of these comma-separated 
-expressions, it will not trigger a highlight even if it contains 
-your nickname or expressions defined in custom highlights."
+						<router-link
+							to="/settings/notifications"
+							tag="li"
+							active-class="active"
+							:class="['channel-list-item']"
+							aria-label="Notifications Settings"
+							role="tab"
+							aria-controls="notifications"
+							:aria-selected="$route.name === 'Notifications'"
+							>Notifications</router-link
 						>
-							<button class="extra-help" />
-						</span>
-					</label>
-					<input
-						id="highlightExceptions"
-						:value="$store.state.settings.highlightExceptions"
-						type="text"
-						name="highlightExceptions"
-						class="input"
-						placeholder="Comma-separated, e.g.: word, some more words, anotherword"
-					/>
-				</label>
-			</div>
-
-			<div
-				v-if="
-					!$store.state.serverConfiguration.public &&
-					!$store.state.serverConfiguration.ldapEnabled
-				"
-				id="change-password"
-				role="group"
-				aria-labelledby="label-change-password"
-			>
-				<h2 id="label-change-password">Change password</h2>
-				<div class="password-container">
-					<label for="old_password_input" class="sr-only"> Enter current password </label>
-					<RevealPassword v-slot:default="slotProps">
-						<input
-							id="old_password_input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							name="old_password"
-							class="input"
-							placeholder="Enter current password"
-						/>
-					</RevealPassword>
+					</ul>
 				</div>
-				<div class="password-container">
-					<label for="new_password_input" class="sr-only">
-						Enter desired new password
-					</label>
-					<RevealPassword v-slot:default="slotProps">
-						<input
-							id="new_password_input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							name="new_password"
-							class="input"
-							placeholder="Enter desired new password"
-						/>
-					</RevealPassword>
-				</div>
-				<div class="password-container">
-					<label for="verify_password_input" class="sr-only"> Repeat new password </label>
-					<RevealPassword v-slot:default="slotProps">
-						<input
-							id="verify_password_input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							name="verify_password"
-							class="input"
-							placeholder="Repeat new password"
-						/>
-					</RevealPassword>
-				</div>
-				<div
-					v-if="passwordChangeStatus && passwordChangeStatus.success"
-					class="feedback success"
-				>
-					Successfully updated your password
-				</div>
-				<div
-					v-else-if="passwordChangeStatus && passwordChangeStatus.error"
-					class="feedback error"
-				>
-					{{ passwordErrors[passwordChangeStatus.error] }}
-				</div>
-				<div>
-					<button type="submit" class="btn" @click.prevent="changePassword">
-						Change password
-					</button>
-				</div>
-			</div>
 
-			<div v-if="$store.state.settings.advanced">
-				<h2>Custom Stylesheet</h2>
-				<label for="user-specified-css-input" class="sr-only">
-					Custom stylesheet. You can override any style with CSS here.
-				</label>
-				<textarea
-					id="user-specified-css-input"
-					:value="$store.state.settings.userStyles"
-					class="input"
-					name="userStyles"
-					placeholder="/* You can override any style with CSS here */"
-				/>
-			</div>
-
-			<div v-if="!$store.state.serverConfiguration.public" class="session-list" role="group">
-				<h2>Sessions</h2>
-
-				<h3>Current session</h3>
-				<Session v-if="currentSession" :session="currentSession" />
-
-				<template v-if="activeSessions.length > 0">
-					<h3>Active sessions</h3>
-					<Session
-						v-for="session in activeSessions"
-						:key="session.token"
-						:session="session"
-					/>
-				</template>
-
-				<h3>Other sessions</h3>
-				<p v-if="$store.state.sessions.length === 0">Loading…</p>
-				<p v-else-if="otherSessions.length === 0">
-					<em>You are not currently logged in to any other device.</em>
-				</p>
-				<Session
-					v-for="session in otherSessions"
-					v-else
-					:key="session.token"
-					:session="session"
-				/>
+				<router-view></router-view>
 			</div>
 		</form>
 	</div>
 </template>
 
 <style>
-textarea#user-specified-css-input {
-	height: 100px;
+.container {
+	display: flex;
+	flex-flow: column;
+	width: 720px;
+}
+
+.static {
+	padding-left: 230px;
+}
+
+.settings {
+	width: 480px;
+}
+
+.subcontainer {
+	display: flex;
+	flex-flow: row;
+}
+
+.tabs {
+	width: 240px;
+}
+
+.tabs ul {
+	list-style: none;
+	padding-top: 10px;
+	padding-left: 0;
 }
 </style>
 
 <script>
-import socket from "../../js/socket";
-import webpush from "../../js/webpush";
-import RevealPassword from "../RevealPassword.vue";
-import Session from "../Session.vue";
 import SidebarToggle from "../SidebarToggle.vue";
 
-let installPromptEvent = null;
-
-window.addEventListener("beforeinstallprompt", (e) => {
-	e.preventDefault();
-	installPromptEvent = e;
-});
-
 export default {
 	name: "Settings",
 	components: {
-		RevealPassword,
-		Session,
 		SidebarToggle,
 	},
-	data() {
-		return {
-			canRegisterProtocol: false,
-			passwordChangeStatus: null,
-			passwordErrors: {
-				missing_fields: "Please enter a new password",
-				password_mismatch: "Both new password fields must match",
-				password_incorrect:
-					"The current password field does not match your account password",
-				update_failed: "Failed to update your password",
-			},
-			isIOS: navigator.platform.match(/(iPhone|iPod|iPad)/i) || false,
-		};
-	},
-	computed: {
-		hasInstallPromptEvent() {
-			// TODO: This doesn't hide the button after clicking
-			return installPromptEvent !== null;
-		},
-		currentSession() {
-			return this.$store.state.sessions.find((item) => item.current);
-		},
-		activeSessions() {
-			return this.$store.state.sessions.filter((item) => !item.current && item.active > 0);
-		},
-		otherSessions() {
-			return this.$store.state.sessions.filter((item) => !item.current && !item.active);
-		},
-	},
-	mounted() {
-		socket.emit("sessions:get");
-
-		// Enable protocol handler registration if supported,
-		// and the network configuration is not locked
-		this.canRegisterProtocol =
-			window.navigator.registerProtocolHandler &&
-			!this.$store.state.serverConfiguration.lockNetwork;
-	},
 	methods: {
 		onChange(event) {
 			const ignore = ["old_password", "new_password", "verify_password"];
@@ -591,62 +123,6 @@ export default {
 
 			this.$store.dispatch("settings/update", {name, value, sync: true});
 		},
-		changePassword() {
-			const allFields = new FormData(this.$refs.settingsForm);
-			const data = {
-				old_password: allFields.get("old_password"),
-				new_password: allFields.get("new_password"),
-				verify_password: allFields.get("verify_password"),
-			};
-
-			if (!data.old_password || !data.new_password || !data.verify_password) {
-				this.passwordChangeStatus = {
-					success: false,
-					error: "missing_fields",
-				};
-				return;
-			}
-
-			if (data.new_password !== data.verify_password) {
-				this.passwordChangeStatus = {
-					success: false,
-					error: "password_mismatch",
-				};
-				return;
-			}
-
-			socket.once("change-password", (response) => {
-				this.passwordChangeStatus = response;
-			});
-
-			socket.emit("change-password", data);
-		},
-		onForceSyncClick() {
-			this.$store.dispatch("settings/syncAll", true);
-			this.$store.dispatch("settings/update", {
-				name: "syncSettings",
-				value: true,
-				sync: true,
-			});
-		},
-		registerProtocol() {
-			const uri = document.location.origin + document.location.pathname + "?uri=%s";
-
-			window.navigator.registerProtocolHandler("irc", uri, "The Lounge");
-			window.navigator.registerProtocolHandler("ircs", uri, "The Lounge");
-		},
-		nativeInstallPrompt() {
-			installPromptEvent.prompt();
-			installPromptEvent = null;
-		},
-		playNotification() {
-			const pop = new Audio();
-			pop.src = "audio/pop.wav";
-			pop.play();
-		},
-		onPushButtonClick() {
-			webpush.togglePushSubscription();
-		},
 	},
 };
 </script>
diff --git a/client/components/Windows/settings/Main.vue b/client/components/Windows/settings/Main.vue
new file mode 100644
index 00000000..2bc97366
--- /dev/null
+++ b/client/components/Windows/settings/Main.vue
@@ -0,0 +1,244 @@
+<template>
+	<div class="settings">
+		<div v-if="canRegisterProtocol || hasInstallPromptEvent">
+			<h2>Native app</h2>
+			<button
+				v-if="hasInstallPromptEvent"
+				type="button"
+				class="btn"
+				@click.prevent="nativeInstallPrompt"
+			>
+				Add The Lounge to Home screen
+			</button>
+			<button
+				v-if="canRegisterProtocol"
+				type="button"
+				class="btn"
+				@click.prevent="registerProtocol"
+			>
+				Open irc:// URLs with The Lounge
+			</button>
+		</div>
+
+		<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
+			<h2>Settings synchronisation</h2>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.syncSettings"
+					type="checkbox"
+					name="syncSettings"
+				/>
+				Synchronize settings with other clients
+			</label>
+			<template v-if="!$store.state.settings.syncSettings">
+				<div v-if="$store.state.serverHasSettings" class="settings-sync-panel">
+					<p>
+						<strong>Warning:</strong> Checking this box will override the settings of
+						this client with those stored on the server.
+					</p>
+					<p>
+						Use the button below to enable synchronization, and override any settings
+						already synced to the server.
+					</p>
+					<button type="button" class="btn btn-small" @click="onForceSyncClick">
+						Sync settings and enable
+					</button>
+				</div>
+				<div v-else class="settings-sync-panel">
+					<p>
+						<strong>Warning:</strong> No settings have been synced before. Enabling this
+						will sync all settings of this client as the base for other clients.
+					</p>
+				</div>
+			</template>
+		</div>
+
+		<div
+			v-if="
+				!$store.state.serverConfiguration.public &&
+				!$store.state.serverConfiguration.ldapEnabled
+			"
+			id="change-password"
+			role="group"
+			aria-labelledby="label-change-password"
+		>
+			<h2 id="label-change-password">Change password</h2>
+			<div class="password-container">
+				<label for="old_password_input" class="sr-only">
+					Enter current password
+				</label>
+				<RevealPassword v-slot:default="slotProps">
+					<input
+						id="old_password_input"
+						:type="slotProps.isVisible ? 'text' : 'password'"
+						name="old_password"
+						class="input"
+						placeholder="Enter current password"
+					/>
+				</RevealPassword>
+			</div>
+			<div class="password-container">
+				<label for="new_password_input" class="sr-only">
+					Enter desired new password
+				</label>
+				<RevealPassword v-slot:default="slotProps">
+					<input
+						id="new_password_input"
+						:type="slotProps.isVisible ? 'text' : 'password'"
+						name="new_password"
+						class="input"
+						placeholder="Enter desired new password"
+					/>
+				</RevealPassword>
+			</div>
+			<div class="password-container">
+				<label for="verify_password_input" class="sr-only">
+					Repeat new password
+				</label>
+				<RevealPassword v-slot:default="slotProps">
+					<input
+						id="verify_password_input"
+						:type="slotProps.isVisible ? 'text' : 'password'"
+						name="verify_password"
+						class="input"
+						placeholder="Repeat new password"
+					/>
+				</RevealPassword>
+			</div>
+			<div
+				v-if="passwordChangeStatus && passwordChangeStatus.success"
+				class="feedback success"
+			>
+				Successfully updated your password
+			</div>
+			<div
+				v-else-if="passwordChangeStatus && passwordChangeStatus.error"
+				class="feedback error"
+			>
+				{{ passwordErrors[passwordChangeStatus.error] }}
+			</div>
+			<div>
+				<button type="submit" class="btn" @click.prevent="changePassword">
+					Change password
+				</button>
+			</div>
+		</div>
+
+		<div v-if="$store.state.settings.advanced">
+			<h2>Custom Stylesheet</h2>
+			<label for="user-specified-css-input" class="sr-only">
+				Custom stylesheet. You can override any style with CSS here.
+			</label>
+			<textarea
+				id="user-specified-css-input"
+				:value="$store.state.settings.userStyles"
+				class="input"
+				name="userStyles"
+				placeholder="/* You can override any style with CSS here */"
+			/>
+		</div>
+
+		<div v-if="!$store.state.serverConfiguration.public" class="session-list" role="group">
+			<h2>Sessions</h2>
+
+			<h3>Current session</h3>
+			<Session v-if="currentSession" :session="currentSession" />
+
+			<template v-if="activeSessions.length > 0">
+				<h3>Active sessions</h3>
+				<Session
+					v-for="session in activeSessions"
+					:key="session.token"
+					:session="session"
+				/>
+			</template>
+
+			<h3>Other sessions</h3>
+			<p v-if="$store.state.sessions.length === 0">Loading…</p>
+			<p v-else-if="otherSessions.length === 0">
+				<em>You are not currently logged in to any other device.</em>
+			</p>
+			<Session
+				v-for="session in otherSessions"
+				v-else
+				:key="session.token"
+				:session="session"
+			/>
+		</div>
+	</div>
+</template>
+
+<style>
+textarea#user-specified-css-input {
+	height: 100px;
+}
+</style>
+
+<script>
+import socket from "../../../js/socket";
+import webpush from "../../../js/webpush";
+import Session from "../../Session.vue";
+
+let installPromptEvent = null;
+
+window.addEventListener("beforeinstallprompt", (e) => {
+	e.preventDefault();
+	installPromptEvent = e;
+});
+
+export default {
+	name: "MainSettings",
+	components: {
+		Session,
+	},
+	data() {
+		return {
+			canRegisterProtocol: false,
+		};
+	},
+	computed: {
+		hasInstallPromptEvent() {
+			// TODO: This doesn't hide the button after clicking
+			return installPromptEvent !== null;
+		},
+		currentSession() {
+			return this.$store.state.sessions.find((item) => item.current);
+		},
+		activeSessions() {
+			return this.$store.state.sessions.filter((item) => !item.current && item.active > 0);
+		},
+		otherSessions() {
+			return this.$store.state.sessions.filter((item) => !item.current && !item.active);
+		},
+	},
+	mounted() {
+		socket.emit("sessions:get");
+
+		// Enable protocol handler registration if supported,
+		// and the network configuration is not locked
+		this.canRegisterProtocol =
+			window.navigator.registerProtocolHandler &&
+			!this.$store.state.serverConfiguration.lockNetwork;
+	},
+	methods: {
+		onForceSyncClick() {
+			this.$store.dispatch("settings/syncAll", true);
+			this.$store.dispatch("settings/update", {
+				name: "syncSettings",
+				value: true,
+				sync: true,
+			});
+		},
+		registerProtocol() {
+			const uri = document.location.origin + document.location.pathname + "?uri=%s";
+
+			window.navigator.registerProtocolHandler("irc", uri, "The Lounge");
+			window.navigator.registerProtocolHandler("ircs", uri, "The Lounge");
+		},
+		nativeInstallPrompt() {
+			installPromptEvent.prompt();
+			installPromptEvent = null;
+		},
+	},
+};
+</script>
diff --git a/client/components/Windows/settings/Messages.vue b/client/components/Windows/settings/Messages.vue
new file mode 100644
index 00000000..cbdb1e47
--- /dev/null
+++ b/client/components/Windows/settings/Messages.vue
@@ -0,0 +1,180 @@
+<template>
+	<div class="settings">
+		<h2>Messages</h2>
+		<div>
+			<label class="opt">
+				<input :checked="$store.state.settings.motd" type="checkbox" name="motd" />
+				Show <abbr title="Message Of The Day">MOTD</abbr>
+			</label>
+		</div>
+		<div>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.showSeconds"
+					type="checkbox"
+					name="showSeconds"
+				/>
+				Show seconds in timestamp
+			</label>
+		</div>
+		<div>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.use12hClock"
+					type="checkbox"
+					name="use12hClock"
+				/>
+				Show 12-hour timestamps
+			</label>
+		</div>
+		<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
+			<h2>Automatic away message</h2>
+
+			<label class="opt">
+				<label for="awayMessage" class="sr-only">Automatic away message</label>
+				<input
+					id="awayMessage"
+					:value="$store.state.settings.awayMessage"
+					type="text"
+					name="awayMessage"
+					class="input"
+					placeholder="Away message if The Lounge is not open"
+				/>
+			</label>
+		</div>
+		<h2 id="label-status-messages">
+			Status messages
+			<span
+				class="tooltipped tooltipped-n tooltipped-no-delay"
+				aria-label="Joins, parts, quits, kicks, nick changes, and mode changes"
+			>
+				<button class="extra-help" />
+			</span>
+		</h2>
+		<div role="group" aria-labelledby="label-status-messages">
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.statusMessages === 'shown'"
+					type="radio"
+					name="statusMessages"
+					value="shown"
+				/>
+				Show all status messages individually
+			</label>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.statusMessages === 'condensed'"
+					type="radio"
+					name="statusMessages"
+					value="condensed"
+				/>
+				Condense status messages together
+			</label>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.statusMessages === 'hidden'"
+					type="radio"
+					name="statusMessages"
+					value="hidden"
+				/>
+				Hide all status messages
+			</label>
+		</div>
+		<h2>Visual Aids</h2>
+		<div>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.coloredNicks"
+					type="checkbox"
+					name="coloredNicks"
+				/>
+				Enable colored nicknames
+			</label>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.autocomplete"
+					type="checkbox"
+					name="autocomplete"
+				/>
+				Enable autocomplete
+			</label>
+		</div>
+		<div v-if="$store.state.settings.advanced">
+			<label class="opt">
+				<label for="nickPostfix" class="sr-only">
+					Nick autocomplete postfix (for example a comma)
+				</label>
+				<input
+					id="nickPostfix"
+					:value="$store.state.settings.nickPostfix"
+					type="text"
+					name="nickPostfix"
+					class="input"
+					placeholder="Nick autocomplete postfix (e.g. ', ')"
+				/>
+			</label>
+		</div>
+
+		<h2>Theme</h2>
+		<div>
+			<label for="theme-select" class="sr-only">Theme</label>
+			<select
+				id="theme-select"
+				:value="$store.state.settings.theme"
+				name="theme"
+				class="input"
+			>
+				<option
+					v-for="theme in $store.state.serverConfiguration.themes"
+					:key="theme.name"
+					:value="theme.name"
+				>
+					{{ theme.displayName }}
+				</option>
+			</select>
+		</div>
+
+		<template v-if="$store.state.serverConfiguration.prefetch">
+			<h2>Link previews</h2>
+			<div>
+				<label class="opt">
+					<input :checked="$store.state.settings.media" type="checkbox" name="media" />
+					Auto-expand media
+				</label>
+			</div>
+			<div>
+				<label class="opt">
+					<input :checked="$store.state.settings.links" type="checkbox" name="links" />
+					Auto-expand websites
+				</label>
+			</div>
+		</template>
+
+		<div v-if="$store.state.settings.advanced && $store.state.serverConfiguration.fileUpload">
+			<h2>File uploads</h2>
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.uploadCanvas"
+						type="checkbox"
+						name="uploadCanvas"
+					/>
+					Attempt to remove metadata from images before uploading
+					<span
+						class="tooltipped tooltipped-n tooltipped-no-delay"
+						aria-label="This option renders the image into a canvas element to remove metadata from the image.
+This may break orientation if your browser does not support that."
+					>
+						<button class="extra-help" />
+					</span>
+				</label>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "MessageSettings",
+};
+</script>
diff --git a/client/components/Windows/settings/Notifications.vue b/client/components/Windows/settings/Notifications.vue
new file mode 100644
index 00000000..4e0edf84
--- /dev/null
+++ b/client/components/Windows/settings/Notifications.vue
@@ -0,0 +1,176 @@
+<template>
+	<div class="settings">
+		<template v-if="!$store.state.serverConfiguration.public">
+			<h2>Push Notifications</h2>
+			<div>
+				<button
+					id="pushNotifications"
+					type="button"
+					class="btn"
+					:disabled="
+						$store.state.pushNotificationState !== 'supported' &&
+						$store.state.pushNotificationState !== 'subscribed'
+					"
+					@click="onPushButtonClick"
+				>
+					<template v-if="$store.state.pushNotificationState === 'subscribed'">
+						Unsubscribe from push notifications
+					</template>
+					<template v-else-if="$store.state.pushNotificationState === 'loading'">
+						Loading…
+					</template>
+					<template v-else> Subscribe to push notifications </template>
+				</button>
+				<div v-if="$store.state.pushNotificationState === 'nohttps'" class="error">
+					<strong>Warning</strong>: Push notifications are only supported over HTTPS
+					connections.
+				</div>
+				<div v-if="$store.state.pushNotificationState === 'unsupported'" class="error">
+					<strong>Warning</strong>:
+					<span>Push notifications are not supported by your browser.</span>
+
+					<div v-if="isIOS" class="apple-push-unsupported">
+						Safari does
+						<a
+							href="https://bugs.webkit.org/show_bug.cgi?id=182566"
+							target="_blank"
+							rel="noopener"
+							>not support the web push notification specification</a
+						>, and because all browsers on iOS use Safari under the hood, The Lounge is
+						unable to provide push notifications on iOS devices.
+					</div>
+				</div>
+			</div>
+		</template>
+
+		<h2>Browser Notifications</h2>
+		<div>
+			<label class="opt">
+				<input
+					id="desktopNotifications"
+					:checked="$store.state.settings.desktopNotifications"
+					type="checkbox"
+					name="desktopNotifications"
+				/>
+				Enable browser notifications<br />
+				<div v-if="$store.state.desktopNotificationState === 'unsupported'" class="error">
+					<strong>Warning</strong>: Notifications are not supported by your browser.
+				</div>
+				<div
+					v-if="$store.state.desktopNotificationState === 'blocked'"
+					id="warnBlockedDesktopNotifications"
+					class="error"
+				>
+					<strong>Warning</strong>: Notifications are blocked by your browser.
+				</div>
+			</label>
+		</div>
+		<div>
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.notification"
+					type="checkbox"
+					name="notification"
+				/>
+				Enable notification sound
+			</label>
+		</div>
+		<div>
+			<div class="opt">
+				<button id="play" @click.prevent="playNotification">Play sound</button>
+			</div>
+		</div>
+
+		<div v-if="$store.state.settings.advanced">
+			<label class="opt">
+				<input
+					:checked="$store.state.settings.notifyAllMessages"
+					type="checkbox"
+					name="notifyAllMessages"
+				/>
+				Enable notification for all messages
+			</label>
+		</div>
+
+		<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
+			<label class="opt">
+				<label for="highlights" class="opt">
+					Custom highlights
+					<span
+						class="tooltipped tooltipped-n tooltipped-no-delay"
+						aria-label="If a message contains any of these comma-separated 
+expressions, it will trigger a highlight."
+					>
+						<button class="extra-help" />
+					</span>
+				</label>
+				<input
+					id="highlights"
+					:value="$store.state.settings.highlights"
+					type="text"
+					name="highlights"
+					class="input"
+					placeholder="Comma-separated, e.g.: word, some more words, anotherword"
+				/>
+			</label>
+		</div>
+
+		<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
+			<label class="opt">
+				<label for="highlightExceptions" class="opt">
+					Highlight exceptions
+					<span
+						class="tooltipped tooltipped-n tooltipped-no-delay"
+						aria-label="If a message contains any of these comma-separated 
+expressions, it will not trigger a highlight even if it contains 
+your nickname or expressions defined in custom highlights."
+					>
+						<button class="extra-help" />
+					</span>
+				</label>
+				<input
+					id="highlightExceptions"
+					:value="$store.state.settings.highlightExceptions"
+					type="text"
+					name="highlightExceptions"
+					class="input"
+					placeholder="Comma-separated, e.g.: word, some more words, anotherword"
+				/>
+			</label>
+		</div>
+	</div>
+</template>
+
+<script>
+import RevealPassword from "../../RevealPassword.vue";
+
+export default {
+	name: "NotificationSettings",
+	components: {
+		RevealPassword,
+	},
+	data() {
+		return {
+			passwordChangeStatus: null,
+			passwordErrors: {
+				missing_fields: "Please enter a new password",
+				password_mismatch: "Both new password fields must match",
+				password_incorrect:
+					"The current password field does not match your account password",
+				update_failed: "Failed to update your password",
+			},
+			isIOS: navigator.platform.match(/(iPhone|iPod|iPad)/i) || false,
+		};
+	},
+	methods: {
+		playNotification() {
+			const pop = new Audio();
+			pop.src = "audio/pop.wav";
+			pop.play();
+		},
+		onPushButtonClick() {
+			webpush.togglePushSubscription();
+		},
+	},
+};
+</script>
diff --git a/client/js/router.js b/client/js/router.js
index 58381238..32ef88ad 100644
--- a/client/js/router.js
+++ b/client/js/router.js
@@ -10,6 +10,9 @@ Vue.use(VueRouter);
 import SignIn from "../components/Windows/SignIn.vue";
 import Connect from "../components/Windows/Connect.vue";
 import Settings from "../components/Windows/Settings.vue";
+import MainSettings from "../components/Windows/settings/Main.vue";
+import MessageSettings from "../components/Windows/settings/Messages.vue";
+import NotificationSettings from "../components/Windows/settings/Notifications.vue";
 import Help from "../components/Windows/Help.vue";
 import Changelog from "../components/Windows/Changelog.vue";
 import NetworkEdit from "../components/Windows/NetworkEdit.vue";
@@ -42,6 +45,27 @@ const router = new VueRouter({
 			name: "Settings",
 			path: "/settings",
 			component: Settings,
+			children: [
+				{
+					path: "main",
+					name: "Main",
+					component: MainSettings,
+				},
+				{
+					path: "messages",
+					name: "Messages",
+					component: MessageSettings,
+				},
+				{
+					path: "notifications",
+					name: "Notifications",
+					component: NotificationSettings,
+				},
+				{
+					path: "",
+					redirect: {name: "Main"},
+				},
+			],
 		},
 		{
 			name: "Help",