diff options
author | Joram Wilander <jwawilander@gmail.com> | 2016-05-19 14:33:04 -0400 |
---|---|---|
committer | Joram Wilander <jwawilander@gmail.com> | 2016-05-19 14:33:04 -0400 |
commit | 1492d1a3cbe551395aab9f6da27c91def62f51cb (patch) | |
tree | 1d1249ef5f66155cea994e44bf5c5a96703d0a1b /webapp | |
parent | fd24902194de00373fa710d5ed138fc1dfeab532 (diff) | |
download | chat-1492d1a3cbe551395aab9f6da27c91def62f51cb.tar.gz chat-1492d1a3cbe551395aab9f6da27c91def62f51cb.tar.bz2 chat-1492d1a3cbe551395aab9f6da27c91def62f51cb.zip |
PLT-2664 Split out push notifications from email notifications (#3049)
* Split out push and email notification logic, always send push notifications on mention
* Add user setting to control push notifications
* Minor changeto simplify code
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/components/user_settings/user_settings_notifications.jsx | 164 | ||||
-rw-r--r-- | webapp/i18n/en.json | 5 |
2 files changed, 159 insertions, 10 deletions
diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx index 6a3f598e2..9d60f27fa 100644 --- a/webapp/components/user_settings/user_settings_notifications.jsx +++ b/webapp/components/user_settings/user_settings_notifications.jsx @@ -30,6 +30,10 @@ function getNotificationsStateFromStores() { if (user.notify_props && user.notify_props.email) { email = user.notify_props.email; } + var push = 'mention'; + if (user.notify_props && user.notify_props.push) { + push = user.notify_props.push; + } var usernameKey = false; var mentionKey = false; @@ -72,9 +76,20 @@ function getNotificationsStateFromStores() { } } - return {notifyLevel: desktop, enableEmail: email, soundNeeded: soundNeeded, enableSound: sound, - usernameKey: usernameKey, mentionKey: mentionKey, customKeys: customKeys, customKeysChecked: customKeys.length > 0, - firstNameKey: firstNameKey, allKey: allKey, channelKey: channelKey}; + return { + notifyLevel: desktop, + notifyPushLevel: push, + enableEmail: email, + soundNeeded, + enableSound: sound, + usernameKey, + mentionKey, + customKeys, + customKeysChecked: customKeys.length > 0, + firstNameKey, + allKey, + channelKey + }; } const holders = defineMessages({ @@ -121,6 +136,7 @@ class NotificationsTab extends React.Component { this.updateChannelKey = this.updateChannelKey.bind(this); this.updateCustomMentionKeys = this.updateCustomMentionKeys.bind(this); this.onCustomChange = this.onCustomChange.bind(this); + this.createPushNotificationSection = this.createPushNotificationSection.bind(this); this.state = getNotificationsStateFromStores(); } @@ -130,6 +146,7 @@ class NotificationsTab extends React.Component { data.email = this.state.enableEmail; data.desktop_sound = this.state.enableSound; data.desktop = this.state.notifyLevel; + data.push = this.state.notifyPushLevel; var mentionKeys = []; if (this.state.usernameKey) { @@ -185,15 +202,21 @@ class NotificationsTab extends React.Component { this.updateState(); } handleNotifyRadio(notifyLevel) { - this.setState({notifyLevel: notifyLevel}); + this.setState({notifyLevel}); + ReactDOM.findDOMNode(this.refs.wrapper).focus(); + } + + handlePushRadio(notifyPushLevel) { + this.setState({notifyPushLevel}); ReactDOM.findDOMNode(this.refs.wrapper).focus(); } + handleEmailRadio(enableEmail) { - this.setState({enableEmail: enableEmail}); + this.setState({enableEmail}); ReactDOM.findDOMNode(this.refs.wrapper).focus(); } handleSoundRadio(enableSound) { - this.setState({enableSound: enableSound}); + this.setState({enableSound}); ReactDOM.findDOMNode(this.refs.wrapper).focus(); } updateUsernameKey(val) { @@ -227,12 +250,126 @@ class NotificationsTab extends React.Component { ReactDOM.findDOMNode(this.refs.customcheck).checked = true; this.updateCustomMentionKeys(); } + createPushNotificationSection() { + var handleUpdateDesktopSection; + if (this.props.activeSection === 'push') { + var notifyActive = [false, false, false]; + if (this.state.notifyPushLevel === 'all') { + notifyActive[0] = true; + } else if (this.state.notifyPushLevel === 'none') { + notifyActive[2] = true; + } else { + notifyActive[1] = true; + } + + let inputs = []; + + inputs.push( + <div key='userNotificationLevelOption'> + <div className='radio'> + <label> + <input + type='radio' + checked={notifyActive[0]} + onChange={this.handlePushRadio.bind(this, 'all')} + /> + <FormattedMessage + id='user.settings.push_notification.allActivity' + defaultMessage='For all activity' + /> + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + checked={notifyActive[1]} + onChange={this.handlePushRadio.bind(this, 'mention')} + /> + <FormattedMessage + id='user.settings.push_notifications.onlyMentions' + defaultMessage='For mentions and direct messages' + /> + </label> + <br/> + </div> + <div className='radio'> + <label> + <input + type='radio' + checked={notifyActive[2]} + onChange={this.handlePushRadio.bind(this, 'none')} + /> + <FormattedMessage + id='user.settings.push_notifications.off' + defaultMessage='Off' + /> + </label> + </div> + </div> + ); + + const extraInfo = ( + <span> + <FormattedMessage + id='user.settings.push_notifications.info' + defaultMessage='Notification alerts are pushed to your mobile device when there is activity in Mattermost.' + /> + </span> + ); + + return ( + <SettingItemMax + title={Utils.localizeMessage('user.settings.notifications.push', 'Mobile push notifications')} + extraInfo={extraInfo} + inputs={inputs} + submit={this.handleSubmit} + server_error={this.state.serverError} + updateSection={this.handleCancel} + /> + ); + } + + let describe = ''; + if (this.state.notifyPushLevel === 'all') { + describe = ( + <FormattedMessage + id='user.settings.push_notification.allActivity' + defaultMessage='For all activity' + /> + ); + } else if (this.state.notifyPushLevel === 'none') { + describe = ( + <FormattedMessage + id='user.settings.push_notifications.off' + defaultMessage='Off' + /> + ); + } else { + describe = ( + <FormattedMessage + id='user.settings.push_notifications.onlyMentions' + defaultMessage='For mentions and direct messages' + /> + ); + } + + handleUpdateDesktopSection = function updateDesktopSection() { + this.props.updateSection('push'); + }.bind(this); + + return ( + <SettingItemMin + title={Utils.localizeMessage('user.settings.notifications.push', 'Mobile push notifications')} + describe={describe} + updateSection={handleUpdateDesktopSection} + /> + ); + } render() { const {formatMessage} = this.props.intl; - var serverError = null; - if (this.state.serverError) { - serverError = this.state.serverError; - } + const serverError = this.state.serverError; var user = this.props.user; @@ -764,6 +901,11 @@ class NotificationsTab extends React.Component { ); } + let pushNotificationSection; + if (global.window.mm_config.SendPushNotifications === 'true') { + pushNotificationSection = this.createPushNotificationSection(); + } + return ( <div> <div className='modal-header'> @@ -809,6 +951,8 @@ class NotificationsTab extends React.Component { <div className='divider-light'/> {emailSection} <div className='divider-light'/> + {pushNotificationSection} + <div className='divider-light'/> {keysSection} <div className='divider-dark'/> </div> diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index e75691663..164d57ae2 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1390,6 +1390,11 @@ "user.settings.modal.notifications": "Notifications", "user.settings.modal.security": "Security", "user.settings.modal.title": "Account Settings", + "user.settings.push_notification.off": "Off", + "user.settings.push_notification.onlyMentions": "For mentions and direct messages", + "user.settings.push_notification.allActivity": "For all activity", + "user.settings.push_notification.info": "Notification alerts are pushed to your mobile device when there is activity in Mattermost.", + "user.settings.notification.push": "Mobile push notifications", "user.settings.notification.allActivity": "For all activity", "user.settings.notification.soundConfig": "Please configure notification sounds in your browser settings", "user.settings.notifications.channelWide": "Channel-wide mentions \"@channel\"", |