diff options
| -rw-r--r-- | src/main/assets/scripts.js | 41 | ||||
| -rw-r--r-- | src/main/resources/templates/views/settings_main.html | 113 |
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 ("Message posted")</p> + <p><input type="checkbox" name="jnotify" value="1" {% if notify_options.repliesEnabled %} checked="checked" + {% endif %} /> Reply notifications ("Message posted")</p> <p><input type="checkbox" name="subscr_notify" value="1" {% if notify_options.subscriptionsEnabled %} - checked="checked" {% endif %}/> Subscriptions notifications ("@user subscribed...")</p> + checked="checked" {% endif %} /> Subscriptions notifications ("@user subscribed...")</p> <p><input type="checkbox" name="recomm" value="1" {% if notify_options.recommendationsEnabled %} - checked="checked" {% endif %}/> Posts recommendations ("Recommended by @user")</p> - <p><input type="hidden" name="page" value="main"/><input type="submit" class="Button" value=" OK "/></p> + checked="checked" {% endif %} /> Posts recommendations ("Recommended by @user")</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> — - <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> — <a href="#" - onclick="alert('To confirm, please send "AUTH {{ auth.getAuthCode() }}" (without quotes) from this account to "juick@juick.com".'); return false;">Confirm</a><br/> + onclick="alert('To confirm, please send "AUTH {{ auth.getAuthCode() }}" (without quotes) from this account to "juick@juick.com".'); 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> </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> — - <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> — - <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> — - <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> — + <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 %} |