From 0cddf98b1f1610781768a241fc1f1f0dc7483166 Mon Sep 17 00:00:00 2001
From: Sam Chow <schow@redhat.com>
Date: Tue, 22 May 2018 17:38:59 -0400
Subject: [PATCH] Change styling and add digest cycle to notifications req
 button

Added confirmation modals to enable/disable notifactions
---
 static/js/pages/user-view.js   | 33 ++++++++++++++++++++++++---------
 static/partials/user-view.html | 19 +++++++++----------
 2 files changed, 33 insertions(+), 19 deletions(-)

diff --git a/static/js/pages/user-view.js b/static/js/pages/user-view.js
index 33b31e74b..d6521d885 100644
--- a/static/js/pages/user-view.js
+++ b/static/js/pages/user-view.js
@@ -209,9 +209,16 @@
       }
 
       if (CookieService.get('quay.enabledDesktopNotifications') === 'on') {
-        CookieService.putPermanent('quay.enabledDesktopNotifications', 'off');
-        CookieService.clear('quay.notifications.mostRecentTimestamp');
-        $scope.notificationsPermissionsEnabled = false;
+        bootbox.confirm('Are you sure you want to turn off browser notifications?', confirmed => {
+          if (confirmed) {
+            CookieService.putPermanent('quay.enabledDesktopNotifications', 'off');
+            CookieService.clear('quay.notifications.mostRecentTimestamp');
+
+            $scope.$apply(() => {
+              $scope.notificationsPermissionsEnabled = false;
+            });
+          }
+        });
       } else {
         if (Notification.permission === 'default') {
           Notification.requestPermission()
@@ -219,15 +226,23 @@
               if (newPermission === 'granted') {
                 CookieService.putPermanent('quay.enabledDesktopNotifications', 'on');
                 CookieService.putPermanent('quay.notifications.mostRecentTimestamp', new Date().getTime().toString());
-                $scope.notificationsPermissionsEnabled = true;
-              } else {
-                $scope.notificationsPermissionsEnabled = false;
               }
+
+              $scope.$apply(() => {
+                  $scope.notificationsPermissionsEnabled = (newPermission === 'granted');
+              });
             });
         } else if (Notification.permission === 'granted') {
-          CookieService.putPermanent('quay.enabledDesktopNotifications', 'on');
-          CookieService.putPermanent('quay.notifications.mostRecentTimestamp', new Date().getTime().toString());
-          $scope.notificationsPermissionsEnabled = true;
+          bootbox.confirm('Are you sure you want to turn on browser notifications?', confirmed => {
+            if (confirmed) {
+              CookieService.putPermanent('quay.enabledDesktopNotifications', 'on');
+              CookieService.putPermanent('quay.notifications.mostRecentTimestamp', new Date().getTime().toString());
+
+              $scope.$apply(() => {
+                $scope.notificationsPermissionsEnabled = true;
+              });
+            }
+          });
         }
       }
     };
diff --git a/static/partials/user-view.html b/static/partials/user-view.html
index 1ced21c45..9d9aaa550 100644
--- a/static/partials/user-view.html
+++ b/static/partials/user-view.html
@@ -173,17 +173,16 @@
               <tr>
                   <td>Desktop Notifications:</td>
                   <td>
-                      <span>Enable Desktop Notifications:
-                      <button class="btn btn-default"
-                              ng-disabled="desktopNotificationsPermissionIsDisabled()"
-                              ng-click="toggleDesktopNotifications()"
-                              ng-model="notificationsPermissionsEnabled"
-                      >{{ notificationsPermissionsEnabled ? 'enabled' : 'disabled' }}
-                      </button>
-                      </span>
+                      <a class="co-modify-link"
+                         ng-if="!desktopNotificationsPermissionIsDisabled()"
+                         ng-disabled="desktopNotificationsPermissionIsDisabled()"
+                         ng-click="toggleDesktopNotifications()"
+                         ng-model="notificationsPermissionsEnabled"
+                      >{{ notificationsPermissionsEnabled ? 'Enabled' : 'Disabled' }}
+                      </a>
                       <span class="help-text"
-                            ng-if="desktopNotificationsPermissionIsDisabled()"
-                      >Note: Desktop notifications have been disabled, or are unavailable, in your browser.
+                            ng-if="desktopNotificationsPermissionIsDisabled()">
+                      Desktop notifications have been disabled, or are unavailable, in your browser.
                       </span>
                   </td>
               </tr>