Design changes

.github/workflows/tests.yml

@@ -125,6 +125,8 @@ jobs:
                       db: "mysql:5.7"
                     - php: '8.3'
                       db: "mysql:5.7"
+                    - php: '8.4'
+                      db: "mysql:5.7"
 
         name: PHP ${{ matrix.php }} - ${{ matrix.db_alias != '' && matrix.db_alias || matrix.db }}
 
@@ -247,6 +249,8 @@ jobs:
                       db: "postgres:14"
                     - php: '8.3'
                       db: "postgres:14"
+                    - php: '8.4'
+                      db: "postgres:14"
 
         name: PHP ${{ matrix.php }} - ${{ matrix.db }}
 

README.md

@@ -37,16 +37,16 @@ Testing push notifications necessitates user-to-user interactions to observe the
 
 1. **User Account Setup:**
 	- Create at least two distinct user accounts for testing purposes.
-    - In user1's account notifications preferences, assign web push notifications and subscribe to receive Push Notifications.
+    - In the notifications preferences for _**User Account 1**_, subscribe to receive Push Notifications (and assign web push notification types if necessary).
 
 2. **Message, Quote, or Reply Interaction:**
-	- Initiate a user-to-user interaction by performing one of the following actions using "User Account 2":
-		- **Private Message:** Send a direct message from "User Account 2" to "User Account 1".
-		- **Quote:** Quote a post or message authored by "User Account 1" using "User Account 2".
-		- **Reply:** Respond to a post or message authored by "User Account 1" using "User Account 2".
+	- Initiate a user-to-user interaction by performing one of the following actions using _**User Account 2**_:
+		- **Private Message:** Send a direct message from _**User Account 2**_ to _**User Account 1**_.
+		- **Quote:** Quote a post or message authored by _**User Account 1**_ using _**User Account 2**_.
+		- **Reply:** Respond to a post or message authored by _**User Account 1**_ using _**User Account 2**_.
 
 3. **Observing Push Notifications:**
-	- Once the interaction is performed from "User Account 2" to engage with "User Account 1," you promptly should see a notification for "User Account 1."
+	- Once the interaction is performed from _**User Account 2**_ to engage with _**User Account 1**_, you promptly should see a notification for _**User Account 1**_.
 
 4. **Caveats for Local Testing**
     - Local testing of Push Notifications only works from a `localhost` address or if your local server has a secure SSL certificate.

acp/wpn_acp_module.php

@@ -105,6 +105,13 @@ public function display_settings()
 			'S_WEBPUSH_METHOD_ENABLED' 		=> $this->config['wpn_webpush_method_enabled'],
 			'U_ACTION'						=> $this->u_action,
 		]);
+
+		if (!$this->request->server('HTTPS', false))
+		{
+			$this->errors[] = $this->lang->lang('WEBPUSH_INSECURE_SERVER_ERROR');
+		}
+
+		$this->display_errors();
 	}
 
 	/**
@@ -135,13 +142,8 @@ public function save_settings()
 			validate_config_vars($display_settings, $config_array, $this->errors);
 		}
 
-		if (count($this->errors))
+		if ($this->display_errors())
 		{
-			$this->template->assign_vars([
-				'S_ERROR'			=> (bool) count($this->errors),
-				'ERROR_MSG'			=> implode('<br>', $this->errors),
-			]);
-
 			return;
 		}
 
@@ -154,4 +156,21 @@ public function save_settings()
 
 		trigger_error($this->lang->lang('CONFIG_UPDATED') . adm_back_link($this->u_action), E_USER_NOTICE);
 	}
+
+	/**
+	 * Display any errors
+	 *
+	 * @return bool
+	 */
+	public function display_errors()
+	{
+		$has_errors = (bool) count($this->errors);
+
+		$this->template->assign_vars([
+			'S_ERROR'	=> $has_errors,
+			'ERROR_MSG'	=> $has_errors ? implode('<br>', $this->errors) : '',
+		]);
+
+		return $has_errors;
+	}
 }

language/en/webpushnotifications_module_acp.php

@@ -50,4 +50,5 @@
 	'WEBPUSH_METHOD_ENABLED_EXPLAIN'=> 'When this setting is enabled, users who subscribe and allow browser notifications will start receiving them automatically. They only need to visit the UCP Notification settings to disable any unwanted notifications.<br><br>If this setting is disabled, users will not receive any notifications, even if they have subscribed, until they visit the UCP Notification settings to enable the specific notifications they wish to receive.',
 	'WEBPUSH_DROPDOWN_SUBSCRIBE'	=> 'Show “Subscribe” button in notification dropdown',
 	'WEBPUSH_DROPDOWN_SUBSCRIBE_EXPLAIN'=> 'Enable or disable the “Subscribe” button in the Notification dropdown, allowing users to easily subscribe to push notifications from any page of the forum.',
+	'WEBPUSH_INSECURE_SERVER_ERROR' => 'This board is not using a secure SSL/HTTPS server protocol, which is required to enable and use web push notifications.',
 ]);

language/en/webpushnotifications_module_ucp.php

@@ -39,12 +39,12 @@
 
 $lang = array_merge($lang, [
 	'NOTIFICATION_METHOD_PHPBB_WPN_WEBPUSH'	=> 'Web Push',
-	'NOTIFY_WEBPUSH_ENABLE_SHORT'	=> 'Enable Web Push notifications',
-	'NOTIFY_WEBPUSH_ENABLE'			=> 'Enable receiving Web Push 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, by unsubscribing, or by disabling the push notifications below.',
+	'NOTIFY_WEBPUSH_NOTIFICATIONS'	=> 'Web Push Notifications',
+	'NOTIFY_WEBPUSH_DISABLE'		=> 'Disable Push Notifications',
+	'NOTIFY_WEBPUSH_ENABLE'			=> 'Enable Push Notifications',
+	'NOTIFY_WEBPUSH_ENABLE_EXPLAIN'	=> 'Enabling push notifications will activate them on this device only. You can turn off notifications at any time through your browser settings or by clicking the button above. Additionally, if no web push notification types are selected below, you will not receive any web push notifications.',
 	'NOTIFY_WEBPUSH_SUBSCRIBE'		=> 'Subscribe',
 	'NOTIFY_WEBPUSH_UNSUBSCRIBE'	=> 'Unsubscribe',
-	'NOTIFY_WEBPUSH_SUBSCRIBED'		=> 'Subscribed',
 	'NOTIFY_WEBPUSH_DROPDOWN_TITLE'	=> 'Visit notifications settings to set your preferred push notifications.',
 	'NOTIFY_WEBPUSH_DENIED'			=> 'You have denied notifications from this site. To subscribe, please allow notifications in your browser settings.',
 ]);

language/ru/webpushnotifications_module_acp.php

@@ -50,4 +50,5 @@
 	'WEBPUSH_METHOD_ENABLED_EXPLAIN'=> 'Если включено, то пользователи, подписавшиеся на браузерные push—уведомления, будут автоматически получать все их типы. Если отключено, то пользователи не будут получать браузерные push—уведомления до тех пор, пока хотя бы один их тип не выбран.<br><br>Отключить нежелательные или выбрать нужные типы браузерных push—уведомлений можно в настройках уведомлений в Личном разделе.',
 	'WEBPUSH_DROPDOWN_SUBSCRIBE'	=> 'Показать кнопку «Подписаться» в выпадающем меню уведомлений',
 	'WEBPUSH_DROPDOWN_SUBSCRIBE_EXPLAIN'=> 'Включить или отключить отображение кнопки «Подписаться» в выпадающем списке уведомлений. Если включено, то пользователи смогут подписываться на браузерные push-уведомления с любой страницы конференции.',
+	'WEBPUSH_INSECURE_SERVER_ERROR' => 'Эта доска не использует защищенный протокол SSL/HTTPS, который необходим для включения и использования веб-уведомлений.',
 ]);

language/ru/webpushnotifications_module_ucp.php

@@ -39,12 +39,12 @@
 
 $lang = array_merge($lang, [
 	'NOTIFICATION_METHOD_PHPBB_WPN_WEBPUSH'	=> 'Браузерные',
-	'NOTIFY_WEBPUSH_ENABLE_SHORT'	=> 'Браузерные уведомления',
-	'NOTIFY_WEBPUSH_ENABLE'			=> 'Включить браузерные push—уведомления',
-	'NOTIFY_WEBPUSH_ENABLE_EXPLAIN'	=> 'Включение возможности получения браузерных push—уведомлений.<br>Данная возможность может быть отключена в любое время в настройках браузера, с помощью кнопки «Отписаться» или путём отключения типов уведомлений в категории  «Браузерные» ниже.',
+	'NOTIFY_WEBPUSH_NOTIFICATIONS'	=> 'Веб-уведомления',
+	'NOTIFY_WEBPUSH_DISABLE'		=> 'Отключить веб-уведомления',
+	'NOTIFY_WEBPUSH_ENABLE'			=> 'Браузерные уведомления',
+	'NOTIFY_WEBPUSH_ENABLE_EXPLAIN'	=> 'Включение веб-уведомлений активирует их только на этом устройстве. Вы можете отключить уведомления в любое время через настройки браузера или нажав на кнопку выше. Кроме того, если ниже не выбрано ни одного типа веб-уведомлений, вы не будете получать никаких веб-уведомлений.',
 	'NOTIFY_WEBPUSH_SUBSCRIBE'		=> 'Подписаться',
 	'NOTIFY_WEBPUSH_UNSUBSCRIBE'	=> 'Отписаться',
-	'NOTIFY_WEBPUSH_SUBSCRIBED'		=> 'Включено',
 	'NOTIFY_WEBPUSH_DROPDOWN_TITLE'	=> 'Посетите настройки уведомлений, чтобы установить предпочтительные типы браузерных уведомлений.',
 	'NOTIFY_WEBPUSH_DENIED'			=> 'Вы запретили браузерные уведомления для даного сайта. Для того, чтобы подписаться, необходимо их разрешить в настройках браузера.',
 ]);

styles/all/template/event/notification_dropdown_footer_after.html

@@ -1,11 +1,11 @@
 {% if NOTIFICATIONS_WEBPUSH_ENABLE and notification_types is not defined %}
 	<div class="wpn-notification-dropdown-footer" title="{{ lang('NOTIFY_WEBPUSH_DROPDOWN_TITLE') }}">
-		<span class="ellipsis-text">{{ lang('NOTIFY_WEBPUSH_ENABLE_SHORT') ~ lang('COLON') }}</span>
+		<span class="ellipsis-text">{{ lang('NOTIFY_WEBPUSH_ENABLE') ~ lang('COLON') }}</span>
 		<button id="subscribe_webpush" name="subscribe_webpush" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEBPUSH_DENIED') }}">
-			<i class="icon fa-toggle-off fa-fw icon-lightgray"></i><span>{{ lang('NOTIFY_WEBPUSH_SUBSCRIBE') }}</span>
+			<i class="icon fa-toggle-off fa-fw icon-lightgray" aria-hidden="true" title="{{ lang('NOTIFY_WEBPUSH_SUBSCRIBE') }}"><span class="sr-only">{{ lang('NOTIFY_WEBPUSH_SUBSCRIBE') }}</span></i>
 		</button>
 		<button id="unsubscribe_webpush" name="unsubscribe_webpush" class="hidden">
-			<i class="icon fa-toggle-on fa-fw icon-blue"></i><span>{{ lang('NOTIFY_WEBPUSH_SUBSCRIBED') }}</span>
+			<i class="icon fa-toggle-on fa-fw icon-blue" aria-hidden="true" title="{{ lang('NOTIFY_WEBPUSH_UNSUBSCRIBE') }}"><span class="sr-only">{{ lang('NOTIFY_WEBPUSH_UNSUBSCRIBE') }}</span></i>
 		</button>
 	</div>
 {% endif %}

styles/all/theme/phpbb_wpn.css

@@ -1,16 +1,21 @@
-.button[disabled],
-.button[disabled]:hover,
-.button.disabled,
-.button.disabled:hover {
+.wpn.button[disabled],
+.wpn.button[disabled]:hover,
+.wpn.button.disabled,
+.wpn.button.disabled:hover {
 	background: #e0e0e0;
 	border-color: #9e9e9e;
 	color: #9e9e9e;
 }
 
-.button.hidden {
+.wpn.button.hidden,
+.wpn-notification-dropdown-footer button.hidden {
 	display: none;
 }
 
+.wpn.button {
+	margin: 0 0 8px;
+}
+
 .wpn-notification-dropdown-footer {
 	font-size: 12px;
 	white-space: nowrap;
@@ -22,16 +27,27 @@
 	gap: 20px;
 }
 
+.wpn-notification-dropdown-footer button {
+	display: inline-flex;
+	align-items: center;
+}
+
 .wpn-notification-dropdown-footer button:disabled {
 	opacity: 0.7;
 }
 
-@media only screen and (max-width: 550px), only screen and (max-device-width: 550px) {
-	.wpn-notification-dropdown-footer button > span {
-		display: none;
-	}
+.wpn-notification-dropdown-footer button > .icon {
+	font-size: 20px;
+}
 
+@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {
 	.wpn-notification-dropdown-footer button > .icon {
 		font-size: 24px;
 	}
 }
+
+@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
+	.wpn.button {
+		margin-top: 8px;
+	}
+}

styles/prosilver/template/event/ucp_notifications_content_before.html

@@ -3,10 +3,11 @@
 		<div class="inner">
 			<fieldset>
 				<dl>
-					<dt><label for="subscribe_webpush">{{ lang('NOTIFY_WEBPUSH_ENABLE') ~ lang('COLON') }}</label><br><span>{{ lang('NOTIFY_WEBPUSH_ENABLE_EXPLAIN') }}</span></dt>
+					<dt><label for="subscribe_webpush">{{ lang('NOTIFY_WEBPUSH_NOTIFICATIONS') ~ lang('COLON') }}</label></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_WEBPUSH_DENIED') }}">
-						<input id="unsubscribe_webpush" type="submit" name="unsubscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_UNSUBSCRIBE') }}" class="button1 button button-form hidden">
+						<input id="subscribe_webpush" type="submit" name="subscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_ENABLE') }}" class="wpn button1 button button-form" data-l-err="{{ lang('INFORMATION') }}" data-l-msg="{{ lang('NOTIFY_WEBPUSH_DENIED') }}">
+						<input id="unsubscribe_webpush" type="submit" name="unsubscribe_webpush" value="{{ lang('NOTIFY_WEBPUSH_DISABLE') }}" class="wpn button1 button button-form hidden">
+						<br><span>{{ lang('NOTIFY_WEBPUSH_ENABLE_EXPLAIN') }}</span>
 					</dd>
 				</dl>
 			</fieldset>

tests/functional/functional_test.php

@@ -71,7 +71,7 @@ public function test_ucp_module()
 
 		$crawler = self::request('GET', 'ucp.php?i=ucp_notifications&mode=notification_options');
 
-		$this->assertContainsLang('NOTIFY_WEBPUSH_ENABLE', $crawler->filter('label[for="subscribe_webpush"]')->text());
+		$this->assertContainsLang('NOTIFY_WEBPUSH_NOTIFICATIONS', $crawler->filter('label[for="subscribe_webpush"]')->text());
 		$this->assertContainsLang('NOTIFICATION_METHOD_PHPBB_WPN_WEBPUSH', $crawler->filter('th.mark')->eq(2)->text());
 
 		// Assert checkbox is unchecked by default
@@ -105,8 +105,8 @@ public function test_dropdown_subscribe_button()
 		// Assert subscribe dropdown is present
 		$crawler = self::request('GET', 'index.php');
 		$this->assertCount(1, $crawler->filter('.wpn-notification-dropdown-footer'));
-		$this->assertContainsLang('NOTIFY_WEBPUSH_SUBSCRIBE', $crawler->filter('.wpn-notification-dropdown-footer #subscribe_webpush')->text());
-		$this->assertContainsLang('NOTIFY_WEBPUSH_SUBSCRIBED', $crawler->filter('.wpn-notification-dropdown-footer #unsubscribe_webpush')->text());
+		$this->assertContainsLang('NOTIFY_WEBPUSH_SUBSCRIBE', $crawler->filter('.wpn-notification-dropdown-footer #subscribe_webpush')->html());
+		$this->assertContainsLang('NOTIFY_WEBPUSH_UNSUBSCRIBE', $crawler->filter('.wpn-notification-dropdown-footer #unsubscribe_webpush')->html());
 
 		// Assert subscribe button is not displayed in UCP when dropdown subscribe is present
 		$crawler = self::request('GET', 'ucp.php?i=ucp_notifications&mode=notification_options');