diff options
| -rw-r--r-- | webapp/components/confirm_modal.jsx | 16 | ||||
| -rw-r--r-- | webapp/components/create_post.jsx | 82 | ||||
| -rwxr-xr-x | webapp/i18n/en.json | 3 | ||||
| -rw-r--r-- | webapp/utils/constants.jsx | 1 |
4 files changed, 93 insertions, 9 deletions
diff --git a/webapp/components/confirm_modal.jsx b/webapp/components/confirm_modal.jsx index d6803499a..94f27a3e2 100644 --- a/webapp/components/confirm_modal.jsx +++ b/webapp/components/confirm_modal.jsx @@ -16,11 +16,23 @@ export default class ConfirmModal extends React.Component { } componentDidMount() { - document.addEventListener('keypress', this.handleKeypress); + if (this.props.show) { + document.addEventListener('keypress', this.handleKeypress); + } } componentWillUnmount() { - document.removeEventListener('keypress', this.handleKeypress); + if (!this.props.show) { + document.removeEventListener('keypress', this.handleKeypress); + } + } + + componentWillReceiveProps(nextProps) { + if (this.props.show && !nextProps.show) { + document.removeEventListener('keypress', this.handleKeypress); + } else if (!this.props.show && nextProps.show) { + document.addEventListener('keypress', this.handleKeypress); + } } handleKeypress(e) { diff --git a/webapp/components/create_post.jsx b/webapp/components/create_post.jsx index 59c12e059..dab1d9735 100644 --- a/webapp/components/create_post.jsx +++ b/webapp/components/create_post.jsx @@ -23,10 +23,11 @@ import PostStore from 'stores/post_store.jsx'; import MessageHistoryStore from 'stores/message_history_store.jsx'; import UserStore from 'stores/user_store.jsx'; import PreferenceStore from 'stores/preference_store.jsx'; +import ConfirmModal from './confirm_modal.jsx'; import Constants from 'utils/constants.jsx'; -import {FormattedHTMLMessage} from 'react-intl'; +import {FormattedHTMLMessage, FormattedMessage} from 'react-intl'; import {browserHistory} from 'react-router/es6'; const Preferences = Constants.Preferences; @@ -45,6 +46,7 @@ export default class CreatePost extends React.Component { this.lastTime = 0; + this.doSubmit = this.doSubmit.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.postMsgKeyPress = this.postMsgKeyPress.bind(this); this.handleChange = this.handleChange.bind(this); @@ -68,12 +70,19 @@ export default class CreatePost extends React.Component { this.handleEmojiPickerClick = this.handleEmojiPickerClick.bind(this); this.handlePostError = this.handlePostError.bind(this); this.closeEmoji = this.closeEmoji.bind(this); + this.hideNotifyAllModal = this.hideNotifyAllModal.bind(this); + this.showNotifyAllModal = this.showNotifyAllModal.bind(this); + this.handleNotifyModalCancel = this.handleNotifyModalCancel.bind(this); + this.handleNotifyAllConfirmation = this.handleNotifyAllConfirmation.bind(this); PostStore.clearDraftUploads(); const channelId = ChannelStore.getCurrentId(); const draft = PostStore.getPostDraft(channelId); + const stats = ChannelStore.getCurrentStats(); + const members = stats.member_count - 1; + this.state = { channelId, message: draft.message, @@ -86,7 +95,9 @@ export default class CreatePost extends React.Component { showPostDeletedModal: false, enableSendButton: false, showEmojiPicker: false, - emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW) + emojiPickerEnabled: Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMOJI_PICKER_PREVIEW), + showConfirmModal: false, + totalMembers: members }; this.lastBlurAt = 0; @@ -108,13 +119,9 @@ export default class CreatePost extends React.Component { } } - handleSubmit(e) { + doSubmit(e) { e.preventDefault(); - if (this.state.uploadsInProgress.length > 0 || this.state.submitting) { - return; - } - const post = {}; post.file_ids = []; post.message = this.state.message; @@ -193,6 +200,35 @@ export default class CreatePost extends React.Component { this.focusTextbox(forceFocus); } + handleNotifyAllConfirmation(e) { + this.hideNotifyAllModal(); + this.doSubmit(e); + } + + hideNotifyAllModal() { + this.setState({showConfirmModal: false}); + } + + showNotifyAllModal() { + this.setState({showConfirmModal: true}); + } + + handleSubmit(e) { + const stats = ChannelStore.getCurrentStats(); + const members = stats.member_count - 1; + + if ((this.state.message.includes('@all') || this.state.message.includes('@channel')) && members >= Constants.NOTIFY_ALL_MEMBERS) { + this.setState({totalMembers: members}); + this.showNotifyAllModal(); + return; + } + this.doSubmit(e); + } + + handleNotifyModalCancel() { + this.setState({showConfirmModal: false}); + } + sendMessage(post) { post.channel_id = this.state.channelId; post.file_ids = this.state.fileInfos.map((info) => info.id); @@ -574,6 +610,30 @@ export default class CreatePost extends React.Component { } render() { + const notifyAllTitle = ( + <FormattedMessage + id='notify_all.title.confirm' + defaultMessage='Confirm sending notifications to entire channel' + /> + ); + + const notifyAllConfirm = ( + <FormattedMessage + id='notify_all.confirm' + defaultMessage='Confirm' + /> + ); + + const notifyAllMessage = ( + <FormattedMessage + id='notify_all.question' + defaultMessage='By using @all or @channel you are about to send notifications to {totalMembers} people. Are you sure you want to do this?' + values={{ + totalMembers: this.state.totalMembers + }} + /> + ); + let serverError = null; if (this.state.serverError) { serverError = ( @@ -699,6 +759,14 @@ export default class CreatePost extends React.Component { show={this.state.showPostDeletedModal} onHide={this.hidePostDeletedModal} /> + <ConfirmModal + title={notifyAllTitle} + message={notifyAllMessage} + confirmButton={notifyAllConfirm} + show={this.state.showConfirmModal} + onConfirm={this.handleNotifyAllConfirmation} + onCancel={this.handleNotifyModalCancel} + /> </form> ); } diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 20fef3c47..41f830ac8 100755 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -1257,6 +1257,9 @@ "delete_post.warning": "This post has {count} comment(s) on it.", "edit_channel_header.editHeader": "Edit the Channel Header...", "edit_channel_header.previewHeader": "Edit header", + "notify_all.title.confirm": "Confirm sending notifications to entire channel", + "notify_all.question": "By using @all or @channel you are about to send notifications to {totalMembers} people. Are you sure you want to do this?", + "notify_all.confirm": "Confirm", "edit_channel_header_modal.cancel": "Cancel", "edit_channel_header_modal.description": "Edit the text appearing next to the channel name in the channel header.", "edit_channel_header_modal.error": "This channel header is too long, please enter a shorter one", diff --git a/webapp/utils/constants.jsx b/webapp/utils/constants.jsx index 8ab3fc15e..2beb7c019 100644 --- a/webapp/utils/constants.jsx +++ b/webapp/utils/constants.jsx @@ -337,6 +337,7 @@ export const Constants = { }, SPECIAL_MENTIONS: ['all', 'channel', 'here'], + NOTIFY_ALL_MEMBERS: 5, CHARACTER_LIMIT: 4000, IMAGE_TYPES: ['jpg', 'gif', 'bmp', 'png', 'jpeg'], AUDIO_TYPES: ['mp3', 'wav', 'wma', 'm4a', 'flac', 'aac', 'ogg'], |