From 7252345911bb2480e8f493a3a18d6452232da0c4 Mon Sep 17 00:00:00 2001
From: Matt Friedman <maf675@gmail.com>
Date: Wed, 17 Jul 2024 09:29:30 -0700
Subject: [PATCH] [ticket/17371] Improve UX for disabled state

PHPBB-17371

Signed-off-by: Matt Friedman <maf675@gmail.com>
---
 phpBB/assets/javascript/webpush.js            | 26 ++++++++++++++++---
 phpBB/language/en/common.php                  |  5 ++--
 .../template/ucp_notifications_options.html   |  2 +-
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/phpBB/assets/javascript/webpush.js b/phpBB/assets/javascript/webpush.js
index 94e542d2ae..4adb9ecf10 100644
--- a/phpBB/assets/javascript/webpush.js
+++ b/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
 	 *
diff --git a/phpBB/language/en/common.php b/phpBB/language/en/common.php
index 43269679bf..d528ef9b2b 100644
--- a/phpBB/language/en/common.php
+++ b/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.',
diff --git a/phpBB/styles/prosilver/template/ucp_notifications_options.html b/phpBB/styles/prosilver/template/ucp_notifications_options.html
index 27981581ff..5b953362fe 100644
--- a/phpBB/styles/prosilver/template/ucp_notifications_options.html
+++ b/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>