Merge pull request #118 from iMattPro/improve-prompt

Improve prompt popup

Author: iMattPro

language/en/webpushnotifications_module_acp.php

@@ -51,6 +51,6 @@
 	'WEBPUSH_DROPDOWN_SUBSCRIBE'	=> 'Show web push settings in the notification dropdown',
 	'WEBPUSH_DROPDOWN_SUBSCRIBE_EXPLAIN'=> 'Show or hide the “Enable Web Push” toggle switch in the notification dropdown. This allows users to easily enable or disable push notifications from any page of the forum.',
 	'WEBPUSH_POPUP_PROMPT'			=> 'Show popup prompt for unsubscribed members',
-	'WEBPUSH_POPUP_PROMPT_EXPLAIN'	=> 'Display a popup message asking registered members if they want to receive push notifications. The popup will only appear to members who are not currently subscribed and have not previously declined.',
+	'WEBPUSH_POPUP_PROMPT_EXPLAIN'	=> 'Display a popup message asking registered members if they want to receive push notifications. The popup will only appear to members who are not currently subscribed and have not previously denied.',
 	'WEBPUSH_INSECURE_SERVER_ERROR' => 'This board is not using a secure SSL/HTTPS protocol, which is required for enabling web push notifications. Alternatively, the server environment might be misconfigured. Ensure that the <em>HTTPS</em> and <em>HEADER_CLIENT_PROTO</em> server environment variables are correctly configured.',
 ]);

language/en/webpushnotifications_module_ucp.php

@@ -52,5 +52,5 @@
 	'NOTIFY_WEBPUSH_POPUP_TITLE'	=> 'Allow browser notifications?',
 	'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_DECLINE'	=> 'Decline',
+	'NOTIFY_WEBPUSH_POPUP_DENY'		=> 'Deny',
 ]);

language/ru/webpushnotifications_module_ucp.php

@@ -52,5 +52,5 @@
 	'NOTIFY_WEBPUSH_POPUP_TITLE'	=> 'Включить браузерные уведомления?',
 	'NOTIFY_WEBPUSH_POPUP_MESSAGE'	=> 'Браузерные уведомления позволяют быстро получать информацию о новых ответах, личных сообщениях и других активностях на данной конференции.  Функцию можно отключить или включить в любое время в настройках уведомлений в Личном разделе.',
 	'NOTIFY_WEBPUSH_POPUP_ALLOW'	=> 'Включить',
-	'NOTIFY_WEBPUSH_POPUP_DECLINE'	=> 'Отклонить',
+	'NOTIFY_WEBPUSH_POPUP_DENY'		=> 'Отклонить',
 ]);

styles/all/template/webpush.js

@@ -1,8 +1,8 @@
 /* global phpbb */
 
-'use strict';
-
 function PhpbbWebpush() {
+	'use strict';
+
 	/** @type {string} URL to service worker */
 	let serviceWorkerUrl = '';
 
@@ -126,8 +126,8 @@ function PhpbbWebpush() {
 			return;
 		}
 
-		// Check if user declined on this browser
-		if (getDeclined() === 'true') {
+		// Check if user denied prompt on this browser
+		if (promptDenied.get() === 'true') {
 			return;
 		}
 
@@ -157,30 +157,32 @@ function PhpbbWebpush() {
 		}, 1000);
 
 		const allowBtn = document.getElementById('wpn_popup_allow');
-		const declineBtn = document.getElementById('wpn_popup_decline');
+		const denyBtn = document.getElementById('wpn_popup_deny');
 		const overlay = document.getElementById('wpn_popup_prompt');
 
 		if (allowBtn) {
 			allowBtn.addEventListener('click', (event) => {
 				event.stopPropagation();
 				popup.style.display = 'none';
-				subscribeButtonHandler({ preventDefault: () => {} });
+				subscribeButtonHandler({
+					preventDefault: () => {}
+				});
 			});
 		}
 
-		if (declineBtn) {
-			declineBtn.addEventListener('click', (event) => {
+		if (denyBtn) {
+			denyBtn.addEventListener('click', (event) => {
 				event.stopPropagation();
 				popup.style.display = 'none';
-				setDeclined();
+				promptDenied.set();
 			});
 		}
 
 		if (overlay) {
 			overlay.addEventListener('click', (event) => {
 				if (event.target === overlay) {
 					popup.style.display = 'none';
-					setDeclined();
+					promptDenied.set();
 				}
 			});
 		}
@@ -328,7 +330,7 @@ function PhpbbWebpush() {
 			if ('form_tokens' in response) {
 				updateFormTokens(response.form_tokens);
 			}
-			resetDeclined();
+			promptDenied.remove();
 			const popup = document.getElementById('wpn_popup_prompt');
 			if (popup) {
 				popup.style.display = 'none';
@@ -379,18 +381,26 @@ function PhpbbWebpush() {
 		return outputArray;
 	}
 
-	function setDeclined() {
-		localStorage.setItem('wpn_popup_declined', 'true');
-	}
-	function getDeclined() {
-		return localStorage.getItem('wpn_popup_declined');
-	}
-	function resetDeclined() {
-		localStorage.removeItem('wpn_popup_declined');
-	}
+	const promptDenied = {
+		key: 'wpn_popup_denied',
+
+		set() {
+			localStorage.setItem(this.key, 'true');
+		},
+
+		get() {
+			return localStorage.getItem(this.key);
+		},
+
+		remove() {
+			localStorage.removeItem(this.key);
+		}
+	};
 }
 
 function domReady(callBack) {
+	'use strict';
+
 	if (document.readyState === 'loading') {
 		document.addEventListener('DOMContentLoaded', callBack);
 	} else {
@@ -401,6 +411,8 @@ function domReady(callBack) {
 phpbb.webpush = new PhpbbWebpush();
 
 domReady(() => {
+	'use strict';
+
 	/* global phpbbWebpushOptions */
 	phpbb.webpush.init(phpbbWebpushOptions);
 });

styles/all/template/webpush_popup.html

@@ -2,11 +2,17 @@
 <div id="wpn_popup_prompt" class="wpn-popup-overlay" style="display:none;">
 	<div class="wpn-popup-container">
 		<div class="wpn-popup-content">
-			<h3 class="wpn-popup-title">{{ lang('NOTIFY_WEBPUSH_POPUP_TITLE') }}</h3>
+			<h3 class="wpn-popup-title">
+				<span>{{ lang('NOTIFY_WEBPUSH_POPUP_TITLE') }}</span>
+				<span class="fa-stack fa-lg">
+					<i class="fa fa-circle fa-stack-2x"></i>
+					<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
+				</span>
+			</h3>
 			<p class="wpn-popup-message">{{ lang('NOTIFY_WEBPUSH_POPUP_MESSAGE') }}</p>
 			<div class="wpn-popup-buttons">
 				<button id="wpn_popup_allow" class="wpn-popup-btn wpn-popup-btn-allow">{{ lang('NOTIFY_WEBPUSH_POPUP_ALLOW') }}</button>
-				<button id="wpn_popup_decline" class="wpn-popup-btn wpn-popup-btn-decline">{{ lang('NOTIFY_WEBPUSH_POPUP_DECLINE') }}</button>
+				<button id="wpn_popup_deny" class="wpn-popup-btn wpn-popup-btn-deny">{{ lang('NOTIFY_WEBPUSH_POPUP_DENY') }}</button>
 			</div>
 		</div>
 	</div>

styles/all/theme/phpbb_wpn.css

@@ -95,9 +95,20 @@
 	font-size: 18px;
 	font-weight: 600;
 	color: #333333;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
 	margin: 0 0 12px;
 }
 
+.wpn-popup-title .fa-stack-2x {
+	color: #0066cc;
+}
+
+.wpn-popup-title .fa-stack-1x {
+	top: -1px;
+}
+
 .wpn-popup-message {
 	font-size: 14px;
 	line-height: 1.5;
@@ -130,12 +141,12 @@
 	background: #0052a3;
 }
 
-.wpn-popup-btn-decline {
+.wpn-popup-btn-deny {
 	background: #f0f0f0;
 	color: #666666;
 }
 
-.wpn-popup-btn-decline:hover {
+.wpn-popup-btn-deny:hover {
 	background: #e0e0e0;
 }
 

tests/functional/functional_test.php

@@ -159,7 +159,7 @@ public function test_popup_prompt()
 		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_TITLE', $crawler->filter('.wpn-popup-title')->text());
 		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_MESSAGE', $crawler->filter('.wpn-popup-message')->text());
 		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_ALLOW', $crawler->filter('#wpn_popup_allow')->text());
-		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_DECLINE', $crawler->filter('#wpn_popup_decline')->text());
+		$this->assertContainsLang('NOTIFY_WEBPUSH_POPUP_DENY', $crawler->filter('#wpn_popup_deny')->text());
 	}
 
 	protected function set_acp_option($option, $value)