From b164e95290c358bb64df0edf99f031bdfae1725b Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Mon, 4 Nov 2019 16:11:17 +0200
Subject: [PATCH] Remove DOM access from webpush

---
 client/components/Windows/Settings.vue |  18 +++-
 client/js/webpush.js                   | 114 +++++++++++--------------
 2 files changed, 62 insertions(+), 70 deletions(-)

diff --git a/client/components/Windows/Settings.vue b/client/components/Windows/Settings.vue
index 129b8258..d324f1ef 100644
--- a/client/components/Windows/Settings.vue
+++ b/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"
 						>
-							Subscribe to push notifications
+							<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"
 						/>
diff --git a/client/js/webpush.js b/client/js/webpush.js
index df11a4f0..d5f6c738 100644
--- a/client/js/webpush.js
+++ b/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,55 +72,48 @@ 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) => {
-					if (existingSubscription) {
-						socket.emit("push:unregister");
+			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
-						.subscribe({
-							applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
-							userVisibleOnly: true,
-						})
-						.then((subscription) => {
-							const rawKey = subscription.getKey ? subscription.getKey("p256dh") : "";
-							const key = rawKey
-								? window.btoa(String.fromCharCode(...new Uint8Array(rawKey)))
-								: "";
-							const rawAuthSecret = subscription.getKey
-								? subscription.getKey("auth")
-								: "";
-							const authSecret = rawAuthSecret
-								? window.btoa(String.fromCharCode(...new Uint8Array(rawAuthSecret)))
-								: "";
+				return registration.pushManager
+					.subscribe({
+						applicationServerKey: urlBase64ToUint8Array(applicationServerKey),
+						userVisibleOnly: true,
+					})
+					.then((subscription) => {
+						const rawKey = subscription.getKey ? subscription.getKey("p256dh") : "";
+						const key = rawKey
+							? window.btoa(String.fromCharCode(...new Uint8Array(rawKey)))
+							: "";
+						const rawAuthSecret = subscription.getKey
+							? subscription.getKey("auth")
+							: "";
+						const authSecret = rawAuthSecret
+							? window.btoa(String.fromCharCode(...new Uint8Array(rawAuthSecret)))
+							: "";
 
-							socket.emit("push:register", {
-								token: storage.get("token"),
-								endpoint: subscription.endpoint,
-								keys: {
-									p256dh: key,
-									auth: authSecret,
-								},
-							});
-
-							return true;
+						socket.emit("push:register", {
+							token: storage.get("token"),
+							endpoint: subscription.endpoint,
+							keys: {
+								p256dh: key,
+								auth: authSecret,
+							},
 						});
-				})
-				.then((successful) => {
-					if (successful) {
-						alternatePushButton().prop("disabled", false);
-					}
-				})
+
+						store.commit("pushNotificationState", "subscribed");
+					});
+			})
 		)
 		.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, "/");