nodebb-plugin-web-push 0.1.0 → 0.3.0

package/lib/controllers.js

@@ -17,7 +17,6 @@ Controllers.renderSettings = async function (req, res) {
 		user.getUserFields(res.locals.uid, ['username', 'userslug']),
 		subscriptions.count(req.uid),
 	]);
-	console.log(count);
 
 	const payload = {
 		...res.locals.userData,
@@ -29,8 +28,17 @@ Controllers.renderSettings = async function (req, res) {
 	res.render('account/web-push', payload);
 };
 
-Controllers.renderAdminPage = function (req, res/* , next */) {
+Controllers.renderAdminPage = async (req, res/* , next */) => {
+	const countsByUser = await subscriptions.getUsers();
+	const uids = Array.from(countsByUser.keys());
+	let users = await user.getUsersFields(uids, ['uid', 'username', 'picture']);
+	users = users.map((user) => {
+		user.deviceCount = countsByUser.get(user.uid);
+		return user;
+	});
+
 	res.render('admin/plugins/web-push', {
-		title: 'Quick Start',
+		title: 'Push Notifications',
+		users,
 	});
 };

package/lib/subscriptions.js

@@ -6,6 +6,13 @@ const Subscriptions = module.exports;
 
 Subscriptions.count = async uid => await db.sortedSetCard(`uid:${uid}:web-push:subscriptions`);
 
+Subscriptions.getUsers = async () => {
+	const uids = await db.getSetMembers('web-push:uids');
+	const counts = await db.sortedSetsCard(uids.map(uid => `uid:${uid}:web-push:subscriptions`));
+
+	return new Map(uids.map((uid, idx) => [parseInt(uid, 10), counts[idx]]));
+};
+
 Subscriptions.list = async (uids) => {
 	const subscriptions = await db.getSortedSetsMembers(uids.map(uid => `uid:${uid}:web-push:subscriptions`));
 	const response = new Map();
@@ -17,9 +24,16 @@ Subscriptions.list = async (uids) => {
 };
 
 Subscriptions.add = async (uid, subscription) => {
-	await db.sortedSetAdd(`uid:${uid}:web-push:subscriptions`, Date.now(), JSON.stringify(subscription));
+	await Promise.all([
+		db.sortedSetAdd(`uid:${uid}:web-push:subscriptions`, Date.now(), JSON.stringify(subscription)),
+		db.setAdd('web-push:uids', uid),
+	]);
 };
 
 Subscriptions.remove = async (uid, subscription) => {
 	await db.sortedSetRemove(`uid:${uid}:web-push:subscriptions`, JSON.stringify(subscription));
+	const count = await Subscriptions.count(uid);
+	if (count < 1) {
+		db.setRemove('web-push:uids', uid);
+	}
 };

package/library.js

@@ -85,6 +85,18 @@ plugin.addRoutes = async ({ router, middleware, helpers }) => {
 		await subscriptions.remove(req.uid, subscription);
 		helpers.formatApiResponse(200, res);
 	});
+
+	routeHelpers.setupApiRoute(router, 'post', '/web-push/test', middlewares, async (req, res) => {
+		if (!req.uid) {
+			return helpers.notAllowed(req, res);
+		}
+
+		const { subscription } = req.body;
+		await webPush.sendNotification(subscription, JSON.stringify({
+			title: 'Test notification',
+			body: 'This is a test message sent from NodeBB',
+		}));
+	});
 };
 
 plugin.addAdminNavigation = (header) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-web-push",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "A starter kit for quickly creating NodeBB plugins",
   "main": "library.js",
   "repository": {
@@ -34,12 +34,12 @@
     "compatibility": "^4.0.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "19.4.1",
-    "@commitlint/config-angular": "19.4.1",
+    "@commitlint/cli": "19.5.0",
+    "@commitlint/config-angular": "19.5.0",
     "eslint": "8.x",
     "eslint-config-nodebb": "0.2.1",
     "eslint-plugin-import": "2.x",
-    "husky": "9.1.5",
+    "husky": "9.1.6",
     "lint-staged": "15.2.10"
   },
   "dependencies": {

package/plugin.json

@@ -11,9 +11,6 @@
 		{ "hook": "filter:user.profileMenu", "method": "addProfileItem" }
 	],
 	"languages": "public/languages",
-	"scripts": [
-		"public/lib/main.js"
-	],
 	"modules": {
 		"../client/account/web-push.js": "./public/lib/settings.js",
 		"../admin/plugins/web-push.js": "./public/lib/admin.js"

package/public/languages/en-GB/web-push.json

@@ -3,5 +3,9 @@
 	"profile.introduction": "In addition to in-application and email notifications, you may opt-in to receive push notifications as well. This will allow you to be notified even if the app is not open on your device.",
 	"profile.option": "Enable push notifications on this device",
 	"profile.devices": "Currently notifying <strong>%1</strong> device(s).",
-	"profile.permissionBlocked": "Your device is currently disallowing notifications from this site. Please grant the notification permission to continue."
+	"profile.permissionBlocked": "Your device is currently disallowing notifications from this site. Please grant the notification permission to continue.",
+	"profile.send-test": "Send Test Notification",
+
+	"toast.test_success": "Test notification sent.",
+	"toast.test_unavailable": "Cannot send test notification as push notifications are not enabled on this device."
 }

package/public/lib/main.js

@@ -1,3 +1,5 @@
+// this file here as placeholder in case needed. Add back to plugin.json to use
+
 'use strict';
 
 (async () => {

package/public/lib/settings.js

@@ -1,7 +1,9 @@
+/* eslint-disable import/no-unresolved */
+
 'use strict';
 
 import { post, del } from 'api';
-import { success } from 'alerts';
+import { success, warning } from 'alerts';
 
 // eslint-disable-next-line import/prefer-default-export
 export async function init() {
@@ -16,11 +18,15 @@ export async function init() {
 			const action = e.target.getAttribute('data-action');
 
 			switch (action) {
-				// case 'test': {
-				// 	await post('/plugins/ntfy/test');
-				// 	success('[[ntfy:toast.test_success]]');
-				// 	break;
-				// }
+				case 'test': {
+					if (subscription) {
+						await post('/plugins/web-push/test', { subscription });
+						success('[[web-push:toast.test_success]]');
+					} else {
+						warning('[[web-push:toast.test_unavailable]]');
+					}
+					break;
+				}
 
 				case 'toggle': {
 					const countEl = document.querySelector('#deviceCount strong');
@@ -77,7 +83,7 @@ export async function init() {
 function urlBase64ToUint8Array(base64String) {
 	var padding = '='.repeat((4 - (base64String.length % 4)) % 4);
 	var base64 = (base64String + padding)
-		.replace(/\-/g, '+')
+		.replace(/-/g, '+')
 		.replace(/_/g, '/');
 
 	var rawData = window.atob(base64);

package/templates/account/web-push.tpl

@@ -7,11 +7,14 @@
 <div class="alert alert-warning d-none" id="permission-warning">[[web-push:profile.permissionBlocked]]</div>
 
 <form role="form">
-	<div class="form-check form-switch">
+	<div class="form-check form-switch mb-3">
 		<input type="checkbox" class="form-check-input" id="enabled" name="enabled" autocomplete="off" data-action="toggle">
 		<label for="enabled" class="form-check-label">[[web-push:profile.option]]</label>
 		<p class="form-text" id="deviceCount">[[web-push:profile.devices, {count}]]</p>
 	</div>
+	<div class="mb-3">
+		<button type="button" class="btn btn-primary" data-action="test">[[web-push:profile.send-test]]</button>
+	</div>
 </form>
 
 <!-- IMPORT partials/account/footer.tpl -->

package/templates/admin/plugins/web-push.tpl

@@ -5,27 +5,36 @@
 		<div id="spy-container" class="col-12 col-md-8 px-0 mb-4" tabindex="0">
 			<form role="form" class="web-push-settings">
 				<div class="mb-4">
-					<h5 class="fw-bold tracking-tight settings-header">General</h5>
+					<h5 class="fw-bold tracking-tight settings-header">Settings</h5>
 
-					<p class="lead">
-						Adjust these settings. You can then retrieve these settings in code via:
-						<br/><code>await meta.settings.get('web-push');</code>
+					<p class="fst-italic">
+						There are no settings to adjust for this plugin — at this time.
 					</p>
-					<div class="mb-3">
-						<label class="form-label" for="setting-1">Setting 1</label>
-						<input type="text" id="setting-1" name="setting-1" title="Setting 1" class="form-control" placeholder="Setting 1">
-					</div>
-					<div class="mb-3">
-						<label class="form-label" for="setting-2">Setting 2</label>
-						<input type="text" id="setting-2" name="setting-2" title="Setting 2" class="form-control" placeholder="Setting 2">
-					</div>
-
-					<div class="form-check form-switch">
-						<input type="checkbox" class="form-check-input" id="setting-3" name="setting-3">
-						<label for="setting-3" class="form-check-label">Setting 3</label>
-					</div>
 				</div>
 			</form>
+
+			<div class="mb-4">
+				<h5 class="fw-bold tracking-tight settings-header">Users</h5>
+				<table class="table">
+					<thead>
+						<tr>
+							<th>User</th>
+							<th>Devices</th>
+						</tr>
+					</thead>
+					<tbody>
+						{{{ each users }}}
+						<tr>
+							<td>
+								{buildAvatar(users, "24px", false)}
+								{./username}
+							</td>
+							<td>{./deviceCount}</td>
+						</tr>
+						{{{ end }}}
+					</tbody>
+				</table>
+			</div>
 		</div>
 
 		<!-- IMPORT admin/partials/settings/toc.tpl -->