From: Michael Tremer Date: Sun, 26 Jan 2025 10:28:02 +0000 (+0000) Subject: users: Move JS for push notifications into the main file X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=911bf969f921210bb0fb6a6d68ff37120ad503ea;p=pbs.git users: Move JS for push notifications into the main file Signed-off-by: Michael Tremer --- diff --git a/Makefile.am b/Makefile.am index 3aedefa7..3a3a1b28 100644 --- a/Makefile.am +++ b/Makefile.am @@ -325,11 +325,6 @@ dist_templates_users_messages_DATA = \ templates_users_messagesdir = $(templates_usersdir)/messages -dist_templates_users_modules_DATA = \ - src/templates/users/modules/push-subscribe-button.html - -templates_users_modulesdir = $(templates_usersdir)/modules - # ------------------------------------------------------------------------------ # dist_static_DATA = \ @@ -356,8 +351,7 @@ static_js_DATA = \ src/static/js/jquery.min.js \ src/static/js/job-log-stream.min.js \ src/static/js/notification-worker.min.js \ - src/static/js/pbs.min.js \ - src/static/js/user-push-subscribe-button.min.js + src/static/js/pbs.min.js static_jsdir = $(staticdir)/js @@ -365,8 +359,7 @@ EXTRA_DIST += \ src/static/js/builders-stats.js \ src/static/js/job-log-stream.js \ src/static/js/notification-worker.js \ - src/static/js/pbs.js \ - src/static/js/user-push-subscribe-button.js + src/static/js/pbs.js CLEANFILES += \ $(static_js_DATA) diff --git a/src/static/js/pbs.js b/src/static/js/pbs.js index f368262e..772d1cb2 100644 --- a/src/static/js/pbs.js +++ b/src/static/js/pbs.js @@ -65,3 +65,72 @@ document.addEventListener('keydown', function(e) { closeDropdowns(); } }); + +/* + * Push Subscriptions + * + * Request permission when the button is being clicked + */ + +// Check if the browser supports notifications +$(function() { + // Nothing to do if the browser supports notifications + if ("serviceWorker" in navigator && "PushManager" in window) + return; + + // If not, we will disable the button + $("#push-subscribe-button").prop("disabled", true); +}); + +// Handle button click +$("#push-subscribe-button").on("click", function() { + console.debug("Subscribe button clicked!"); + + // Fetch our application server key + const application_server_key = $(this).data("application-server-key"); + + // Request permission from the user + const request = new Promise(function (resolve, reject) { + const result = Notification.requestPermission(function (result) { + resolve(result); + }); + + if (result) { + result.then(resolve, reject); + } + }).then(function (result) { + if (result !== 'granted') { + throw new Error("We weren't granted permission."); + } + }); + + // Show some activity + $(this).addClass("is-loading"); + + // Register our service worker + var registration = navigator.serviceWorker.register("/static/js/notification-worker.min.js"); + + // Register with the push service + registration = registration.then(function (registration) { + return registration.pushManager.subscribe({ + userVisibleOnly: true, + applicationServerKey: application_server_key, + }); + }) + + // Fetch the PushSubscription + const subscription = registration.then(function (subscription) { + console.debug("Received PushSubscription: ", JSON.stringify(subscription)); + + // Send the PushSubscription to our server + $.post({ + "url" : "/users/push/subscribe", + + // Payload + "contentType" : "application/json", + "data" : JSON.stringify(subscription), + }); + + return subscription; + }); +}); diff --git a/src/static/js/user-push-subscribe-button.js b/src/static/js/user-push-subscribe-button.js deleted file mode 100644 index c17829ca..00000000 --- a/src/static/js/user-push-subscribe-button.js +++ /dev/null @@ -1,67 +0,0 @@ -/* - * Request permission when the button is being clicked - */ - -// Check if the browser supports notifications -$(function() { - // Nothing to do if the browser supports notifications - if ("serviceWorker" in navigator && "PushManager" in window) - return; - - // If not, we will disable the button - $("#push-subscribe-button").prop("disabled", true); -}); - -// Handle button click -$("#push-subscribe-button").on("click", function() { - console.debug("Subscribe button clicked!"); - - // Fetch our application server key - const application_server_key = $(this).data("application-server-key"); - - // Request permission from the user - const request = new Promise(function (resolve, reject) { - const result = Notification.requestPermission(function (result) { - resolve(result); - }); - - if (result) { - result.then(resolve, reject); - } - }).then(function (result) { - if (result !== 'granted') { - throw new Error("We weren't granted permission."); - } - }); - - // Show some activity - $(this).addClass("is-loading"); - - // Register our service worker - var registration = navigator.serviceWorker.register("/static/js/notification-worker.min.js"); - - // Register with the push service - registration = registration.then(function (registration) { - return registration.pushManager.subscribe({ - userVisibleOnly: true, - applicationServerKey: application_server_key, - }); - }) - - // Fetch the PushSubscription - const subscription = registration.then(function (subscription) { - console.debug("Received PushSubscription: ", JSON.stringify(subscription)); - - // Send the PushSubscription to our server - $.post({ - "url" : "/users/push/subscribe", - - // Payload - "contentType" : "application/json", - "data" : JSON.stringify(subscription), - }); - - return subscription; - }); -}); - diff --git a/src/templates/users/macros.html b/src/templates/users/macros.html index 6c5b6db7..72d207c4 100644 --- a/src/templates/users/macros.html +++ b/src/templates/users/macros.html @@ -110,3 +110,13 @@ {% endfor %} {% endmacro %} + +{% macro UserPushSubscribeButton() %} + {# Application Server Key #} + {% set application_server_key = backend.users.get_application_server_key() %} + + +{% endmacro %} diff --git a/src/templates/users/modules/push-subscribe-button.html b/src/templates/users/modules/push-subscribe-button.html deleted file mode 100644 index e0ea53e2..00000000 --- a/src/templates/users/modules/push-subscribe-button.html +++ /dev/null @@ -1,4 +0,0 @@ - diff --git a/src/templates/users/subscribe.html b/src/templates/users/subscribe.html index 60488dce..98f5aecf 100644 --- a/src/templates/users/subscribe.html +++ b/src/templates/users/subscribe.html @@ -1,6 +1,8 @@ -{% extends "../modal.html" %} +{% extends "modal.html" %} -{% block title %}{{ _("Subscribe To Push Notifications") }}{% end block %} +{% from "users/macros.html" import UserPushSubscribeButton with context %} + +{% block title %}{{ _("Subscribe To Push Notifications") }}{% endblock %} {% block breadcrumbs %} -{% end block %} +{% endblock %} {% block modal_title %}

{{ _("Subscribe To Push Notifications") }}

-{% end block %} +{% endblock %} {% block modal %} - {% raw xsrf_form_html() %} + {{ xsrf_form_html() | safe }}

@@ -35,6 +37,6 @@ {# Submit! #}

- {% module UserPushSubscribeButton() %} + {{ UserPushSubscribeButton() }}
-{% end block %} +{% endblock %} diff --git a/src/web/users.py b/src/web/users.py index d42d3c5d..0027e7e7 100644 --- a/src/web/users.py +++ b/src/web/users.py @@ -126,17 +126,3 @@ class PushSubscribeHandler(base.BaseHandler): # Send empty response self.set_status(204) self.finish() - - -#class PushSubscribeButton(ui_modules.UIModule): -# def render(self): -# # Fetch the application server key -# application_server_key = self.backend.users.application_server_key -# -# return self.render_string("users/modules/push-subscribe-button.html", -# application_server_key=application_server_key) -# -# def javascript_files(self): -# return ( -# "js/user-push-subscribe-button.min.js", -# )