Remove DOM access from webpush

client/components/Windows/Settings.vue

@@ -232,11 +232,21 @@
 							id="pushNotifications"
 							type="button"
 							class="btn"
-							:disabled="$store.state.pushNotificationState !== 'supported'"
-							data-text-alternate="Unsubscribe from push notifications"
+							: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
@@ -257,9 +267,9 @@
 				</div>
 				<div class="col-sm-12">
 					<label class="opt">
-						<!-- TODO: handle enabling/disabling notifications -->
 						<input
 							id="desktopNotifications"
+							:checked="$store.state.settings.desktopNotifications"
 							type="checkbox"
 							name="desktopNotifications"
 						/>

client/js/webpush.js

@@ -1,20 +1,22 @@
 "use strict";
 
-const $ = require("jquery");
 const storage = require("./localStorage");
 const socket = require("./socket");
 const store = require("./store").default;
 
-let pushNotificationsButton;
 let clientSubscribed = null;
 let applicationServerKey;
 
 if ("serviceWorker" in navigator) {
 	navigator.serviceWorker.addEventListener("message", (event) => {
 		if (event.data && event.data.type === "open") {
-			$("#sidebar")
-				.find(`.chan[data-target="#${event.data.channel}"]`)
-				.trigger("click");
+			const channelTarget = document.querySelector(
+				"#sidebar .chan[data-target='#" + event.data.channel + "']"
+			);
+
+			if (channelTarget) {
+				channelTarget.click();
+			}
 		}
 	});
 }
@@ -27,22 +29,18 @@ module.exports.configurePushNotifications = (subscribedOnServer, key) => {
 	// If client has push registration but the server knows nothing about it,
 	// this subscription is broken and client has to register again
 	if (clientSubscribed === true && subscribedOnServer === false) {
-		pushNotificationsButton.prop("disabled", true);
+		store.commit("pushNotificationState", "loading");
 
 		navigator.serviceWorker.ready
 			.then((registration) => registration.pushManager.getSubscription())
 			.then((subscription) => subscription && subscription.unsubscribe())
 			.then((successful) => {
-				if (successful) {
-					alternatePushButton().prop("disabled", false);
-				}
+				store.commit("pushNotificationState", successful ? "supported" : "unsupported");
 			});
 	}
 };
 
 module.exports.initialize = () => {
-	pushNotificationsButton = $("#pushNotifications");
-
 	if (!isAllowedServiceWorkersHost()) {
 		store.commit("pushNotificationState", "nohttps");
 		return;
@@ -59,13 +57,12 @@ module.exports.initialize = () => {
 				}
 
 				return registration.pushManager.getSubscription().then((subscription) => {
-					store.commit("pushNotificationState", "supported");
-
 					clientSubscribed = !!subscription;
 
-					if (clientSubscribed) {
-						alternatePushButton();
-					}
+					store.commit(
+						"pushNotificationState",
+						clientSubscribed ? "subscribed" : "supported"
+					);
 				});
 			})
 			.catch(() => {
@@ -75,19 +72,17 @@ module.exports.initialize = () => {
 };
 
 module.exports.onPushButton = () => {
-	// TODO: move dom logic to Settings.vue
-	pushNotificationsButton = $("#pushNotifications");
-	pushNotificationsButton.prop("disabled", true);
+	store.commit("pushNotificationState", "loading");
 
 	navigator.serviceWorker.ready
 		.then((registration) =>
-			registration.pushManager
-				.getSubscription()
-				.then((existingSubscription) => {
+			registration.pushManager.getSubscription().then((existingSubscription) => {
 				if (existingSubscription) {
 					socket.emit("push:unregister");
 
-						return existingSubscription.unsubscribe();
+					return existingSubscription.unsubscribe().then(() => {
+						store.commit("pushNotificationState", "supported");
+					});
 				}
 
 				return registration.pushManager
@@ -116,14 +111,9 @@ module.exports.onPushButton = () => {
 							},
 						});
 
-							return true;
+						store.commit("pushNotificationState", "subscribed");
 					});
 			})
-				.then((successful) => {
-					if (successful) {
-						alternatePushButton().prop("disabled", false);
-					}
-				})
 		)
 		.catch(() => {
 			store.commit("pushNotificationState", "unsupported");
@@ -132,14 +122,6 @@ module.exports.onPushButton = () => {
 	return false;
 };
 
-function alternatePushButton() {
-	const text = pushNotificationsButton.text();
-
-	return pushNotificationsButton
-		.text(pushNotificationsButton.data("text-alternate"))
-		.data("text-alternate", text);
-}
-
 function urlBase64ToUint8Array(base64String) {
 	const padding = "=".repeat((4 - (base64String.length % 4)) % 4);
 	const base64 = (base64String + padding).replace(/-/g, "+").replace(/_/g, "/");