notifications: replace toggle button with actual toggle element - fixes #4171

rhodecode/controllers/admin/my_account.py

@@ -368,4 +368,4 b' class MyAccountController(BaseController'
         user_data['notification_status'] = not status
         user.user_data = user_data
         Session().commit()
-        return redirect(url('my_account_notifications'))
+        return json.dumps(user_data['notification_status'])

rhodecode/public/js/src/components/shared-components.html

@@ -2,3 +2,5 b''
 <link rel="import" href="../../../../../bower_components/paper-toast/paper-toast.html">
 <link rel="import" href="../../../../../bower_components/paper-tooltip/paper-tooltip.html">
 <link rel="import" href="../../../../../bower_components/paper-button/paper-button.html">
+<link rel="import" href="../../../../../bower_components/paper-spinner/paper-spinner.html">
+<link rel="import" href="../../../../../bower_components/iron-ajax/iron-ajax.html">

rhodecode/templates/admin/my_account/my_account_notifications.html

@@ -1,26 +1,65 b''
+<template is="dom-bind" id="notificationsPage">
+
+<iron-ajax id="toggleNotifications"
+           method="post"
+           url="${url('my_account_notifications_toggle_visibility')}"
+           content-type="application/json"
+           loading="{{changeNotificationsLoading}}"
+           on-response="handleNotifications"
+           handle-as="json"></iron-ajax>
+
 <div class="panel panel-default">
   <div class="panel-heading">
     <h3 class="panel-title">${_('Your live notification settings')}</h3>
   </div>
-
     <div class="panel-body">
 
         <p><strong>IMPORTANT:</strong> This feature requires enabled channelstream websocket server to function correctly.</p>
 
         <p class="hidden">Status of browser notifications permission: <strong id="browser-notification-status"></strong></p>
 
-            ${h.secure_form(url('my_account_notifications_toggle_visibility'), method='post', id='notification-status')}
-            <button class="btn btn-default" type="submit">
-                ${_('Notifications')} <strong>${_('Enabled') if c.rhodecode_user.get_instance().user_data.get('notification_status') else _('Disabled')}</strong>
-            </button>
-            ${h.end_form()}
-
+        <div class="form">
+            <!-- fields -->
+            <div class="fields">
+                <div class="field">
+                    <div class="label">
+                        <label for="new_email">${_('Notifications status')}:</label>
+                    </div>
+                    <div class="checkboxes">
+                        <div style="display: inline-block">
+                        <paper-toggle-button on-change="toggleNotifications"  ${'checked' if c.rhodecode_user.get_instance().user_data.get('notification_status') else ''}></paper-toggle-button>
+                        <paper-tooltip>Toggle your notifications on/off globally.</paper-tooltip>
+                        </div>
+                        <template is="dom-if" if="{{changeNotificationsLoading}}">
+                        <paper-spinner active style="height: 22px; width: 22px"></paper-spinner>
+                        </template>
+                    </div>
+                </div>
+                <div class="buttons">
         <a class="btn btn-info" id="test-notification">Test notification</a>
+                </div>
+            </div>
+        </div>
 
     </div>
 </div>
 
 <script type="application/javascript">
+    /** because im not creating a custom element for this page
+     * we need to push the function onto the dom-template
+     * ideally we turn this into notification-settings elements
+     * then it will be cleaner
+     */
+    var ctrlr = $('#notificationsPage')[0];
+    ctrlr.toggleNotifications = function(event){
+        var ajax = $('#toggleNotifications')[0];
+        ajax.headers = {"X-CSRF-Token": CSRF_TOKEN}
+        ajax.body = {notification_status:event.target.active};
+        ajax.generateRequest();
+    };
+    ctrlr.handleNotifications = function(event){
+        $('paper-toggle-button')[0].active = event.detail.response;
+    };
 
     function checkBrowserStatus(){
         var browserStatus = 'Unknown';
@@ -54,3 +93,4 b''
     $.Topic('/notifications').publish(payload);
 })
 </script>
+</template>