Push Notifications (Mobile and PC) (#13277)

* Update manifest and add service worker
cleanup icons a bit

* Push notifications WIP

* navigate working

* cleanup

* acknowledge wired up

* Set VAPID keys on composer install

* Component to control notification permissions.

* Allow all user option to validate

* Enable on browser load if transport exists.

* Check for transport before showing user permissions
translations

* Documentation

* style fixes

* access via the attribute model

* fix alerting test

* update schema

* cleanup subscription on disable

* non-configurable db and table for webpush subscriptions (respect system connection)

* revert AlertTransport change
hopefully phpstan can figure it out

* phpstan fixes

* Support custom details display

* Match transport names to brand's preferred display

* less duplicate id errors

* Tests are done in Laravel code now so
remove legacy function usage... could be better, but ok

* Style fixes

* Style fixes 2

* Fix alert test

* Doc updates requires HTTPS and GMP

* unregister subscription when permission is set to denied

* cleanup after user deletion

* delete the right thing

* fix whitespace

* update install docs to include php-gmp

* suggest ext-gmp

* update javascript

* Update functions.php

Co-authored-by: Jellyfrog <Jellyfrog@users.noreply.github.com>

resources/lang/en/components.php

@@ -0,0 +1,12 @@
+<?php
+
+return [
+    'notification-subscription-status' => [
+        'no-support' => 'This browser does not support notifications',
+        'no-transport' => 'To enable browser notifications, there must be an alert transport referencing this user',
+        'enabled' => 'Notifications enabled for this browser',
+        'disabled' => 'Notifications disabled for this browser',
+        'enable' => 'Enable',
+        'disable' => 'Disable',
+    ],
+];

resources/views/alerts/modals/ack.blade.php

@@ -55,11 +55,9 @@
         var ack_until_clear = $("#ack_until_clear").bootstrapSwitch('state');
         $.ajax({
             type: "POST",
-            url: "ajax_form.php",
+            url: '{{ route('alert.ack', ['alert' => ':alert_id']) }}'.replace(':alert_id', ack_alert_id),
             dataType: "json",
             data: {
-                type: "ack-alert",
-                alert_id: ack_alert_id,
                 state: ack_alert_state,
                 ack_msg: ack_alert_note,
                 ack_until_clear: ack_until_clear

resources/views/components/notification-subscription-status.blade.php

@@ -0,0 +1,64 @@
+<div<div x-data="notificationSubscriptionStatus()">
+    <div x-show="! supported">@lang('components.notification-subscription-status.no-support')</div>
+    @if($userHasTransport)
+    <div x-show="supported">
+        <div>
+            <span x-text="enabled ? '@lang('components.notification-subscription-status.enabled')' : '@lang('components.notification-subscription-status.disabled')'"></span>
+            <button x-on:click="toggle()" type="button" class="tw-float-right tw-border tw-border-gray-500 tw-text-gray-500 hover:tw-bg-gray-500 hover:tw-text-gray-100 tw-rounded tw-px-4 tw-py-2" x-text="enabled ? '@lang('components.notification-subscription-status.disable')' : '@lang('components.notification-subscription-status.enable')'"></button>
+        </div>
+    </div>
+    @else
+    <div x-show="supported">
+        @admin
+            <a href="{{ url('alert-transports') }}">
+                @lang('components.notification-subscription-status.no-transport')
+            </a>
+        @else
+            @lang('components.notification-subscription-status.no-transport')
+        @endadmin
+    </div>
+    @endif
+    <script>
+        function notificationSubscriptionStatus() {
+            return {
+                supported: 'Notification' in window,
+                enabled: 'Notification' in window && Notification.permission === 'granted' && localStorage.getItem('notifications') !== 'disabled',
+                toggle() {
+                    if (this.enabled) {
+                        localStorage.setItem('notifications', 'disabled');
+                        this.enabled = false;
+                        navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
+                            serviceWorkerRegistration.pushManager.getSubscription()
+                                .then(function(subscription) {
+                                    if (subscription) {
+                                        subscription.unsubscribe().then(function(success) {
+                                            if (success) {
+                                                fetch('./push/unregister', {
+                                                    method: 'post',
+                                                    headers: {
+                                                        'Content-Type': 'application/json',
+                                                        'X-CSRF-Token': '{{ csrf_token() }}'
+                                                    },
+                                                    body: JSON.stringify({
+                                                        endpoint: subscription.endpoint
+                                                    }),
+                                                });
+                                            }
+                                        })
+                                    }
+                                })
+                        })
+                    } else if (Notification.permission === 'granted') {
+                        localStorage.setItem('notifications', 'enabled');
+                        this.enabled = true;
+                    } else {
+                        Notification.requestPermission().then((permission) => {
+                            localStorage.setItem('notifications', 'enabled');
+                            this.enabled = permission === 'granted';
+                        });
+                    }
+                }
+            }
+        }
+    </script>
+</di</div>

resources/views/layouts/librenmsv1.blade.php

@@ -75,17 +75,7 @@
         });
         var ajax_url = "{{ url('/ajax') }}";
     </script>
-    <script src="{{ asset('js/librenms.js?ver=05072021') }}"></script>
-    <script type="text/javascript">
-        <!-- Begin
-        function popUp(URL)
-        {
-            day = new Date();
-            id = day.getTime();
-            eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=550,height=600');");
-        }
-        // End -->
-    </script>
+    <script src="{{ asset('js/librenms.js?ver=09072021') }}"></script>
     <script type="text/javascript" src="{{ asset('js/overlib_mini.js') }}"></script>
     <script type="text/javascript" src="{{ asset('js/toastr.min.js?ver=05072021') }}"></script>
     <script type="text/javascript" src="{{ asset('js/boot.js') }}"></script>
@@ -97,6 +87,9 @@
             document.documentElement.classList.remove('tw-dark')
         }
     </script>
+    @auth
+        <script src="{{ asset('js/register-service-worker.js') }}" defer></script>
+    @endauth
     @yield('javascript')
 </head>
 <body>

resources/views/layouts/menu.blade.php

@@ -748,4 +748,14 @@
             }
         });
     }
+
+    @if($browser_push)
+        if (localStorage.getItem('notifications') !== 'disabled') {
+            Notification.requestPermission().then(function (permission) {
+                if (permission === "denied") {
+                    localStorage.setItem('notifications', 'disabled');
+                }
+            });
+        }
+    @endif
 </script>

resources/views/user/preferences.blade.php

@@ -18,6 +18,10 @@
         </div>
     @endif
 
+    <x-panel title="{{ __('Push Notifications') }}">
+        <x-notification-subscription-status></x-notification-subscription-status>
+    </x-panel>
+
     @if($can_change_password)
     <x-panel title="{{ __('Change Password') }}">
         <form method="POST" action="{{ route('users.update', [$user->user_id]) }}" class="form-horizontal" role="form">