Run updateSetting from Settings component and get rid of unused code.

client/components/App.vue

@@ -1,4 +1,5 @@
 <template>
+	<!-- TODO: move all class toggling to vue, since vue clears existing classes when changing the notified class -->
 	<div
 		id="viewport"
 		:class="{notified: $store.state.isNotified}"

client/components/Windows/Settings.vue

@@ -226,6 +226,7 @@
 						<option
 							v-for="theme in $root.serverConfiguration.themes"
 							:key="theme.name"
+							:value="theme.name"
 						>
 							{{ theme.displayName }}
 						</option>
@@ -495,6 +496,7 @@ export default {
 	},
 	data() {
 		return {
+			options: null,
 			canRegisterProtocol: false,
 			passwordChangeStatus: null,
 			passwordErrors: {
@@ -506,6 +508,8 @@ export default {
 		};
 	},
 	mounted() {
+		this.options = require("../../js/options"); // TODO: do this in a smarter way
+
 		// Enable protocol handler registration if supported
 		if (window.navigator.registerProtocolHandler) {
 			this.canRegisterProtocol = true;
@@ -533,11 +537,7 @@ export default {
 				value = event.target.value;
 			}
 
-			this.storeSetting(name, value);
+			this.options.updateSetting(name, value);
-		},
-		storeSetting(name, value) {
-			// TODO: port logic from options.js
-			socket.emit("setting:set", {name, value});
 		},
 		changePassword() {
 			const allFields = new FormData(this.$refs.settingsForm);

client/js/options.js

@@ -6,18 +6,11 @@ const socket = require("./socket");
 const {vueApp} = require("./vue");
 require("../js/autocompletion");
 
-const $settings = $("#settings");
 const $theme = $("#theme");
 const $userStyles = $("#user-specified-css");
 
 const noCSSparamReg = /[?&]nocss/;
 
-// Not yet available at this point but used in various functionaly.
-// Will be assigned when `initialize` is called.
-let $syncWarningOverride;
-let $syncWarningBase;
-let $forceSyncButton;
-
 // Default settings
 const settings = vueApp.settings;
 
@@ -76,6 +69,7 @@ module.exports = {
 	syncAllSettings,
 	processSetting,
 	initialize,
+	updateSetting,
 };
 
 // Updates the checkbox and warning in settings.
@@ -125,30 +119,19 @@ function settingSetEmit(name, value) {
 
 // When sync is `true` the setting will also be send to the backend for syncing.
 function updateSetting(name, value, sync) {
-	const currentOption = settings[name];
+	settings[name] = value;
+	storage.set("settings", JSON.stringify(settings));
+	applySetting(name, value);
 
-	// Only update and process when the setting is actually changed.
+	// Sync is checked, request settings from server.
-	if (currentOption !== value) {
+	if (name === "syncSettings" && value) {
-		settings[name] = value;
+		socket.emit("setting:get");
-		storage.set("settings", JSON.stringify(settings));
+	}
-		applySetting(name, value);
 
-		// Sync is checked, request settings from server.
+	if (settings.syncSettings && !noSync.includes(name) && sync) {
-		if (name === "syncSettings" && value) {
+		settingSetEmit(name, value);
-			socket.emit("setting:get");
+	} else if (alwaysSync.includes(name) && sync) {
-			$syncWarningOverride.hide();
+		settingSetEmit(name, value);
-			$syncWarningBase.hide();
-			$forceSyncButton.hide();
-		} else if (name === "syncSettings") {
-			$syncWarningOverride.show();
-			$forceSyncButton.show();
-		}
-
-		if (settings.syncSettings && !noSync.includes(name) && sync) {
-			settingSetEmit(name, value);
-		} else if (alwaysSync.includes(name) && sync) {
-			settingSetEmit(name, value);
-		}
 	}
 }
 
@@ -162,31 +145,11 @@ function syncAllSettings(force = false) {
 				settingSetEmit(name, settings[name]);
 			}
 		}
-
-		$syncWarningOverride.hide();
-		$syncWarningBase.hide();
-		$forceSyncButton.hide();
-	} else {
-		$syncWarningOverride.hide();
-		$forceSyncButton.hide();
-		$syncWarningBase.show();
 	}
 }
 
 // If `save` is set to true it will pass the setting to `updateSetting()`  processSetting
 function processSetting(name, value, save) {
-	if (name === "highlights") {
-		$settings.find(`input[name=${name}]`).val(value);
-	} else if (name === "nickPostfix") {
-		$settings.find(`input[name=${name}]`).val(value);
-	} else if (name === "statusMessages") {
-		$settings.find(`input[name=${name}][value=${value}]`).prop("checked", true);
-	} else if (name === "theme") {
-		$settings.find("#theme-select").val(value);
-	} else if (typeof value === "boolean") {
-		$settings.find(`input[name=${name}]`).prop("checked", value);
-	}
-
 	// No need to also call processSetting when `save` is true.
 	// updateSetting does take care of that.
 	if (save) {
@@ -198,10 +161,6 @@ function processSetting(name, value, save) {
 }
 
 function initialize() {
-	$syncWarningOverride = $settings.find(".sync-warning-override");
-	$syncWarningBase = $settings.find(".sync-warning-base");
-	$forceSyncButton = $settings.find(".force-sync-button");
-
 	module.exports.initialized = true;
 
 	// Settings have now entirely updated, apply settings to the client.
@@ -217,28 +176,6 @@ function initialize() {
 		vueApp.desktopNotificationState = "unsupported";
 	}
 
-	/*
-	$settings.on("change", "input, select, textarea", function(e) {
-		// We only want to trigger on human triggered changes.
-		if (e.originalEvent) {
-			const $self = $(this);
-			const type = $self.prop("type");
-			const name = $self.prop("name");
-
-			if (type === "radio") {
-				if ($self.prop("checked")) {
-					updateSetting(name, $self.val(), true);
-				}
-			} else if (type === "checkbox") {
-				updateSetting(name, $self.prop("checked"), true);
-				settings[name] = $self.prop("checked");
-			} else if (type !== "password") {
-				updateSetting(name, $self.val(), 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

@@ -56,26 +56,6 @@ socket.on("configuration", function(data) {
 		document.querySelector('meta[name="theme-color"]').content = currentTheme.themeColor;
 	}
 
-	/*
-	function handleFormSubmit() {
-		const form = $(this);
-		const event = form.data("event");
-
-		form.find(".btn").prop("disabled", true);
-
-		const values = {};
-		$.each(form.serializeArray(), function(i, obj) {
-			if (obj.value !== "") {
-				values[obj.name] = obj.value;
-			}
-		});
-
-		socket.emit(event, values);
-
-		return false;
-	}
-	*/
-
 	// TODO: move to component (this mirrors the nick to the username field if the username is empty)
 	connect.on("show", function() {
 		connect