// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import SettingItemMin from 'components/setting_item_min.jsx'; import SettingItemMax from 'components/setting_item_max.jsx'; import DesktopNotificationSettings from './desktop_notification_settings.jsx'; import UserStore from 'stores/user_store.jsx'; import Client from 'client/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; import EmailNotificationSetting from './email_notification_setting.jsx'; import {FormattedMessage} from 'react-intl'; function getNotificationsStateFromStores() { const user = UserStore.getCurrentUser(); let desktop = 'default'; let sound = 'true'; let desktopDuration = '5'; let comments = 'never'; let enableEmail = 'true'; let pushActivity = 'mention'; let pushStatus = Constants.UserStatuses.ONLINE; if (user.notify_props) { if (user.notify_props.desktop) { desktop = user.notify_props.desktop; } if (user.notify_props.desktop_sound) { sound = user.notify_props.desktop_sound; } if (user.notify_props.desktop_duration) { desktopDuration = user.notify_props.desktop_duration; } if (user.notify_props.comments) { comments = user.notify_props.comments; } if (user.notify_props.email) { enableEmail = user.notify_props.email; } if (user.notify_props.push) { pushActivity = user.notify_props.push; } if (user.notify_props.push_status) { pushStatus = user.notify_props.push_status; } } let usernameKey = false; let mentionKey = false; let customKeys = ''; let firstNameKey = false; let 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 { desktopActivity: desktop, desktopDuration, enableEmail, pushActivity, pushStatus, desktopSound: sound, usernameKey, mentionKey, customKeys, customKeysChecked: customKeys.length > 0, firstNameKey, channelKey, notifyCommentsLevel: comments }; } import React from 'react'; export default 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.setStateValue = this.setStateValue.bind(this); this.onListenerChange = this.onListenerChange.bind(this); this.handleEmailRadio = this.handleEmailRadio.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.updateState = this.updateState.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.desktopSound; data.desktop = this.state.desktopActivity; data.desktop_duration = this.state.desktopDuration; data.push = this.state.pushActivity; data.push_status = this.state.pushStatus; data.comments = this.state.notifyCommentsLevel; 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(); $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); }, (err) => { this.setState({serverError: err.message}); } ); } handleCancel(e) { e.preventDefault(); this.updateState(); this.props.updateSection(''); $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); } setStateValue(key, value) { const data = {}; data[key] = value; this.setState(data); } 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(); } handleNotifyCommentsRadio(notifyCommentsLevel) { this.setState({notifyCommentsLevel}); this.refs.wrapper.focus(); } handlePushRadio(pushActivity) { this.setState({pushActivity}); this.refs.wrapper.focus(); } handlePushStatusRadio(pushStatus) { this.setState({pushStatus}); this.refs.wrapper.focus(); } handleEmailRadio(enableEmail) { this.setState({enableEmail}); 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 = this.refs.customcheck.checked; if (checked) { var text = 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() { this.refs.customcheck.checked = true; this.updateCustomMentionKeys(); } createPushNotificationSection() { let handleUpdatePushSection; if (this.props.activeSection === 'push') { let inputs = []; let extraInfo = null; let submit = null; if (global.window.mm_config.SendPushNotifications === 'true') { const pushActivityRadio = [false, false, false]; if (this.state.pushActivity === 'all') { pushActivityRadio[0] = true; } else if (this.state.pushActivity === 'none') { pushActivityRadio[2] = true; } else { pushActivityRadio[1] = true; } const pushStatusRadio = [false, false, false]; if (this.state.pushStatus === Constants.UserStatuses.ONLINE) { pushStatusRadio[0] = true; } else if (this.state.pushStatus === Constants.UserStatuses.AWAY) { pushStatusRadio[1] = true; } else { pushStatusRadio[2] = true; } let pushStatusSettings; if (this.state.pushActivity !== 'none') { pushStatusSettings = (



); extraInfo = ( ); } inputs.push(



{pushStatusSettings}
); submit = this.handleSubmit; } else { inputs.push(
); } return ( ); } let describe = ''; if (this.state.pushActivity === 'all') { if (this.state.pushStatus === Constants.UserStatuses.AWAY) { describe = ( ); } else if (this.state.pushStatus === Constants.UserStatuses.OFFLINE) { describe = ( ); } else { describe = ( ); } } else if (this.state.pushActivity === 'none') { describe = ( ); } else if (global.window.mm_config.SendPushNotifications === 'false') { describe = ( ); } else { if (this.state.pushStatus === Constants.UserStatuses.AWAY) { //eslint-disable-line no-lonely-if describe = ( ); } else if (this.state.pushStatus === Constants.UserStatuses.OFFLINE) { describe = ( ); } else { describe = ( ); } } handleUpdatePushSection = function updateDesktopSection() { this.props.updateSection('push'); }.bind(this); return ( ); } render() { const serverError = this.state.serverError; const user = this.props.user; 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 = ( ); } var commentsSection; var handleUpdateCommentsSection; if (this.props.activeSection === 'comments') { var commentsActive = [false, false, false]; if (this.state.notifyCommentsLevel === 'never') { commentsActive[2] = true; } else if (this.state.notifyCommentsLevel === 'root') { commentsActive[1] = true; } else { commentsActive[0] = true; } let inputs = []; inputs.push(


); const extraInfo = ( ); commentsSection = ( ); } else { let describe = ''; if (this.state.notifyCommentsLevel === 'never') { describe = ( ); } else if (this.state.notifyCommentsLevel === 'root') { describe = ( ); } else { describe = ( ); } handleUpdateCommentsSection = function updateCommentsSection() { this.props.updateSection('comments'); }.bind(this); commentsSection = ( ); } const pushNotificationSection = this.createPushNotificationSection(); return (

{pushNotificationSection}
{keysSection}
{commentsSection}
); } } NotificationsTab.defaultProps = { user: null, activeSection: '', activeTab: '' }; NotificationsTab.propTypes = { 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 };