-
Notifications
You must be signed in to change notification settings - Fork 494
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Browser notifications #284
Changes from 9 commits
2dbc617
b09068a
6ddc6c0
e27b789
ef85243
b965cb2
298bf3a
6dba239
24876ea
e6b93b7
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,13 +3,17 @@ | |
/** | ||
* Main App Controller -- Manage all emails visible in the list | ||
*/ | ||
var refreshTimeout = null | ||
var notificationTimeout = null | ||
|
||
app.controller('MainCtrl', [ | ||
'$scope', '$rootScope', '$http', 'Email', '$route', '$location', 'Favicon', | ||
function ($scope, $rootScope, $http, Email, $route, $location, Favicon) { | ||
$scope.items = [] | ||
$scope.configOpen = false | ||
$scope.currentItemId = null | ||
$scope.notificationsSupported = 'Notification' in window | ||
$scope.webNotifications = window.Notification && window.Notification.permission === 'granted' | ||
$scope.autoShow = false | ||
$scope.unreadItems = 0 | ||
|
||
|
@@ -38,7 +42,6 @@ app.controller('MainCtrl', [ | |
} | ||
}) | ||
|
||
var refreshTimeout = null | ||
$rootScope.$on('newMail', function (e, newEmail) { | ||
// update model | ||
$scope.items.push(newEmail) | ||
|
@@ -54,6 +57,18 @@ app.controller('MainCtrl', [ | |
$scope.$apply() | ||
}, 200) | ||
} | ||
|
||
// show notifications | ||
if (!notificationTimeout && $scope.webNotifications) { | ||
notificationTimeout = setTimeout(function () { | ||
notificationTimeout = null | ||
}, 2000) | ||
new window.Notification('MailDev', { body: newEmail.subject, icon: 'favicon.ico' }) | ||
.addEventListener('click', function () { | ||
$location.path('/email/' + newEmail.id) | ||
$scope.$apply() | ||
}) | ||
} | ||
}) | ||
|
||
$rootScope.$on('deleteMail', function (e, email) { | ||
|
@@ -93,6 +108,27 @@ app.controller('MainCtrl', [ | |
$scope.autoShow = !$scope.autoShow | ||
} | ||
|
||
$scope.enableNotifications = function () { | ||
if (window.Notification && window.Notification.permission === 'granted') { | ||
window.alert('To disable notifications, revoke the permissions in your browser.') | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Instead of this alert, can we instead set There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Interesting, hadn't thought about that. So instead of revoking permissions, you just silence the notifications. Great idea. The silence setting has to be stored preferrably. I as user found it already annoying to toggle the "autoShow" each time. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Thanks for the input - all settings will be persisted after #291 :) |
||
return | ||
} | ||
window.Notification.requestPermission().then(function (permissions) { | ||
$scope.webNotifications = permissions === 'granted' | ||
}).catch(function () { | ||
window.alert('Unable to enable web notifications. See console for more information') | ||
}) | ||
if (!window.isSecureContext && window.console) { | ||
console.info( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'd rather make this more obvious to the user, perhaps using window.alert or a |
||
'Web notifications can only be enabled on websites with https.\n\n' + | ||
'You can enable https for MailDev with self-signed certificate. See `docs/https.md`\n\n' + | ||
'For Firefox you can circumvent this restriction temporarily:\n' + | ||
'In the address bar type `about:config`, and toggle `dom.webnotifications.allowinsecure` \n' + | ||
'Don\'t forget to reset it again after enabling notifications in MailDev' | ||
) | ||
} | ||
} | ||
|
||
// Initialize the view | ||
loadData() | ||
|
||
|
Large diffs are not rendered by default.
Original file line number | Diff line number | Diff line change | ||||||
---|---|---|---|---|---|---|---|---|
@@ -0,0 +1,32 @@ | ||||||||
# HTTPS | ||||||||
By default MailDev will run on the http protocol. For Web Notification support you'll need | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. One can also use web notification support on localhost in most browsers. We should update this copy. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ah. I wasn't aware localhost was the exception. Indeed useful to be added. |
||||||||
to run MailDev on https. This can be done with a self signed certificate. | ||||||||
|
||||||||
## Create certificate | ||||||||
Generate the certificate: | ||||||||
```shell script | ||||||||
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout /etc/ssl/private/maildev.key -out /etc/ssl/certs/maildev.crt | ||||||||
``` | ||||||||
|
||||||||
Answer the FQDN question with your domain name or ip: | ||||||||
```shell script | ||||||||
Common Name (e.g. server FQDN or YOUR name) []: 192.168.1.103 | ||||||||
``` | ||||||||
|
||||||||
Files created: | ||||||||
- /etc/ssl/private/maildev.key | ||||||||
- /etc/ssl/certs/maildev.crt | ||||||||
|
||||||||
## Start MailDev with https | ||||||||
Add the following arguments to your MailDev startup: | ||||||||
```shell script | ||||||||
--https | ||||||||
--https-key /etc/ssl/private/maildev.key | ||||||||
--https-cert /etc/ssl/certs/maildev.crt | ||||||||
``` | ||||||||
|
||||||||
## Open maildev with https | ||||||||
``` | ||||||||
https:\\192.168.1.103:1080 | ||||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||||
``` | ||||||||
As it's a self signed certificate, you need to accept it in your browser. |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -22,6 +22,9 @@ module.exports = function (config) { | |
.version(version) | ||
.option('-s, --smtp <port>', 'SMTP port to catch emails [1025]', '1025') | ||
.option('-w, --web <port>', 'Port to run the Web GUI [1080]', '1080') | ||
.option('--https', 'Switch from http to https protocol') | ||
.option('--https-key <file>', 'The file path to the ssl private key') | ||
.option('--https-cert <file>', 'The file path to the ssl cert file') | ||
.option('--ip <ip address>', 'IP Address to bind SMTP service to', '0.0.0.0') | ||
.option('--outgoing-host <host>', 'SMTP host for outgoing emails') | ||
.option('--outgoing-port <port>', 'SMTP port for outgoing emails') | ||
|
@@ -76,9 +79,15 @@ module.exports = function (config) { | |
} | ||
|
||
if (!config.disableWeb) { | ||
const secure = { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I like this grouping of the options together. Makes me think that |
||
https: config.https, | ||
cert: config.httpsCert, | ||
key: config.httpsKey | ||
} | ||
|
||
// Default to run on same IP as smtp | ||
const webIp = config.webIp ? config.webIp : config.ip | ||
web.start(config.web, webIp, mailserver, config.webUser, config.webPass, config.basePathname) | ||
web.start(config.web, webIp, mailserver, config.webUser, config.webPass, config.basePathname, secure) | ||
|
||
if (config.open) { | ||
const open = require('opn') | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we should give user feedback if it's supported also using
isSecureContext
.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Interesting, what kind of feedback are you thinking of?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I decided to add a
title
attribute on the Notifications toggle now. Also with the new toggle design, Notifications is now greyed out if the browser context does not support it: