Switch from a toggle to a button

Author: iMattPro

language/en/webpushnotifications_module_ucp.php

@@ -53,6 +53,8 @@
 	'NOTIFY_WEBPUSH_POPUP_MESSAGE'	=> 'We would like to send you browser notifications for replies, private messages, and relevant forum activity. Optional — you can manage these settings at any time.',
 	'NOTIFY_WEBPUSH_POPUP_ALLOW'	=> 'Allow',
 	'NOTIFY_WEBPUSH_POPUP_DENY'		=> 'Deny',
-	'NOTIFY_WEBPUSH_POPUP_DISABLE'	=> 'Disable “Allow Browser Notifications” prompts',
-	'NOTIFY_WEBPUSH_POPUP_DISABLE_EXPLAIN'	=> 'Toggle this on to stop us from asking you to enable web push notifications on any of your devices. Note that we won’t be able to alert you if your web push notifications ever become disabled.',
+	'NOTIFY_WEBPUSH_POPUP_DISABLE'	=> 'Notification reminder pop-ups',
+	'NOTIFY_WEBPUSH_POPUP_DISABLE_EXPLAIN'	=> 'We show a reminder asking you to allow browser notifications when they are not currently enabled or when we cannot detect them. Turn this off to permanently stop these reminder pop-ups on all your devices. If you turn this off, you will not be warned if your browser notifications stop working in the future.',
+	'NOTIFY_WEBPUSH_POPUP_ENABLER'	=> 'Enable reminders',
+	'NOTIFY_WEBPUSH_POPUP_DISABLER'	=> 'Disable reminders',
 ]);

styles/all/template/webpush.js

@@ -389,19 +389,10 @@ function PhpbbWebpush() {
 			.then(data => {
 				loadingIndicator.fadeOut(phpbb.alertTime);
 				if (data.success) {
-					// Update toggle icon based on new state
+					// Update button text based on new state
 					const button = document.getElementById('toggle_popup_prompt');
 					if (button) {
-						const icon = button.querySelector('i');
-						if (icon) {
-							if (data.disabled) {
-								icon.classList.remove('fa-toggle-off');
-								icon.classList.add('fa-toggle-on');
-							} else {
-								icon.classList.remove('fa-toggle-on');
-								icon.classList.add('fa-toggle-off');
-							}
-						}
+						button.value = data.disabled ? button.getAttribute('data-l-enable') : button.getAttribute('data-l-disable');
 					}
 					if ('form_tokens' in data) {
 						updateFormTokens(data.form_tokens);

styles/prosilver/template/event/ucp_notifications_content_before.html

@@ -13,9 +13,7 @@
 				<dl>
 					<dt><label for="toggle_popup_prompt">{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE') ~ lang('COLON') }}</label><br><span>{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE_EXPLAIN') }}</span></dt>
 					<dd>
-						<button id="toggle_popup_prompt" type="button" name="toggle_popup_prompt" aria-label="{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLE') }}">
-							<i class="icon icon-lg fa-fw fa-toggle-{% if S_WEBPUSH_POPUP_DISABLED %}on{% else %}off{% endif %}" aria-hidden="true"></i>
-						</button>
+						<input id="toggle_popup_prompt" type="button" name="toggle_popup_prompt" value="{% if S_WEBPUSH_POPUP_DISABLED %}{{ lang('NOTIFY_WEBPUSH_POPUP_ENABLER') }}{% else %}{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLER') }}{% endif %}" class="button1 button button-form" data-l-disable="{{ lang('NOTIFY_WEBPUSH_POPUP_DISABLER')|e('html_attr') }}" data-l-enable="{{ lang('NOTIFY_WEBPUSH_POPUP_ENABLER')|e('html_attr') }}">
 					</dd>
 				</dl>
 				{% endif %}

tests/functional/functional_test.php

@@ -178,10 +178,9 @@ public function test_popup_preference_toggle()
 		$this->assertCount(1, $crawler->filter('#toggle_popup_prompt'));
 		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_DISABLE', $crawler->filter('label[for="toggle_popup_prompt"]')->text());
 
-		// Assert toggle is initially off (prompts enabled)
-		$toggle_icon = $crawler->filter('#toggle_popup_prompt i');
-		$this->assertCount(1, $toggle_icon);
-		$this->assertTrue($toggle_icon->attr('class') !== null && strpos($toggle_icon->attr('class'), 'fa-toggle-off') !== false);
+		// Assert button text shows "Disable" initially (prompts enabled)
+		$button_value = $crawler->filter('#toggle_popup_prompt')->attr('value');
+		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_DISABLER', $button_value);
 
 		// After user disables popup (in reality this would be via AJAX, but we test the state)
 		// Set user preference to disabled via DB
@@ -194,10 +193,9 @@ public function test_popup_preference_toggle()
 		// Reload page
 		$crawler = self::request('GET', 'ucp.php?i=ucp_notifications&mode=notification_options');
 
-		// Assert toggle is now on (prompts disabled)
-		$toggle_icon = $crawler->filter('#toggle_popup_prompt i');
-		$this->assertCount(1, $toggle_icon);
-		$this->assertTrue($toggle_icon->attr('class') !== null && strpos($toggle_icon->attr('class'), 'fa-toggle-on') !== false);
+		// Assert button text shows "Enable" now (prompts disabled)
+		$button_value = $crawler->filter('#toggle_popup_prompt')->attr('value');
+		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_ENABLER', $button_value);
 
 		// Assert popup is not shown on index when user has disabled it
 		$crawler = self::request('GET', 'index.php');