FEATURE: Add off button on preferences for popup notifications

app/assets/javascripts/discourse/components/desktop-notification-config.js.es6

@@ -0,0 +1,65 @@
+export default Ember.Component.extend({
+  classNames: ['controls'],
+
+  notificationsPermission: function() {
+    if (this.get('isNotSupported')) return '';
+
+    return Notification.permission;
+  }.property(),
+
+  notificationsDisabled: function(_, value) {
+    if (arguments.length > 1) {
+      localStorage.setItem('notifications-disabled', value);
+    }
+    return localStorage.getItem('notifications-disabled');
+  }.property(),
+
+
+  isNotSupported: function() {
+    return !window['Notification'];
+  }.property(),
+
+  isDefaultPermission: function() {
+    if (this.get('isNotSupported')) return false;
+
+    return Notification.permission === "default";
+  }.property('isNotSupported', 'notificationsPermission'),
+
+  isDeniedPermission: function() {
+    if (this.get('isNotSupported')) return false;
+
+    return Notification.permission === "denied";
+  }.property('isNotSupported', 'notificationsPermission'),
+
+  isGrantedPermission: function() {
+    if (this.get('isNotSupported')) return false;
+
+    return Notification.permission === "granted";
+  }.property('isNotSupported', 'notificationsPermission'),
+
+  isEnabled: function() {
+    if (!this.get('isGrantedPermission')) return false;
+
+    return !this.get('notificationsDisabled');
+  }.property('isGrantedPermission', 'notificationsDisabled'),
+
+  actions: {
+    requestPermission() {
+      const self = this;
+      Notification.requestPermission(function() {
+        self.propertyDidChange('notificationsPermission');
+      });
+    },
+    recheckPermission() {
+      this.propertyDidChange('notificationsPermission');
+    },
+    turnoff() {
+      this.set('notificationsDisabled', 'disabled');
+      this.propertyDidChange('notificationsPermission');
+    },
+    turnon() {
+      this.set('notificationsDisabled', '');
+      this.propertyDidChange('notificationsPermission');
+    }
+  }
+});

app/assets/javascripts/discourse/lib/desktop-notifications.js.es6

@@ -94,6 +94,7 @@ function onNotification(data) {
   if (!liveEnabled) { return; }
   if (!primaryTab) { return; }
   if (!isIdle()) { return; }
+  if (localStorage.getItem('notifications-disabled')) { return; }
 
   const notificationTitle = I18n.t(i18nKey(data.notification_type), {
      site_title: Discourse.SiteSettings.title,

app/assets/javascripts/discourse/templates/components/desktop-notification-config.hbs

@@ -0,0 +1,20 @@
+
+{{#if isNotSupported}}
+  {{d-button icon="bell-slash" label="user.desktop_notifications.not_supported" disabled="true"}}
+{{/if}}
+{{#if isDefaultPermission}}
+  {{d-button icon="bell-slash" label="user.desktop_notifications.perm_default" action="requestPermission"}}
+{{/if}}
+{{#if isDeniedPermission}}
+  {{d-button icon="bell-slash" label="user.desktop_notifications.perm_denied_btn" action="recheckPermission"}}
+  {{i18n "user.desktop_notifications.perm_denied_expl"}}
+{{/if}}
+{{#if isGrantedPermission}}
+  {{#if isEnabled}}
+    {{d-button icon="bell-slash-o" label="user.desktop_notifications.disable" action="turnoff"}}
+    {{i18n "user.desktop_notifications.currently_enabled"}}
+  {{else}}
+    {{d-button icon="bell-o" label="user.desktop_notifications.enable" action="turnon"}}
+    {{i18n "user.desktop_notifications.currently_disabled"}}
+  {{/if}}
+{{/if}}

app/assets/javascripts/discourse/templates/user/preferences.hbs

@@ -189,6 +189,12 @@
       </div>
     </div>
 
+    <div class="control-group notifications">
+      <label class="control-label">{{i18n 'user.desktop_notifications.label'}}</label>
+      {{desktop-notification-config}}
+      <div class="instructions">{{i18n 'user.desktop_notifications.each_browser_note'}}</div>
+    </div>
+
     <div class="control-group other">
       <label class="control-label">{{i18n 'user.other_settings'}}</label>
 

config/locales/client.en.yml

@@ -413,6 +413,17 @@ en:
       invited_by: "Invited By"
       trust_level: "Trust Level"
       notifications: "Notifications"
+      desktop_notifications:
+        label: "Desktop Notifications"
+        not_supported: "Notifications are not supported on this browser. Sorry."
+        perm_default: "Turn On Notifications"
+        perm_denied_btn: "Permission Denied"
+        perm_denied_expl: "You have denied permission for notifications. Use your browser to enable notifications, then click the button when done. (Desktop: The leftmost icon in the address bar. Mobile: 'Site Info'.)"
+        disable: "Disable Notifications"
+        currently_enabled: "(currently enabled)"
+        enable: "Enable Notifications"
+        currently_disabled: "(currently disabled)"
+        each_browser_note: "Note: You have to change this setting on every browser you use."
       dismiss_notifications: "Mark all as Read"
       dismiss_notifications_tooltip: "Mark all unread notifications as read"
       disable_jump_reply: "Don't jump to my post after I reply"