// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import ReactDOM from 'react-dom'; import SettingItemMin from '../setting_item_min.jsx'; import SettingItemMax from '../setting_item_max.jsx'; import UserStore from 'stores/user_store.jsx'; import Client from 'utils/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; function getNotificationsStateFromStores() { var user = UserStore.getCurrentUser(); var soundNeeded = !Utils.isBrowserFirefox(); var sound = 'true'; if (user.notify_props && user.notify_props.desktop_sound) { sound = user.notify_props.desktop_sound; } var desktop = 'default'; if (user.notify_props && user.notify_props.desktop) { desktop = user.notify_props.desktop; } var email = 'true'; 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; var customKeys = ''; var firstNameKey = false; var channelKey = false; if (user.notify_props) { if (user.notify_props.mention_keys) { var keys = user.notify_props.mention_keys.split(','); if (keys.indexOf(user.username) === -1) { usernameKey = false; } else { usernameKey = true; keys.splice(keys.indexOf(user.username), 1); } if (keys.indexOf('@' + user.username) === -1) { mentionKey = false; } else { mentionKey = true; keys.splice(keys.indexOf('@' + user.username), 1); } customKeys = keys.join(','); } if (user.notify_props.first_name) { firstNameKey = user.notify_props.first_name === 'true'; } if (user.notify_props.channel) { channelKey = user.notify_props.channel === 'true'; } } return { notifyLevel: desktop, notifyPushLevel: push, enableEmail: email, soundNeeded, enableSound: sound, usernameKey, mentionKey, customKeys, customKeysChecked: customKeys.length > 0, firstNameKey, channelKey }; } const holders = defineMessages({ desktop: { id: 'user.settings.notifications.desktop', defaultMessage: 'Send desktop notifications' }, desktopSounds: { id: 'user.settings.notifications.desktopSounds', defaultMessage: 'Desktop notification sounds' }, emailNotifications: { id: 'user.settings.notifications.emailNotifications', defaultMessage: 'Email notifications' }, wordsTrigger: { id: 'user.settings.notifications.wordsTrigger', defaultMessage: 'Words that trigger mentions' }, close: { id: 'user.settings.notifications.close', defaultMessage: 'Close' } }); import React from 'react'; class NotificationsTab extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.handleCancel = this.handleCancel.bind(this); this.updateSection = this.updateSection.bind(this); this.updateState = this.updateState.bind(this); this.onListenerChange = this.onListenerChange.bind(this); this.handleNotifyRadio = this.handleNotifyRadio.bind(this); this.handleEmailRadio = this.handleEmailRadio.bind(this); this.handleSoundRadio = this.handleSoundRadio.bind(this); this.updateUsernameKey = this.updateUsernameKey.bind(this); this.updateMentionKey = this.updateMentionKey.bind(this); this.updateFirstNameKey = this.updateFirstNameKey.bind(this); 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(); } handleSubmit() { var data = {}; data.user_id = this.props.user.id; 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) { mentionKeys.push(this.props.user.username); } if (this.state.mentionKey) { mentionKeys.push('@' + this.props.user.username); } var stringKeys = mentionKeys.join(','); if (this.state.customKeys.length > 0 && this.state.customKeysChecked) { stringKeys += ',' + this.state.customKeys; } data.mention_keys = stringKeys; data.first_name = this.state.firstNameKey.toString(); data.channel = this.state.channelKey.toString(); Client.updateUserNotifyProps(data, () => { this.props.updateSection(''); AsyncClient.getMe(); }, (err) => { this.setState({serverError: err.message}); } ); } handleCancel(e) { this.updateState(); this.props.updateSection(''); e.preventDefault(); $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); } updateSection(section) { this.updateState(); this.props.updateSection(section); } updateState() { const newState = getNotificationsStateFromStores(); if (!Utils.areObjectsEqual(newState, this.state)) { this.setState(newState); } } componentDidMount() { UserStore.addChangeListener(this.onListenerChange); } componentWillUnmount() { UserStore.removeChangeListener(this.onListenerChange); } onListenerChange() { this.updateState(); } handleNotifyRadio(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}); ReactDOM.findDOMNode(this.refs.wrapper).focus(); } handleSoundRadio(enableSound) { this.setState({enableSound}); ReactDOM.findDOMNode(this.refs.wrapper).focus(); } updateUsernameKey(val) { this.setState({usernameKey: val}); } updateMentionKey(val) { this.setState({mentionKey: val}); } updateFirstNameKey(val) { this.setState({firstNameKey: val}); } updateChannelKey(val) { this.setState({channelKey: val}); } updateCustomMentionKeys() { var checked = ReactDOM.findDOMNode(this.refs.customcheck).checked; if (checked) { var text = ReactDOM.findDOMNode(this.refs.custommentions).value; // remove all spaces and split string into individual keys this.setState({customKeys: text.replace(/ /g, ''), customKeysChecked: true}); } else { this.setState({customKeys: '', customKeysChecked: false}); } } onCustomChange() { 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 = []; let extraInfo = null; let submit = null; if (global.window.mm_config.SendPushNotifications === 'true') { inputs.push(


); extraInfo = ( ); submit = this.handleSubmit; } else { inputs.push(
); } return ( ); } let describe = ''; if (this.state.notifyPushLevel === 'all') { describe = ( ); } else if (this.state.notifyPushLevel === 'none') { describe = ( ); } else if (global.window.mm_config.SendPushNotifications === 'false') { describe = ( ); } else { describe = ( ); } handleUpdateDesktopSection = function updateDesktopSection() { this.props.updateSection('push'); }.bind(this); return ( ); } render() { const {formatMessage} = this.props.intl; const serverError = this.state.serverError; var user = this.props.user; var desktopSection; var handleUpdateDesktopSection; if (this.props.activeSection === 'desktop') { var notifyActive = [false, false, false]; if (this.state.notifyLevel === 'mention') { notifyActive[1] = true; } else if (this.state.notifyLevel === 'none') { notifyActive[2] = true; } else { notifyActive[0] = true; } let inputs = []; inputs.push(


); const extraInfo = ( ); desktopSection = ( ); } else { let describe = ''; if (this.state.notifyLevel === 'mention') { describe = ( ); } else if (this.state.notifyLevel === 'none') { describe = ( ); } else { describe = ( ); } handleUpdateDesktopSection = function updateDesktopSection() { this.props.updateSection('desktop'); }.bind(this); desktopSection = ( ); } var soundSection; var handleUpdateSoundSection; if (this.props.activeSection === 'sound' && this.state.soundNeeded) { var soundActive = [false, false]; if (this.state.enableSound === 'false') { soundActive[1] = true; } else { soundActive[0] = true; } let inputs = []; inputs.push(


); const extraInfo = ( ); soundSection = ( ); } else { let describe = ''; if (!this.state.soundNeeded) { describe = ( ); } else if (this.state.enableSound === 'false') { describe = ( ); } else { describe = ( ); } handleUpdateSoundSection = function updateSoundSection() { this.props.updateSection('sound'); }.bind(this); soundSection = ( ); } var emailSection; var handleUpdateEmailSection; if (this.props.activeSection === 'email') { var emailActive = [false, false]; if (this.state.enableEmail === 'false') { emailActive[1] = true; } else { emailActive[0] = true; } let inputs = []; inputs.push(



); emailSection = ( ); } else { let describe = ''; if (this.state.enableEmail === 'false') { describe = ( ); } else { describe = ( ); } handleUpdateEmailSection = function updateEmailSection() { this.props.updateSection('email'); }.bind(this); emailSection = ( ); } var keysSection; var handleUpdateKeysSection; if (this.props.activeSection === 'keys') { let inputs = []; let handleUpdateFirstNameKey; let handleUpdateUsernameKey; let handleUpdateMentionKey; let handleUpdateChannelKey; if (user.first_name) { handleUpdateFirstNameKey = function handleFirstNameKeyChange(e) { this.updateFirstNameKey(e.target.checked); }.bind(this); inputs.push(
); } handleUpdateUsernameKey = function handleUsernameKeyChange(e) { this.updateUsernameKey(e.target.checked); }.bind(this); inputs.push(
); handleUpdateMentionKey = function handleMentionKeyChange(e) { this.updateMentionKey(e.target.checked); }.bind(this); inputs.push(
); handleUpdateChannelKey = function handleChannelKeyChange(e) { this.updateChannelKey(e.target.checked); }.bind(this); inputs.push(
); inputs.push(
); keysSection = ( ); } else { let keys = []; if (this.state.firstNameKey) { keys.push(user.first_name); } if (this.state.usernameKey) { keys.push(user.username); } if (this.state.mentionKey) { keys.push('@' + user.username); } if (this.state.channelKey) { keys.push('@channel'); keys.push('@all'); } if (this.state.customKeys.length > 0) { keys = keys.concat(this.state.customKeys.split(',')); } let describe = ''; for (var i = 0; i < keys.length; i++) { if (keys[i] !== '') { describe += '"' + keys[i] + '", '; } } if (describe.length > 0) { describe = describe.substring(0, describe.length - 2); } else { describe = ( ); } handleUpdateKeysSection = function updateKeysSection() { this.props.updateSection('keys'); }.bind(this); keysSection = ( ); } const pushNotificationSection = this.createPushNotificationSection(); return (

{desktopSection}
{soundSection}
{emailSection}
{pushNotificationSection}
{keysSection}
); } } NotificationsTab.defaultProps = { user: null, activeSection: '', activeTab: '' }; NotificationsTab.propTypes = { intl: intlShape.isRequired, user: React.PropTypes.object, updateSection: React.PropTypes.func, updateTab: React.PropTypes.func, activeSection: React.PropTypes.string, activeTab: React.PropTypes.string, closeModal: React.PropTypes.func.isRequired, collapseModal: React.PropTypes.func.isRequired }; export default injectIntl(NotificationsTab);