rhodecode/templates/admin/my_account/my_account_notifications.html

<template is="dom-bind" id="notificationsPage">
<style include="shared-styles"></style>
<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>

        <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 class="toggle-ajax-spinner"></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';

        if (!("Notification" in window)) {
            browserStatus = 'Not supported'
        }
        else if(Notification.permission === 'denied'){
            browserStatus = 'Denied';
            $('.flash_msg').append('<div class="alert alert-error">Notifications are blocked on browser level - you need to enable them in your browser settings.</div>')
        }
        else if(Notification.permission === 'granted'){
            browserStatus = 'Allowed';
        }

        $('#browser-notification-status').text(browserStatus);
    };

    checkBrowserStatus();

$('#test-notification').on('click', function(e){
    var levels = ['info', 'error', 'warning', 'success'];
    var level = levels[Math.floor(Math.random()*levels.length)];
    var payload = {
        message: {
            message: 'This is a test notification.',
            level: level,
            testMessage: true
        }
    };
    $.Topic('/notifications').publish(payload);
})
</script>
</template>