Move some settings to Vue

client/components/App.vue

@@ -19,44 +19,42 @@
 				<NetworkList :networks="networks" :active-channel="activeChannel" />
 			</div>
 			<footer id="footer">
-				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
+				<span
-					><button
+					class="tooltipped tooltipped-n tooltipped-no-touch"
+					aria-label="Sign in"><button
 						class="icon sign-in"
-						data-target="#sign-in"
+						data-target="SignIn"
 						aria-label="Sign in"
 						role="tab"
 						aria-controls="sign-in"
-						aria-selected="false"
+						aria-selected="false" /></span>
-				/></span>
 				<span
 					class="tooltipped tooltipped-n tooltipped-no-touch"
-					aria-label="Connect to network"
+					aria-label="Connect to network"><button
-					><button
 						class="icon connect"
-						data-target="#connect"
+						data-target="Connect"
 						aria-label="Connect to network"
 						role="tab"
 						aria-controls="connect"
-						aria-selected="false"
+						aria-selected="false" /></span>
-				/></span>
+				<span
-				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
+					class="tooltipped tooltipped-n tooltipped-no-touch"
-					><button
+					aria-label="Settings"><button
 						class="icon settings"
-						data-target="#settings"
+						data-target="Settings"
 						aria-label="Settings"
 						role="tab"
 						aria-controls="settings"
-						aria-selected="false"
+						aria-selected="false" /></span>
-				/></span>
+				<span
-				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
+					class="tooltipped tooltipped-n tooltipped-no-touch"
-					><button
+					aria-label="Help"><button
 						class="icon help"
-						data-target="#help"
+						data-target="Help"
 						aria-label="Help"
 						role="tab"
 						aria-controls="help"
-						aria-selected="false"
+						aria-selected="false" /></span>
-				/></span>
 			</footer>
 		</aside>
 		<div id="sidebar-overlay" />
@@ -78,6 +76,7 @@ const throttle = require("lodash/throttle");
 import NetworkList from "./NetworkList.vue";
 import Chat from "./Chat.vue";
 import SignIn from "./Windows/SignIn.vue";
+import Settings from "./Windows/Settings.vue";
 
 export default {
 	name: "App",
@@ -85,6 +84,7 @@ export default {
 		NetworkList,
 		Chat,
 		SignIn,
+		Settings,
 	},
 	props: {
 		activeWindow: String,

client/components/Windows/Settings.vue

@@ -40,8 +40,8 @@
 						class="btn">Open irc:// URLs with The Lounge</button>
 				</div>
 
-				{{#unless public}}
 				<div
+					v-if="!this.$root.serverConfiguration.public"
 					class="col-sm-12"
 					data-advanced>
 					<h2>
@@ -64,13 +64,13 @@
 					<p class="sync-warning-base"><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 class="opt force-sync-button">
 						<button
-							id="forceSync"
 							type="button"
-							class="btn">Force sync settings</button>
+							class="btn"
+							@click="onForceSyncClick">Force sync settings</button>
 						<p>This will override any settings already synced to the server.</p>
 					</div>
 				</div>
-				{{/unless}}
+
 				<div class="col-sm-12">
 					<h2>Messages</h2>
 				</div>
@@ -169,59 +169,62 @@
 						id="theme-select"
 						name="theme"
 						class="input">
-						{{#each themes}}
+						<option
-						<option value="{{name}}">
+							v-for="theme in this.$root.serverConfiguration.themes"
-							{{ displayName }}
+							:key="theme.name">
+							{{ theme.displayName }}
 						</option>
-						{{/each}}
 					</select>
 				</div>
-				{{#if prefetch}}
+
-				<div class="col-sm-12">
+				<template v-if="this.$root.serverConfiguration.prefetch">
-					<h2>Link previews</h2>
+					<div class="col-sm-12">
-				</div>
+						<h2>Link previews</h2>
-				<div class="col-sm-6">
-					<label class="opt">
-						<input
-							type="checkbox"
-							name="media">
-						Auto-expand media
-					</label>
-				</div>
-				<div class="col-sm-6">
-					<label class="opt">
-						<input
-							type="checkbox"
-							name="links">
-						Auto-expand websites
-					</label>
-				</div>
-				{{/if}}
-				{{#unless public}}
-				<div class="col-sm-12">
-					<h2>Push Notifications</h2>
-				</div>
-				<div class="col-sm-12">
-					<button
-						id="pushNotifications"
-						type="button"
-						class="btn"
-						disabled
-						data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
-					<div
-						id="pushNotificationsHttps"
-						class="error">
-						<strong>Warning</strong>:
-						Push notifications are only supported over HTTPS connections.
 					</div>
-					<div
+					<div class="col-sm-6">
-						id="pushNotificationsUnsupported"
+						<label class="opt">
-						class="error">
+							<input
-						<strong>Warning</strong>:
+								type="checkbox"
-						<span>Push notifications are not supported by your browser.</span>
+								name="media">
+							Auto-expand media
+						</label>
 					</div>
-				</div>
+					<div class="col-sm-6">
-				{{/unless}}
+						<label class="opt">
+							<input
+								type="checkbox"
+								name="links">
+							Auto-expand websites
+						</label>
+					</div>
+				</template>
+
+				<template v-if="!this.$root.serverConfiguration.public">
+					<div class="col-sm-12">
+						<h2>Push Notifications</h2>
+					</div>
+					<div class="col-sm-12">
+						<button
+							id="pushNotifications"
+							type="button"
+							class="btn"
+							disabled
+							data-text-alternate="Unsubscribe from push notifications">Subscribe to push notifications</button>
+						<div
+							v-if="this.$root.pushNotificationState === 'nohttps'"
+							class="error">
+							<strong>Warning</strong>:
+							Push notifications are only supported over HTTPS connections.
+						</div>
+						<div
+							v-if="this.$root.pushNotificationState === 'unsupported'"
+							class="error">
+							<strong>Warning</strong>:
+							<span>Push notifications are not supported by your browser.</span>
+						</div>
+					</div>
+				</template>
+
 				<div class="col-sm-12">
 					<h2>Browser Notifications</h2>
 				</div>
@@ -233,12 +236,13 @@
 							name="desktopNotifications">
 						Enable browser notifications<br>
 						<div
-							id="warnUnsupportedDesktopNotifications"
+							v-if="this.$root.desktopNotificationState === 'unsupported'"
 							class="error">
 							<strong>Warning</strong>:
 							Notifications are not supported by your browser.
 						</div>
 						<div
+							v-if="this.$root.desktopNotificationState === 'blocked'"
 							id="warnBlockedDesktopNotifications"
 							class="error">
 							<strong>Warning</strong>:
@@ -287,9 +291,9 @@
 					</label>
 				</div>
 
-				{{#unless public}}
+				<div
-				{{#unless ldapEnabled}}
+					v-if="!this.$root.serverConfiguration.public && !this.$root.serverConfiguration.ldapEnabled"
-				<div id="change-password">
+					id="change-password">
 					<form
 						action=""
 						method="post"
@@ -307,7 +311,6 @@
 								name="old_password"
 								class="input"
 								placeholder="Enter current password">
-							{{> ../reveal-password}}
 						</div>
 						<div class="col-sm-12 password-container">
 							<label
@@ -319,7 +322,6 @@
 								name="new_password"
 								class="input"
 								placeholder="Enter desired new password">
-							{{> ../reveal-password}}
 						</div>
 						<div class="col-sm-12 password-container">
 							<label
@@ -331,7 +333,6 @@
 								name="verify_password"
 								class="input"
 								placeholder="Repeat new password">
-							{{> ../reveal-password}}
 						</div>
 						<div class="col-sm-12 feedback" />
 						<div class="col-sm-12">
@@ -341,8 +342,7 @@
 						</div>
 					</form>
 				</div>
-				{{/unless}}
+
-				{{/unless}}
 				<div
 					class="col-sm-12"
 					data-advanced>
@@ -356,14 +356,16 @@
 						class="sr-only">Custom stylesheet. You can override any style with CSS here.</label>
 					<textarea
 						id="user-specified-css-input"
+						v-model="$root.settings.userStyles"
 						class="input"
 						name="userStyles"
 						placeholder="/* You can override any style with CSS here */" />
 				</div>
 			</div>
 
-			{{#unless public}}
+			<div
-			<div class="session-list">
+				v-if="!this.$root.serverConfiguration.public"
+				class="session-list">
 				<h2>Sessions</h2>
 
 				<h3>Current session</h3>
@@ -372,7 +374,6 @@
 				<h3>Other sessions</h3>
 				<div id="session-list" />
 			</div>
-			{{/unless}}
 		</div>
 
 	</div>
@@ -410,6 +411,10 @@ export default {
 
 			socket.emit("auth", values);
 		},
+		onForceSyncClick() {
+			const options = require("../../js/options");
+			options.syncAllSettings(true);
+		},
 	},
 };
 </script>

client/js/lounge.js

@@ -141,22 +141,18 @@ window.vueMounted = () => {
 			if ($(window).outerWidth() <= utils.mobileViewportPixels) {
 				slideoutMenu.toggle(false);
 			}
+		} else {
+			vueApp.activeChannel = null;
+			vueApp.activeWindow = target;
 		}
 
-		const lastActive = $("#windows > .active");
-
-		lastActive.removeClass("active");
-
-		const chan = $(target)
-			.addClass("active")
-			.trigger("show");
-
 		utils.synchronizeNotifiedState();
 
 		if (self.hasClass("chan")) {
 			vueApp.$nextTick(() => $("#chat-container").addClass("active"));
 		}
 
+		/* TODO: move to ChatInput.vue
 		const chanChat = chan.find(".chat");
 
 		if (chanChat.length > 0 && channel.type !== "special") {
@@ -165,6 +161,7 @@ window.vueMounted = () => {
 			// See https://github.com/thelounge/thelounge/issues/2257
 			$("#input").trigger("ontouchstart" in window ? "blur" : "focus");
 		}
+*/
 
 		if (channel && channel.channel.usersOutdated) {
 			channel.channel.usersOutdated = false;

client/js/options.js

@@ -6,7 +6,6 @@ const socket = require("./socket");
 const {vueApp} = require("./vue");
 require("../js/autocompletion");
 
-const $windows = $("#windows");
 const $settings = $("#settings");
 const $theme = $("#theme");
 const $userStyles = $("#user-specified-css");
@@ -18,8 +17,6 @@ const noCSSparamReg = /[?&]nocss/;
 let $syncWarningOverride;
 let $syncWarningBase;
 let $forceSyncButton;
-let $warningUnsupported;
-let $warningBlocked;
 
 // Default settings
 const settings = vueApp.settings;
@@ -85,10 +82,10 @@ module.exports = {
 // When notifications are not supported, this is never called (because
 // checkbox state can not be changed).
 function updateDesktopNotificationStatus() {
-	if (Notification.permission === "denied") {
+	if (Notification.permission === "granted") {
-		$warningBlocked.show();
+		vueApp.desktopNotificationState = "granted";
 	} else {
-		$warningBlocked.hide();
+		vueApp.desktopNotificationState = "blocked";
 	}
 }
 
@@ -114,10 +111,10 @@ function applySetting(name, value) {
 	} else if (name === "userStyles" && !noCSSparamReg.test(window.location.search)) {
 		$userStyles.html(value);
 	} else if (name === "desktopNotifications") {
-		if ("Notification" in window && value && Notification.permission !== "granted") {
+		updateDesktopNotificationStatus();
+
+		if (("Notification" in window) && value && Notification.permission !== "granted") {
 			Notification.requestPermission(updateDesktopNotificationStatus);
-		} else if (!value) {
-			$warningBlocked.hide();
 		}
 	} else if (name === "advanced") {
 		$("#settings [data-advanced]").toggle(settings[name]);
@@ -180,9 +177,7 @@ function syncAllSettings(force = false) {
 
 // If `save` is set to true it will pass the setting to `updateSetting()`  processSetting
 function processSetting(name, value, save) {
-	if (name === "userStyles") {
+	if (name === "highlights") {
-		$settings.find("#user-specified-css-input").val(value);
-	} else if (name === "highlights") {
 		$settings.find(`input[name=${name}]`).val(value);
 	} else if (name === "nickPostfix") {
 		$settings.find(`input[name=${name}]`).val(value);
@@ -205,14 +200,10 @@ function processSetting(name, value, save) {
 }
 
 function initialize() {
-	$warningBlocked = $settings.find("#warnBlockedDesktopNotifications");
-	$warningUnsupported = $settings.find("#warnUnsupportedDesktopNotifications");
-
 	$syncWarningOverride = $settings.find(".sync-warning-override");
 	$syncWarningBase = $settings.find(".sync-warning-base");
 	$forceSyncButton = $settings.find(".force-sync-button");
 
-	$warningBlocked.hide();
 	module.exports.initialized = true;
 
 	// Settings have now entirely updated, apply settings to the client.
@@ -222,11 +213,10 @@ function initialize() {
 
 	// If browser does not support notifications
 	// display proper message in settings.
-	if ("Notification" in window) {
+	if (("Notification" in window)) {
-		$warningUnsupported.hide();
+		updateDesktopNotificationStatus();
-		$windows.on("show", "#settings", updateDesktopNotificationStatus);
 	} else {
-		$warningUnsupported.show();
+		vueApp.desktopNotificationState = "unsupported";
 	}
 
 	$settings.on("change", "input, select, textarea", function(e) {
@@ -249,10 +239,6 @@ function initialize() {
 		}
 	});
 
-	$settings.find("#forceSync").on("click", () => {
-		syncAllSettings(true);
-	});
-
 	// Local init is done, let's sync
 	// We always ask for synced settings even if it is disabled.
 	// Settings can be mandatory to sync and it is used to determine sync base state.

client/js/socket-events/configuration.js

@@ -6,7 +6,6 @@ const templates = require("../../views");
 const options = require("../options");
 const webpush = require("../webpush");
 const connect = $("#connect");
-const utils = require("../utils");
 const upload = require("../upload");
 const {vueApp} = require("../vue");
 
@@ -33,9 +32,7 @@ socket.on("configuration", function(data) {
 		return;
 	}
 
-	$("#settings").html(templates.windows.settings(data));
+	vueApp.serverConfiguration = data;
-	$("#help").html(templates.windows.help(data));
-	$("#changelog").html(templates.windows.changelog());
 
 	$("#settings").on("show", () => {
 		$("#session-list").html("<p>Loading…</p>");

client/js/vue.js

@@ -25,6 +25,9 @@ const vueApp = new Vue({
 		isFileUploadEnabled: false,
 		isNotified: false,
 		networks: [],
+		pushNotificationState: "unsupported",
+		desktopNotificationState: "unsupported",
+		serverConfiguration: {},
 		settings: {
 			syncSettings: false,
 			advanced: false,

client/js/webpush.js

@@ -3,6 +3,7 @@
 const $ = require("jquery");
 const storage = require("./localStorage");
 const socket = require("./socket");
+const {vueApp} = require("./vue");
 
 let pushNotificationsButton;
 let clientSubscribed = null;
@@ -43,11 +44,10 @@ module.exports.initialize = () => {
 	pushNotificationsButton = $("#pushNotifications");
 
 	if (!isAllowedServiceWorkersHost()) {
+		vueApp.pushNotificationState = "nohttps";
 		return;
 	}
 
-	$("#pushNotificationsHttps").hide();
-
 	if ("serviceWorker" in navigator) {
 		navigator.serviceWorker
 			.register("service-worker.js")
@@ -59,9 +59,7 @@ module.exports.initialize = () => {
 				}
 
 				return registration.pushManager.getSubscription().then((subscription) => {
-					$("#pushNotificationsUnsupported").hide();
+					vueApp.pushNotificationState = "supported";
-
-					pushNotificationsButton.prop("disabled", false).on("click", onPushButton);
 
 					clientSubscribed = !!subscription;
 
@@ -69,10 +67,9 @@ module.exports.initialize = () => {
 						alternatePushButton();
 					}
 				});
-			})
+		}).catch(() => {
-			.catch((err) => {
+			vueApp.pushNotificationState = "unsupported";
-				$("#pushNotificationsUnsupported span").text(err);
+		});
-			});
 	}
 };
 
@@ -126,11 +123,7 @@ function onPushButton() {
 				})
 		)
 		.catch((err) => {
-			$("#pushNotificationsUnsupported")
+			vueApp.pushNotificationState = "unsupported";
-				.find("span")
-				.text(`An error has occurred: ${err}`)
-				.end()
-				.show();
 		});
 
 	return false;