Merge pull request #6692 from iMattPro/ticket/17371

[ticket/17371] Web Push UX Updates

phpBB/assets/javascript/webpush.js

@@ -51,7 +51,7 @@ function PhpbbWebpush() {
 
 		// Service workers are only supported in secure context
 		if (window.isSecureContext !== true) {
-			subscribeButton.disabled = true;
+			setDisabledState();
 			return;
 		}
 
@@ -66,13 +66,33 @@ function PhpbbWebpush() {
 				.catch(error => {
 					console.info(error);
 					// Service worker could not be registered
-					subscribeButton.disabled = true;
+					setDisabledState();
 				});
 		} else {
-			subscribeButton.disabled = true;
+			setDisabledState();
 		}
 	};
 
+	/**
+	 * Disable subscribing buttons, update subscribe button text and hide dropdown toggle
+	 *
+	 * @return void
+	 */
+	function setDisabledState() {
+		subscribeButton.disabled = true;
+
+		const notificationList = document.getElementById('notification-menu');
+		const subscribeToggle = notificationList.querySelector('.webpush-subscribe');
+
+		if (subscribeToggle) {
+			subscribeToggle.style.display = 'none';
+		}
+
+		if (subscribeButton.type === 'submit' || subscribeButton.classList.contains('button')) {
+			subscribeButton.value = subscribeButton.getAttribute('data-disabled-msg');
+		}
+	}
+
 	/**
 	 * Update button state depending on notifications state
 	 *

phpBB/language/en/common.php

@@ -512,10 +512,11 @@ $lang = array_merge($lang, array(
 	),
 	'NOTIFY_ADMIN'				=> 'Please notify the board administrator or webmaster.',
 	'NOTIFY_ADMIN_EMAIL'		=> 'Please notify the board administrator or webmaster: <a href="mailto:%1$s">%1$s</a>',
-	'NOTIFY_WEB_PUSH_ENABLE'	=> 'Enable Web Push notifications',
+	'NOTIFY_WEB_PUSH_DENIED'	=> 'You have denied notifications from this site. To subscribe, please allow notifications in your browser settings.',
+	'NOTIFY_WEB_PUSH_DISABLED'	=> 'Web Push not supported',
+	'NOTIFY_WEB_PUSH_ENABLE'	=> 'Enable web push notifications',
 	'NOTIFY_WEB_PUSH_SUBSCRIBE'	=> 'Subscribe',
 	'NOTIFY_WEB_PUSH_SUBSCRIBED'=> 'Subscribed',
-	'NOTIFY_WEB_PUSH_DENIED'	=> 'You have denied notifications from this site. To subscribe, please allow notifications in your browser settings.',
 	'NO_ACCESS_ATTACHMENT'		=> 'You are not allowed to access this file.',
 	'NO_ACTION'					=> 'No action specified.',
 	'NO_ADMINISTRATORS'			=> 'There are no administrators.',

phpBB/phpbb/ucp/controller/webpush.php

@@ -103,7 +103,7 @@ class webpush
 	{
 		if (!$this->request->is_ajax() || $this->user->data['is_bot'] || $this->user->data['user_type'] == USER_INACTIVE)
 		{
-			throw new http_exception(Response::HTTP_FORBIDDEN, 'Forbidden');
+			throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');
 		}
 
 		if ($this->user->id() !== ANONYMOUS)
@@ -132,7 +132,7 @@ class webpush
 		// Subscribe should only be available for logged-in "normal" users
 		if ($this->user->data['user_type'] == USER_IGNORE)
 		{
-			throw new http_exception(Response::HTTP_FORBIDDEN, 'Forbidden');
+			throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');
 		}
 
 		$item_id = $this->request->variable('item_id', 0);
@@ -192,7 +192,7 @@ class webpush
 			}
 		}
 
-		throw new http_exception(Response::HTTP_FORBIDDEN, 'Forbidden');
+		throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');
 	}
 
 	/**
@@ -251,7 +251,7 @@ class webpush
 		}
 
 		// Subscribe should only be available for logged-in "normal" users
-		if (!$this->request->is_ajax() || $this->user->id() == ANONYMOUS || $this->user->data['is_bot']
+		if (!$this->request->is_ajax() || $this->user->id() === ANONYMOUS || $this->user->data['is_bot']
 			|| $this->user->data['user_type'] == USER_IGNORE || $this->user->data['user_type'] == USER_INACTIVE)
 		{
 			throw new http_exception(Response::HTTP_FORBIDDEN, 'NO_AUTH_OPERATION');

phpBB/styles/prosilver/imgs/svg/toggle-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-.621 0-1.227.066-1.813.188a9.238 9.238 0 0 0-.875.218A9.073 9.073 0 0 0 .72 12.5c-.114.27-.227.531-.313.813A8.848 8.848 0 0 0 0 16c0 .93.145 1.813.406 2.656c.004.008-.004.024 0 .032A9.073 9.073 0 0 0 5.5 24.28c.27.114.531.227.813.313A8.83 8.83 0 0 0 9 24.999h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm0 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7c0-.242.008-.484.031-.719A6.985 6.985 0 0 1 9 9m5.625 0H23c3.879 0 7 3.121 7 7s-3.121 7-7 7h-8.375C16.675 21.348 18 18.828 18 16c0-2.828-1.324-5.348-3.375-7"/></svg>

phpBB/styles/prosilver/imgs/svg/toggle-on.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"><path fill="currentColor" d="M9 7c-4.96 0-9 4.035-9 9s4.04 9 9 9h14c4.957 0 9-4.043 9-9s-4.043-9-9-9zm14 2c3.879 0 7 3.121 7 7s-3.121 7-7 7s-7-3.121-7-7s3.121-7 7-7"/></svg>

phpBB/styles/prosilver/template/notification_dropdown.html

@@ -47,8 +47,8 @@
 		{% if NOTIFICATIONS_WEBPUSH_ENABLE and notification_types is not defined %}
 			<div class="footer webpush-subscribe">
 				<span class="ellipsis-text">{{ lang('NOTIFY_WEB_PUSH_ENABLE') ~ lang('COLON') }}</span>
-				<button id="subscribe_webpush" name="subscribe_webpush" class="notification-subscribe-toggle" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">{{ Icon('font', 'toggle-off', lang('NOTIFY_WEB_PUSH_SUBSCRIBE'), false, '', {'style' : 'color:#9e9e9e;'}) }}</button>
+				<button id="subscribe_webpush" name="subscribe_webpush" class="notification-subscribe-toggle" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">{{ Icon('svg', 'toggle-off', lang('NOTIFY_WEB_PUSH_SUBSCRIBE'), true, 'push-subscribe-toggle-icon toggle-off') }}</button>
-				<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="notification-subscribe-toggle hidden">{{ Icon('font', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), false, '', {'style' : 'color:#0059b3;'}) }}</button>
+				<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="notification-subscribe-toggle hidden">{{ Icon('svg', 'toggle-on', lang('NOTIFY_WEB_PUSH_SUBSCRIBED'), true, 'push-subscribe-toggle-icon toggle-on') }}</button>
 			</div>
 		{% endif %}
 		{% EVENT notification_dropdown_footer_after %}

phpBB/styles/prosilver/template/ucp_notifications_options.html

@@ -10,7 +10,7 @@
 					<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_SUBSCRIBE') }}" class="button1 button button-form" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}">
+							<input id="subscribe_webpush" type="submit" name="subscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_SUBSCRIBE') }}" class="button1 button button-form" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEB_PUSH_DENIED') }}" data-disabled-msg="{{ lang('NOTIFY_WEB_PUSH_DISABLED') }}">
 							<input id="unsubscribe_webpush" type="submit" name="unsubscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_UNSUBSCRIBE') }}" class="button1 button button-form hidden">
 						</dd>
 					</dl>

phpBB/styles/prosilver/theme/colours.css

@@ -298,6 +298,14 @@ a:hover .icon.icon-black, /* DEPRECATED 4.0 */
 	color: inherit;
 }
 
+.push-subscribe-toggle-icon.toggle-on {
+	color: #0059b3;
+}
+
+.push-subscribe-toggle-icon.toggle-off {
+	color: #9e9e9e;
+}
+
 /* jumpbox */
 .jumpbox .dropdown li {
 	border-top-color: #dedede;

phpBB/styles/prosilver/theme/icons.css

@@ -123,6 +123,12 @@ blockquote cite:before,
 	height: 18px;
 }
 
+.push-subscribe-toggle-icon {
+	width: 20px;
+	height: 20px;
+	cursor: pointer;
+}
+
 /* Contact icons
 ---------------------------------------- */
 .contact-icon {