[ticket/17010] Add missing words & loading indicator, fix invalid twig code

PHPBB3-17010

phpBB/language/en/ucp.php

@@ -356,9 +356,10 @@ $lang = array_merge($lang, array(
 	'NOTIFY_METHOD_EXPLAIN'			=> 'Method for sending messages sent via this board.',
 	'NOTIFY_METHOD_IM'				=> 'Jabber only',
 	'NOTIFY_ON_PM'					=> 'Notify me on new private messages',
-	'NOTIFY_WEBPUSH_ACTIVATE'		=> 'Activate push notifications',
 	'NOTIFY_WEBPUSH_ENABLE'			=> 'Enable receiving webpush notifications',
-	'NOTIFY_WEBPUSH_ENABLE_EXPLAIN'	=> 'Enable receiving browser-based push notifications.<br>The notifications can be turned off at any time in your browser settings or by disabling the push notifications below.',
+	'NOTIFY_WEBPUSH_ENABLE_EXPLAIN'	=> 'Enable receiving browser-based push notifications.<br>The notifications can be turned off at any time in your browser settings, by unsubscribing, or by disabling the push notifications below.',
+	'NOTIFY_WEBPUSH_SUBSCRIBE'		=> 'Subscribe',
+	'NOTIFY_WEBPUSH_UNSUBSCRIBE'	=> 'Unsubscribe',
 	'NOT_ADDED_FRIENDS_ANONYMOUS'	=> 'You cannot add the anonymous user to your friends list.',
 	'NOT_ADDED_FRIENDS_BOTS'		=> 'You cannot add bots to your friends list.',
 	'NOT_ADDED_FRIENDS_FOES'		=> 'You cannot add users to your friends list who are on your foes list.',

phpBB/styles/all/js/webpush.js.twig

@@ -12,7 +12,7 @@ function PhpbbWebpush() {
 	/** @type {string} URL to unsubscribe from push */
 	const unsubscribeUrl = '{{ U_WEBPUSH_UNSUBSCRIBE }}';
 
-	/** @type {{creationTime: number, formToken: string}} Form tokens */
+	/** @type { {creationTime: number, formToken: string} } Form tokens */
 	this.formTokens = {
 		creationTime: {{ FORM_TOKENS.creation_time }},
 		formToken: '{{ FORM_TOKENS.form_token }}'
@@ -30,7 +30,6 @@ function PhpbbWebpush() {
 	this.init = function() {
 		subscribeButton = document.querySelector('#subscribe_webpush');
 		unsubscribeButton = document.querySelector('#unsubscribe_webpush');
-		let serviceWorkerRegistered = false;
 
 		// Service workers are only supported in secure context
 		if (window.isSecureContext !== true) {
@@ -41,20 +40,17 @@ function PhpbbWebpush() {
 		if ('serviceWorker' in navigator && 'PushManager' in window) {
 			navigator.serviceWorker.register(serviceWorkerUrl)
 				.then(() => {
-					serviceWorkerRegistered = true;
+					subscribeButton.addEventListener('click', subscribeButtonHandler);
+					unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
+
+					updateButtonState();
 				})
 				.catch(error => {
 					console.info(error);
+					// Service worker could not be registered
+					subscribeButton.disabled = true;
 				});
-		}
-
-		if (serviceWorkerRegistered) {
-			subscribeButton.addEventListener('click', subscribeButtonHandler);
-			unsubscribeButton.addEventListener('click', unsubscribeButtonHandler);
-
-			updateButtonState();
 		} else {
-			// Service worker could not be registered
 			subscribeButton.disabled = true;
 		}
 	};
@@ -127,6 +123,7 @@ function PhpbbWebpush() {
 			applicationServerKey: urlB64ToUint8Array(VAPID_PUBLIC_KEY)
 		});
 
+		const loadingIndicator = phpbb.loadingIndicator();
 		fetch(subscribeUrl, {
 				method: 'POST',
 				headers: {
@@ -134,10 +131,14 @@ function PhpbbWebpush() {
 				},
 				body: getFormData(newSubscription)
 			})
-			.then((response) => response.json())
+			.then((response) => {
+				loadingIndicator.fadeOut(phpbb.alertTime);
+				return response.json();
+			})
 			.then(handleSubscribe)
 			.catch((error) => {
-				phpbb.alert({{ lang('AJAX_ERROR_TITLE') }}, error);
+				loadingIndicator.fadeOut(phpbb.alertTime);
+				phpbb.alert('{{ lang('AJAX_ERROR_TITLE') }}', error);
 			});
 	}
 
@@ -156,19 +157,27 @@ function PhpbbWebpush() {
 		}
 
 		const subscription = await registration.pushManager.getSubscription();
+		const loadingIndicator = phpbb.loadingIndicator();
 		fetch(unsubscribeUrl, {
 			method: 'POST',
 			headers: {
 				'X-Requested-With': 'XMLHttpRequest'
 			},
 			body: getFormData({endpoint: subscription.endpoint})
-		}).then(() => {
+		})
-			return subscription.unsubscribe();
+			.then(() => {
-		}).then((unsubscribed) => {
+				loadingIndicator.fadeOut(phpbb.alertTime);
-			if (unsubscribed) {
+				return subscription.unsubscribe();
-				setSubscriptionState(false);
+			})
-			}
+			.then((unsubscribed) => {
-		});
+				if (unsubscribed) {
+					setSubscriptionState(false);
+				}
+			})
+			.catch((error) => {
+				loadingIndicator.fadeOut(phpbb.alertTime);
+				phpbb.alert('{{ lang('AJAX_ERROR_TITLE') }}', error);
+			});
 	}
 
 	/**
@@ -194,7 +203,7 @@ function PhpbbWebpush() {
 	function getFormData(data) {
 		let formData = new FormData();
 		formData.append('form_token', phpbb.webpush.formTokens.formToken);
-		formData.append('creation_time', phpbb.webpush.formTokens.creationTime);
+		formData.append('creation_time', phpbb.webpush.formTokens.creationTime.toString());
 		formData.append('data', JSON.stringify(data));
 
 		return formData;

phpBB/styles/prosilver/template/ucp_notifications_options.html

@@ -12,8 +12,8 @@
 					<dl>
 						<dt><label for="subscribe_webpush">{{ lang('NOTIFY_WEBPUSH_ENABLE') ~ lang('COLON') }}</label><br><span>{{ lang('NOTIFY_WEBPUSH_ENABLE_EXPLAIN') }}</span></dt>
 						<dd>
-							<input id="subscribe_webpush" type="submit" name="subscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_ACTIVATE') }}" class="button1 button button-form">
+							<input id="subscribe_webpush" type="submit" name="subscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_SUBSCRIBE') }}" class="button1 button button-form">
-							<input id="unsubscribe_webpush" type="submit" name="unsubscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_DEACTIVATE') }}" class="button1 button button-form hidden">
+							<input id="unsubscribe_webpush" type="submit" name="unsubscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_UNSUBSCRIBE') }}" class="button1 button button-form hidden">
 						</dd>
 					</dl>
 				</fieldset>