Add button to enable desktop notifications

static/js/pages/user-view.js

@@ -184,5 +184,52 @@
     $scope.showBilling = function() {
       $scope.showBillingCounter++;
     };
+
+
+    $scope.notificationsPermissionsEnabled = Notification
+      && Notification.permission === 'granted'
+      && localStorage.getItem('quay.enabledDesktopNotifications') === 'on';
+
+    $scope.desktopNotificationsPermissionIsDisabled = () => Notification.permission === 'denied';
+
+    $scope.toggleDesktopNotifications = () => {
+      if (!Notification) { // unsupported in IE & some older browsers, we'll just tell the user it's not available
+        bootbox.dialog({
+          "message": 'Desktop Notifications unsupported in this browser',
+          "title": 'Unsupported Option',
+          "buttons": {
+            "close": {
+              "label": "Close",
+              "className": "btn-primary"
+            }
+          }
+        });
+
+        return;
+      }
+
+      if (localStorage.getItem('quay.enabledDesktopNotifications') === 'on') {
+        localStorage.setItem('quay.enabledDesktopNotifications', 'off');
+        localStorage.removeItem('quay.notifications.mostRecentTimestamp');
+        $scope.notificationsPermissionsEnabled = false;
+      } else {
+        if (Notification.permission === 'default') {
+          Notification.requestPermission()
+            .then((newPermission) => {
+              if (newPermission === 'granted') {
+                localStorage.setItem('quay.enabledDesktopNotifications', 'on');
+                $scope.notificationsPermissionsEnabled = true;
+              } else {
+                $scope.notificationsPermissionsEnabled = false;
+              }
+            });
+        } else if (Notification.permission === 'granted') {
+          localStorage.setItem('quay.enabledDesktopNotifications', 'on');
+          localStorage.setItem('quay.notifications.mostRecentTimestamp', new Date().getTime().toString());
+          $scope.notificationsPermissionsEnabled = true;
+        }
+      }
+    };
+
   }
 })();

static/js/services/notification-service.js

@@ -266,6 +266,11 @@ function($rootScope, $interval, UserService, ApiService, StringBuilderService, P
       notificationService.notifications = resp['notifications'];
       notificationService.additionalNotifications = resp['additional'];
       notificationService.notificationClasses = notificationService.getClasses(notificationService.notifications);
+
+      if (notificationService.notifications.length > 0 && localStorage.getItem('quay.enabledDesktopNotifications') === 'on') {
+        console.log(notificationService);
+        notificationService.sendBrowserNotifications();
+      }
     });
 
     if (Features.APP_SPECIFIC_TOKENS) {
@@ -277,6 +282,33 @@ function($rootScope, $interval, UserService, ApiService, StringBuilderService, P
       });
     }
   };
+
+  notificationService.sendBrowserNotifications = () => {
+    let mostRecentTimestamp = parseInt(localStorage.getItem('quay.notifications.mostRecentTimestamp'), 10);
+    if (!mostRecentTimestamp) {
+      mostRecentTimestamp = new Date(notificationService.notifications[0].created).getTime();
+    }
+
+
+    const newNotifications = notificationService.notifications
+      .filter(obj => new Date(obj.created).getTime() > mostRecentTimestamp);
+
+    if (newNotifications.length > 0) {
+      let message = 'You have unread notifications';
+      if (newNotifications.length === 1) {
+        message = notificationService.getMessage(newNotifications[0]);
+      }
+
+      new Notification(message, {
+        icon: 'http://quay.io/static/img/quay-logo.png',
+        image: 'http://quay.io/static/img/quay-logo.png',
+      });
+
+      const newTimestamp = new Date(newNotifications[0].created).getTime();
+      localStorage.setItem('quay.notifications.mostRecentTimestamp', newTimestamp.toString());
+    }
+  };
+
   notificationService.reset = function() {
     $interval.cancel(pollTimerHandle);
     pollTimerHandle = $interval(notificationService.update, 5 * 60 * 1000 /* five minutes */);

static/partials/user-view.html

@@ -170,6 +170,23 @@
                   <a class="co-modify-link" ng-click="showChangeAccount()">Individual account</a>
                 </td>
               </tr>
+              <tr>
+                  <td>Desktop Notifications:</td>
+                  <td>
+                      <span>Enable Desktop Notifications:
+                      <button class=""
+                              ng-disabled="desktopNotificationsPermissionIsDisabled()"
+                              ng-click="toggleDesktopNotifications($event)"
+                              ng-model="notificationsPermissionsEnabled"
+                      >{{ notificationsPermissionsEnabled ? 'enabled' : 'disabled' }}
+                      </button>
+                      </span>
+                      <span class="help-text"
+                            ng-if="desktopNotificationsPermissionIsDisabled()"
+                      >Note: Desktop notifications have been disabled in your browser.
+                      </span>
+                  </td>
+              </tr>
             </table>
           </div>