Fix options

client/js/lounge.js

@@ -27,7 +27,6 @@ $(function() {
 
 	$(document.body).data("app-name", document.title);
 
-	var windows = $("#windows");
 	var viewport = $("#viewport");
 	var sidebarSlide = slideoutMenu(viewport[0], sidebar[0]);
 	var contextMenuContainer = $("#context-menu-container");
@@ -484,18 +483,6 @@ $(function() {
 		container.html(templates.user_filtered({matches: result})).show();
 	});
 
-	var forms = $("#sign-in, #connect, #change-password");
-
-	windows.on("show", "#sign-in", function() {
-		$(this).find("input").each(function() {
-			var self = $(this);
-			if (self.val() === "") {
-				self.focus();
-				return false;
-			}
-		});
-	});
-
 	if ($("body").hasClass("public") && (window.location.hash === "#connect" || window.location.hash === "")) {
 		$("#connect").one("show", function() {
 			var params = URI(document.location.search);
@@ -522,56 +509,6 @@ $(function() {
 		});
 	}
 
-	forms.on("submit", "form", function(e) {
-		e.preventDefault();
-		var event = "auth";
-		var form = $(this);
-		form.find(".btn").attr("disabled", true);
-
-		if (form.closest(".window").attr("id") === "connect") {
-			event = "conn";
-		} else if (form.closest("div").attr("id") === "change-password") {
-			event = "change-password";
-		}
-
-		var values = {};
-		$.each(form.serializeArray(), function(i, obj) {
-			if (obj.value !== "") {
-				values[obj.name] = obj.value;
-			}
-		});
-
-		if (values.user) {
-			storage.set("user", values.user);
-		}
-
-		socket.emit(
-			event, values
-		);
-	});
-
-	forms.on("focusin", ".nick", function() {
-		// Need to set the first "lastvalue", so it can be used in the below function
-		var nick = $(this);
-		nick.data("lastvalue", nick.val());
-	});
-
-	forms.on("input", ".nick", function() {
-		var nick = $(this).val();
-		var usernameInput = forms.find(".username");
-
-		// Because this gets called /after/ it has already changed, we need use the previous value
-		var lastValue = $(this).data("lastvalue");
-
-		// They were the same before the change, so update the username field
-		if (usernameInput.val() === lastValue) {
-			usernameInput.val(nick);
-		}
-
-		// Store the "previous" value, for next time
-		$(this).data("lastvalue", nick);
-	});
-
 	$(document).on("visibilitychange focus click", () => {
 		if (sidebar.find(".highlight").length === 0) {
 			utils.toggleNotificationMarkers(false);

client/js/options.js

@@ -3,7 +3,6 @@
 const $ = require("jquery");
 require("jquery-textcomplete");
 const escapeRegExp = require("lodash/escapeRegExp");
-const settings = $("#settings");
 const userStyles = $("#user-specified-css");
 const storage = require("./localStorage");
 const tz = require("./libs/handlebars/tz");
@@ -35,6 +34,11 @@ for (const key in options) {
 	}
 }
 
+// Apply custom CSS on page load
+if (typeof userOptions.userStyles === "string" && !/[?&]nocss/.test(window.location.search)) {
+	userStyles.html(userOptions.userStyles);
+}
+
 userOptions = null;
 
 module.exports = options;
@@ -43,11 +47,13 @@ module.exports.shouldOpenMessagePreview = function(type) {
 	return (options.links && type === "link") || (options.thumbnails && type === "image");
 };
 
-for (var i in options) {
+module.exports.initialize = () => {
+	module.exports.initialize = null;
+
+	const settings = $("#settings");
+
+	for (var i in options) {
 		if (i === "userStyles") {
-		if (!/[?&]nocss/.test(window.location.search)) {
-			$(document.head).find("#user-specified-css").html(options[i]);
-		}
 			settings.find("#user-specified-css-input").val(options[i]);
 		} else if (i === "highlights") {
 			settings.find("input[name=" + i + "]").val(options[i]);
@@ -60,9 +66,9 @@ for (var i in options) {
 		} else if (options[i]) {
 			settings.find("input[name=" + i + "]").prop("checked", true);
 		}
-}
+	}
 
-settings.on("change", "input, select, textarea", function() {
+	settings.on("change", "input, select, textarea", function() {
 		const self = $(this);
 		const type = self.attr("type");
 		const name = self.attr("name");
@@ -122,20 +128,20 @@ settings.on("change", "input, select, textarea", function() {
 				$("#input").textcomplete("destroy");
 			}
 		}
-}).find("input")
+	}).find("input")
 		.trigger("change");
 
-$("#desktopNotifications").on("change", function() {
+	$("#desktopNotifications").on("change", function() {
 		if ($(this).prop("checked") && Notification.permission !== "granted") {
 			Notification.requestPermission(updateDesktopNotificationStatus);
 		}
-});
+	});
 
-// Updates the checkbox and warning in settings when the Settings page is
-// opened or when the checkbox state is changed.
-// When notifications are not supported, this is never called (because
-// checkbox state can not be changed).
-var updateDesktopNotificationStatus = function() {
+	// Updates the checkbox and warning in settings when the Settings page is
+	// opened or when the checkbox state is changed.
+	// When notifications are not supported, this is never called (because
+	// checkbox state can not be changed).
+	var updateDesktopNotificationStatus = function() {
 		if (Notification.permission === "denied") {
 			desktopNotificationsCheckbox.attr("disabled", true);
 			desktopNotificationsCheckbox.attr("checked", false);
@@ -147,19 +153,20 @@ var updateDesktopNotificationStatus = function() {
 			desktopNotificationsCheckbox.attr("disabled", false);
 			warningBlocked.hide();
 		}
-};
+	};
 
-// If browser does not support notifications, override existing settings and
-// display proper message in settings.
-var desktopNotificationsCheckbox = $("#desktopNotifications");
-var warningUnsupported = $("#warnUnsupportedDesktopNotifications");
-var warningBlocked = $("#warnBlockedDesktopNotifications");
-warningBlocked.hide();
-if (("Notification" in window)) {
+	// If browser does not support notifications, override existing settings and
+	// display proper message in settings.
+	var desktopNotificationsCheckbox = $("#desktopNotifications");
+	var warningUnsupported = $("#warnUnsupportedDesktopNotifications");
+	var warningBlocked = $("#warnBlockedDesktopNotifications");
+	warningBlocked.hide();
+	if (("Notification" in window)) {
 		warningUnsupported.hide();
 		windows.on("show", "#settings", updateDesktopNotificationStatus);
-} else {
+	} else {
 		options.desktopNotifications = false;
 		desktopNotificationsCheckbox.attr("disabled", true);
 		desktopNotificationsCheckbox.attr("checked", false);
-}
+	}
+};

client/js/socket-events/configuration.js

@@ -3,10 +3,71 @@
 const $ = require("jquery");
 const socket = require("../socket");
 const templates = require("../../views");
+const options = require("../options");
+const webpush = require("../webpush");
+const storage = require("../localStorage");
 
 socket.on("configuration", function(data) {
+	if (!options.initialize) {
+		return;
+	}
+
 	$("#settings").html(templates.windows.settings(data));
 	$("#connect").html(templates.windows.connect(data));
 
-	require("../options");
+	$("#play").on("click", () => {
+		const pop = new Audio();
+		pop.src = "audio/pop.ogg";
+		pop.play();
+	});
+
+	options.initialize();
+	webpush.initialize();
+
+	// TODO: #sign-in needs to be handled in auth.js otherwise its broken
+	const forms = $("#sign-in, #connect, #change-password");
+
+	forms.on("submit", "form", function() {
+		const form = $(this);
+		const event = form.data("event");
+
+		form.find(".btn").attr("disabled", true);
+
+		const values = {};
+		$.each(form.serializeArray(), function(i, obj) {
+			if (obj.value !== "") {
+				values[obj.name] = obj.value;
+			}
+		});
+
+		if (values.user) {
+			storage.set("user", values.user);
+		}
+
+		socket.emit(event, values);
+
+		return false;
+	});
+
+	forms.on("focusin", ".nick", function() {
+		// Need to set the first "lastvalue", so it can be used in the below function
+		const nick = $(this);
+		nick.data("lastvalue", nick.val());
+	});
+
+	forms.on("input", ".nick", function() {
+		const nick = $(this).val();
+		const usernameInput = forms.find(".username");
+
+		// Because this gets called /after/ it has already changed, we need use the previous value
+		const lastValue = $(this).data("lastvalue");
+
+		// They were the same before the change, so update the username field
+		if (usernameInput.val() === lastValue) {
+			usernameInput.val(nick);
+		}
+
+		// Store the "previous" value, for next time
+		$(this).data("lastvalue", nick);
+	});
 });

client/js/socket-events/msg.js

@@ -21,8 +21,6 @@ try {
 	};
 }
 
-$("#play").on("click", () => pop.play());
-
 socket.on("msg", function(data) {
 	// We set a maximum timeout of 2 seconds so that messages don't take too long to appear.
 	utils.requestIdleCallback(() => processReceivedMessage(data), 2000);

client/js/webpush.js

@@ -4,7 +4,7 @@ const $ = require("jquery");
 const storage = require("./localStorage");
 const socket = require("./socket");
 
-const pushNotificationsButton = $("#pushNotifications");
+let pushNotificationsButton;
 let clientSubscribed = null;
 let applicationServerKey;
 
@@ -29,7 +29,13 @@ module.exports.configurePushNotifications = (subscribedOnServer, key) => {
 	}
 };
 
-if (isAllowedServiceWorkersHost()) {
+module.exports.initialize = () => {
+	pushNotificationsButton = $("#pushNotifications");
+
+	if (!isAllowedServiceWorkersHost()) {
+		return;
+	}
+
 	$("#pushNotificationsHttps").hide();
 
 	if ("serviceWorker" in navigator) {
@@ -57,7 +63,7 @@ if (isAllowedServiceWorkersHost()) {
 			$("#pushNotificationsUnsupported span").text(err);
 		});
 	}
-}
+};
 
 function onPushButton() {
 	pushNotificationsButton.attr("disabled", true);

client/views/windows/connect.tpl

@@ -1,7 +1,7 @@
 <div class="header">
 	<button class="lt" aria-label="Toggle channel list"></button>
 </div>
-<form class="container" method="post" action="">
+<form class="container" method="post" action="" data-event="conn">
 	<div class="row">
 		<div class="col-sm-12">
 			<h1 class="title">

client/views/windows/settings.tpl

@@ -147,7 +147,7 @@
 		{{#unless public}}
 			{{#unless ldapEnabled}}
 		<div id="change-password">
-			<form action="" method="post">
+			<form action="" method="post" data-event="change-password">
 				<div class="col-sm-12">
 					<h2>Change password</h2>
 				</div>

client/views/windows/sign_in.tpl

@@ -1,4 +1,4 @@
-<form class="container" method="post" action="">
+<form class="container" method="post" action="" data-event="auth">
 	<div class="row">
 		<div class="col-xs-12">
 			<h1 class="title">Sign in to The Lounge</h1>
@@ -6,7 +6,7 @@
 		<div class="col-xs-12">
 			<label>
 				Username
-				<input class="input" name="user">
+				<input class="input" name="user" autofocus>
 			</label>
 		</div>
 		<div class="col-xs-12">
@@ -15,12 +15,6 @@
 				<input class="input" type="password" name="password">
 			</label>
 		</div>
-		<div class="col-xs-12">
-			<label class="remember">
-				<input type="checkbox" name="remember" value="on" id="sign-in-remember" checked>
-				Stay signed in
-			</label>
-		</div>
 		<div class="col-xs-12 error" style="display: none;">Authentication failed.</div>
 		<div class="col-xs-12">
 			<button type="submit" class="btn">Sign in</button>

src/server.js

@@ -210,7 +210,6 @@ function index(req, res, next) {
 		Helper.config
 	);
 	data.gitCommit = Helper.getGitCommit();
-	data.themes = themes.getAll();
 
 	const policies = [
 		"default-src *",
@@ -479,6 +478,8 @@ function getClientConfiguration() {
 	]);
 
 	config.ldapEnabled = Helper.config.ldap.enable;
+	config.gitCommit = Helper.getGitCommit();
+	config.themes = themes.getAll();
 
 	return config;
 }