Display new replies as browser notifications

2 files changed, 103 insertions, 51 deletions

diff --git a/src/main/assets/scripts.js b/src/main/assets/scripts.js
index 13f0cb75..73ca80df 100644
--- a/src/main/assets/scripts.js
+++ b/src/main/assets/scripts.js
@@ -57,7 +57,10 @@ const translations = {
         'loginDialog.facebook': 'Login with Facebook',
         'loginDialog.vk': 'Login with VK',
         'loginDialog.email': 'Registration',
-        'error.error': 'Error'
+        'error.error': 'Error',
+        'settings.notifications.granted': 'Enabled',
+        'settings.notifications.denied': 'Denied',
+        'settings.notifications.request': 'Enable',
     },
     'ru': {
         'message.inReplyTo': 'в ответ на',
@@ -82,7 +85,10 @@ const translations = {
         'loginDialog.facebook': 'Войти через Facebook',
         'loginDialog.vk': 'Войти через ВКонтакте',
         'loginDialog.email': 'Регистрация',
-        'error.error': 'Ошибка'
+        'error.error': 'Ошибка',
+        'settings.notifications.granted': 'Подключено',
+        'settings.notifications.denied': 'Запрещено',
+        'settings.notifications.request': 'Подключить',
     }
 };
 /* eslint-enable only-ascii/only-ascii */
@@ -189,6 +195,11 @@ function wsIncomingReply(msg) {
     document.getElementById('replies').appendChild(li);
 
     updateRepliesCounter();
+    var notify = new Notification(msg.user.uname, {
+        body: `${msg.replyQuote}\n${msg.body}`,
+        icon: msg.user.avatar
+    });
+    notify.onerror = console.log;
 }
 
 function newReply(e) {
@@ -531,6 +542,24 @@ function fetchUserUri(dataUri, callback) {
     }
 }
 
+function notificationsCheckPermissions(button) {
+    console.log(Notification.permission);
+    switch (Notification.permission.toLowerCase()) {
+        case 'granted':
+            button.innerHTML = `${i18n('settings.notifications.granted')}`;
+            button.disabled = true;
+            break;
+
+        case 'denied':
+            button.innerHTML = `${i18n('settings.notifications.denied')}`;
+            button.disabled = true;
+            break;
+
+        case 'default':
+            button.innerHTML = `${i18n('settings.notifications.request')}`;
+    }
+}
+
 /******************************************************************************/
 
 function ready(fn) {
@@ -771,6 +800,12 @@ ready(() => {
             es.close();
         }
     });
-
     embedAll();
+    const button = document.getElementById('notifications_toggle');
+    if (button) {
+        button.addEventListener('click', () => {
+            Notification.requestPermission(function(result) { notificationsCheckPermissions(button); });
+        });
+        notificationsCheckPermissions(button);
+    }
 });
diff --git a/src/main/resources/templates/views/settings_main.html b/src/main/resources/templates/views/settings_main.html
index 0c0853f5..8f3873a0 100644
--- a/src/main/resources/templates/views/settings_main.html
+++ b/src/main/resources/templates/views/settings_main.html
@@ -1,30 +1,36 @@
 {% extends "layouts/default" %}
 {% block content %}
 <article>
-    <h1>Настройки</h1>
+    <h1>Settings</h1>
     {%if not visitor.verified %}
     <h2 style="color: red; padding: 20px;">Verify your account by adding email or social account</h2>
     {% endif %}
+    <fieldset>
+        <legend>Browser notifications</legend>
+        <button class="Button" id="notifications_toggle">...</button>
+    </fieldset>
     <form action="/settings" method="POST">
         <fieldset>
             <legend>Notification options</legend>
-            <p><input type="checkbox" name="jnotify" value="1" {% if notify_options.repliesEnabled %}
-                      checked="checked" {% endif %}/> Reply notifications (&quot;Message posted&quot;)</p>
+            <p><input type="checkbox" name="jnotify" value="1" {% if notify_options.repliesEnabled %} checked="checked"
+                    {% endif %} /> Reply notifications (&quot;Message posted&quot;)</p>
             <p><input type="checkbox" name="subscr_notify" value="1" {% if notify_options.subscriptionsEnabled %}
-                      checked="checked" {% endif %}/> Subscriptions notifications (&quot;@user subscribed...&quot;)</p>
+                    checked="checked" {% endif %} /> Subscriptions notifications (&quot;@user subscribed...&quot;)</p>
             <p><input type="checkbox" name="recomm" value="1" {% if notify_options.recommendationsEnabled %}
-                      checked="checked" {% endif %}/> Posts recommendations (&quot;Recommended by @user&quot;)</p>
-            <p><input type="hidden" name="page" value="main"/><input type="submit" class="Button" value="  OK  "/></p>
+                    checked="checked" {% endif %} /> Posts recommendations (&quot;Recommended by @user&quot;)</p>
+            <p><input type="hidden" name="page" value="main" /><input type="submit" class="Button" value="  OK  " /></p>
         </fieldset>
     </form>
     <fieldset>
-        <legend style="background: url(/durov.png) no-repeat; padding-left: 58px; line-height: 48px; background-size: contain;">
+        <legend
+            style="background: url(/durov.png) no-repeat; padding-left: 58px; line-height: 48px; background-size: contain;">
             Telegram</legend>
         {% if telegram_name is not empty %}
         <form action="/settings" method="POST">
             <div>Telegram: <b>{{ telegram_name }}</b> &mdash;
-                <input type="hidden" name="page" value="telegram-del"/>
-                <input type="submit" value="  Disable  " {% if not beans.userServiceImpl.canDeleteTelegramUser(visitor) %}disabled="disabled"{% endif %} class="Button" />
+                <input type="hidden" name="page" value="telegram-del" />
+                <input type="submit" value="  Disable  " {% if not beans.userServiceImpl.canDeleteTelegramUser(visitor)
+                    %}disabled="disabled" {% endif %} class="Button" />
             </div>
         </form>
         {% else %}
@@ -35,37 +41,41 @@
     {% if jids | length > 0 %}
     <form action="/settings" method="POST">
         <fieldset>
-            <legend style="background: url(//static.juick.com/settings/xmpp.png) no-repeat; padding-left: 58px; line-height: 48px;">
+            <legend
+                style="background: url(//static.juick.com/settings/xmpp.png) no-repeat; padding-left: 58px; line-height: 48px;">
                 XMPP accounts
             </legend>
             <p>Your accounts:</p>
             <p>
                 {% for jid in jids %}
-                <label><input type="radio" name="delete" value="xmpp;{{ jid }}">{{ jid }}</label><br/>
+                <label><input type="radio" name="delete" value="xmpp;{{ jid }}">{{ jid }}</label><br />
                 {% endfor %}
                 {% for auth in auths %}
-                <label><input type="radio" name="delete"
-                              value="xmpp-unauth;{{ auth.account }}">{{ auth.account }}</label>
+                <label><input type="radio" name="delete" value="xmpp-unauth;{{ auth.account }}">{{ auth.account
+                    }}</label>
                 &mdash; <a href="#"
-                           onclick="alert('To confirm, please send &quot;AUTH {{ auth.getAuthCode() }}&quot; (without quotes) from this account to &quot;juick@juick.com&quot;.'); return false;">Confirm</a><br/>
+                    onclick="alert('To confirm, please send &quot;AUTH {{ auth.getAuthCode() }}&quot; (without quotes) from this account to &quot;juick@juick.com&quot;.'); return false;">Confirm</a><br />
                 {% endfor %}
             </p>
             {% if jids | length > 1 %}
-            <p><input type="hidden" name="page" value="jid-del"/><input type="submit" class="Button" value="  Delete  "/></p>
+            <p><input type="hidden" name="page" value="jid-del" /><input type="submit" class="Button"
+                    value="  Delete  " /></p>
             {% endif %}
-            <p>To add new jabber account: send any text message to <a href="xmpp:juick@juick.com?message;body=login">juick@juick.com</a>
+            <p>To add new jabber account: send any text message to <a
+                    href="xmpp:juick@juick.com?message;body=login">juick@juick.com</a>
             </p>
         </fieldset>
     </form>
     {% endif %}
     <fieldset>
-        <legend style="background: url(//static.juick.com/settings/email.png) no-repeat; padding-left: 58px; line-height: 48px;">
+        <legend
+            style="background: url(//static.juick.com/settings/email.png) no-repeat; padding-left: 58px; line-height: 48px;">
             E-mail
         </legend>
         <form action="/settings" method="POST">
-            <p>Add account:<br/>
-                <input type="text" name="account"/>
-                <input type="hidden" name="page" value="email-add"/>
+            <p>Add account:<br />
+                <input type="text" name="account" />
+                <input type="hidden" name="page" value="email-add" />
                 <input type="submit" value="  Add  " class="Button" />
             </p>
         </form>
@@ -73,40 +83,45 @@
             <p>Your accounts:</p>
             <p>
                 {% for email in emails %}
-                <label><input type="radio" name="account" value="{{ email }}">{{ email }}</label><br/>
+                <label><input type="radio" name="account" value="{{ email }}">{{ email }}</label><br />
                 {% endfor %}
                 {% if emails is empty %}
-                - </p>
+                -
+            </p>
             {% else %}
             </p>
             {% if jids | length > 1 %}
-            <p><input type="hidden" name="page" value="email-del"/><input type="submit" class="Button" value="  Delete  "/></p>
+            <p><input type="hidden" name="page" value="email-del" /><input type="submit" class="Button"
+                    value="  Delete  " /></p>
             {% endif %}
             {% endif %}
         </form>
         {% if emails is not empty %}
         <!--email_off-->
         <form action="/settings" method="POST">
-            <p>You can receive notifications to email:<br/>
+            <p>You can receive notifications to email:<br />
                 Sent to <select name="account">
                     <option value="">Disabled</option>
                     {% for email in emails %}
-                    <option value="{{ email }}" {% if email_active == email %} selected="selected" {% endif %}>
+                    <option value="{{ email }}" {% if email_active==email %} selected="selected" {% endif %}>
                         {{ email }}
                     </option>
                     {% endfor %}
                 </select>
-                <input type="hidden" name="page" value="email-subscr"/>
-                <input type="submit" class="Button" value="OK"/></p>
+                <input type="hidden" name="page" value="email-subscr" />
+                <input type="submit" class="Button" value="OK" />
+            </p>
         </form>
         <!--/email_off-->
         {% endif %}
         <p>&nbsp;</p>
         <p>You can post to Juick via e-mail. Send your <span style="text-decoration: underline;">plain text</span>
-            messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or video file.</p>
+            messages to <span><a href="mailto:juick@juick.com">juick@juick.com</a></span>. You can attach one photo or
+            video file.</p>
     </fieldset>
     <fieldset>
-        <legend style="background: url(//static.juick.com/settings/facebook.png) no-repeat; padding-left: 58px; line-height: 48px;">
+        <legend
+            style="background: url(//static.juick.com/settings/facebook.png) no-repeat; padding-left: 58px; line-height: 48px;">
             Facebook
         </legend>
         {% if fbstatus.connected %}
@@ -114,41 +129,43 @@
         <form action="/settings" method="POST">
             <div>
                 Facebook: <b>Enabled</b> &mdash;
-                <input type="hidden" name="page" value="facebook-disable"/>
-                <input type="submit" class="Button" value="  Disable  "/>
+                <input type="hidden" name="page" value="facebook-disable" />
+                <input type="submit" class="Button" value="  Disable  " />
             </div>
         </form>
         {% else %}
         <form action="/settings" method="POST">
             <div>
                 Facebook: <b>Disabled</b> &mdash;
-                <input type="hidden" name="page" value="facebook-enable"/>
-                <input type="submit" class="Button" value="  Enable  "/>
+                <input type="hidden" name="page" value="facebook-enable" />
+                <input type="submit" class="Button" value="  Enable  " />
             </div>
         </form>
         {% endif %}
         {% else %}
-        <p>Cross-posting to Facebook: <a href="/_fblogin"><img src="//static.juick.com/facebook-connect.png" alt="Connect to Facebook"/></a></p>
+        <p>Cross-posting to Facebook: <a href="/_fblogin"><img src="//static.juick.com/facebook-connect.png"
+                    alt="Connect to Facebook" /></a></p>
         {% endif %}
     </fieldset>
     <fieldset>
-    <legend style="background: url(//static.juick.com/settings/twitter.png) no-repeat; padding-left: 58px; line-height: 48px;">
-        Twitter</legend>
-    {% if twitter_name is not empty %}
-    <form action="/settings" method="POST">
-        <div>Twitter: <b>{{ twitter_name }}</b> &mdash;
-            <input type="hidden" name="page" value="twitter-del"/>
-            <input type="submit" class="Button" value="  Disable  "/>
-        </div>
-    </form>
-    {% else %}
-    <p>Cross-posting to Twitter: <a href="/_twitter"><img src="//static.juick.com/twitter-connect.png"
-                                                          alt="Connect to Twitter"/></a></p>
-    {% endif %}
+        <legend
+            style="background: url(//static.juick.com/settings/twitter.png) no-repeat; padding-left: 58px; line-height: 48px;">
+            Twitter</legend>
+        {% if twitter_name is not empty %}
+        <form action="/settings" method="POST">
+            <div>Twitter: <b>{{ twitter_name }}</b> &mdash;
+                <input type="hidden" name="page" value="twitter-del" />
+                <input type="submit" class="Button" value="  Disable  " />
+            </div>
+        </form>
+        {% else %}
+        <p>Cross-posting to Twitter: <a href="/_twitter"><img src="//static.juick.com/twitter-connect.png"
+                    alt="Connect to Twitter" /></a></p>
+        {% endif %}
     </fieldset>
 
 </article>
 {% endblock %}
 {% block "column" %}
 {% include "views/partial/settings_tabs" %}
-{% endblock %}
\ No newline at end of file
+{% endblock %}