diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/access_history_modal.jsx | 10 | ||||
-rw-r--r-- | web/react/components/activity_log_modal.jsx | 8 | ||||
-rw-r--r-- | web/react/components/channel_header.jsx | 36 | ||||
-rw-r--r-- | web/react/components/channel_info_modal.jsx | 111 | ||||
-rw-r--r-- | web/react/components/channel_notifications_modal.jsx (renamed from web/react/components/channel_notifications.jsx) | 108 | ||||
-rw-r--r-- | web/react/components/delete_channel_modal.jsx | 116 | ||||
-rw-r--r-- | web/react/components/navbar.jsx | 38 | ||||
-rw-r--r-- | web/react/components/toggle_modal_button.jsx | 62 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_modal.jsx | 21 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_security.jsx | 48 |
10 files changed, 254 insertions, 304 deletions
diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx index ab5686720..65b80dfb7 100644 --- a/web/react/components/access_history_modal.jsx +++ b/web/react/components/access_history_modal.jsx @@ -14,8 +14,8 @@ export default class AccessHistoryModal extends React.Component { this.onAuditChange = this.onAuditChange.bind(this); this.handleMoreInfo = this.handleMoreInfo.bind(this); - this.onHide = this.onHide.bind(this); this.onShow = this.onShow.bind(this); + this.onHide = this.onHide.bind(this); this.formatAuditInfo = this.formatAuditInfo.bind(this); this.handleRevokedSession = this.handleRevokedSession.bind(this); @@ -39,10 +39,14 @@ export default class AccessHistoryModal extends React.Component { } onHide() { this.setState({moreInfo: []}); - this.props.onModalDismissed(); + this.props.onHide(); } componentDidMount() { UserStore.addAuditsChangeListener(this.onAuditChange); + + if (this.props.show) { + this.onShow(); + } } componentDidUpdate(prevProps) { if (this.props.show && !prevProps.show) { @@ -406,5 +410,5 @@ export default class AccessHistoryModal extends React.Component { AccessHistoryModal.propTypes = { show: React.PropTypes.bool.isRequired, - onModalDismissed: React.PropTypes.func.isRequired + onHide: React.PropTypes.func.isRequired }; diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index af423a601..5824ce7e2 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -58,10 +58,14 @@ export default class ActivityLogModal extends React.Component { } onHide() { this.setState({moreInfo: []}); - this.props.onModalDismissed(); + this.props.onHide(); } componentDidMount() { UserStore.addSessionsChangeListener(this.onListenerChange); + + if (this.props.show) { + this.onShow(); + } } componentDidUpdate(prevProps) { if (this.props.show && !prevProps.show) { @@ -178,5 +182,5 @@ export default class ActivityLogModal extends React.Component { ActivityLogModal.propTypes = { show: React.PropTypes.bool.isRequired, - onModalDismissed: React.PropTypes.func.isRequired + onHide: React.PropTypes.func.isRequired }; diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 79c7f90a9..ffe7cbb5d 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -5,8 +5,12 @@ const NavbarSearchBox = require('./search_bar.jsx'); const MessageWrapper = require('./message_wrapper.jsx'); const PopoverListMembers = require('./popover_list_members.jsx'); const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx'); +const ChannelInfoModal = require('./channel_info_modal.jsx'); const ChannelInviteModal = require('./channel_invite_modal.jsx'); const ChannelMembersModal = require('./channel_members_modal.jsx'); +const ChannelNotificationsModal = require('./channel_notifications_modal.jsx'); +const DeleteChannelModal = require('./delete_channel_modal.jsx'); +const ToggleModalButton = require('./toggle_modal_button.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); const UserStore = require('../stores/user_store.jsx'); @@ -180,15 +184,13 @@ export default class ChannelHeader extends React.Component { key='view_info' role='presentation' > - <a + <ToggleModalButton role='menuitem' - data-toggle='modal' - data-target='#channel_info' - data-channelid={channel.id} - href='#' + dialogType={ChannelInfoModal} + dialogProps={{channel}} > {'View Info'} - </a> + </ToggleModalButton> </li> ); @@ -263,16 +265,13 @@ export default class ChannelHeader extends React.Component { key='notification_preferences' role='presentation' > - <a + <ToggleModalButton role='menuitem' - href='#' - data-toggle='modal' - data-target='#channel_notifications' - data-title={channel.display_name} - data-channelid={channel.id} + dialogType={ChannelNotificationsModal} + dialogProps={{channel}} > {'Notification Preferences'} - </a> + </ToggleModalButton> </li> ); @@ -302,16 +301,13 @@ export default class ChannelHeader extends React.Component { key='delete_channel' role='presentation' > - <a + <ToggleModalButton role='menuitem' - href='#' - data-toggle='modal' - data-target='#delete_channel' - data-title={channel.display_name} - data-channelid={channel.id} + dialogType={DeleteChannelModal} + dialogProps={{channel}} > {'Delete '}{channelTerm}{'...'} - </a> + </ToggleModalButton> </li> ); } diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx index bccd8d0b9..18e125de3 100644 --- a/web/react/components/channel_info_modal.jsx +++ b/web/react/components/channel_info_modal.jsx @@ -1,88 +1,57 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -var ChannelStore = require('../stores/channel_store.jsx'); - -export default class CommandList extends React.Component { - constructor(props) { - super(props); - - this.state = { - channel_id: ChannelStore.getCurrentId() - }; - } - - componentDidMount() { - var self = this; - if (this.refs.modal) { - $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', function show(e) { - var button = e.relatedTarget; - self.setState({channel_id: $(button).attr('data-channelid')}); - }); - } - } +const Modal = ReactBootstrap.Modal; +export default class ChannelInfoModal extends React.Component { render() { - var channel = ChannelStore.get(this.state.channel_id); - + let channel = this.props.channel; if (!channel) { - channel = {}; - channel.display_name = 'No Channel Found'; - channel.name = 'No Channel Found'; - channel.id = 'No Channel Found'; + channel = { + display_name: 'No Channel Found', + name: 'No Channel Found', + id: 'No Channel Found' + }; } return ( - <div - className='modal fade' - ref='modal' - id='channel_info' - tabIndex='-1' - role='dialog' - aria-hidden='true' + <Modal + show={this.props.show} + onHide={this.props.onHide} > - <div className='modal-dialog'> - <div className='modal-content'> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' - aria-label='Close' - > - <span aria-hidden='true'>×</span> - </button> - <h4 - className='modal-title' - id='myModalLabel' - > - <span className='name'>{channel.display_name}</span> - </h4> - </div> - <div className='modal-body'> - <div className='row form-group'> - <div className='col-sm-3 info__label'>Channel Name: </div> + <Modal.Header closeButtton={true}> + {channel.display_name} + </Modal.Header> + <Modal.Body ref='modalBody'> + <div className='row form-group'> + <div className='col-sm-3 info__label'>{'Channel Name:'}</div> <div className='col-sm-9'>{channel.display_name}</div> - </div> - <div className='row form-group'> - <div className='col-sm-3 info__label'>Channel Handle:</div> + </div> + <div className='row form-group'> + <div className='col-sm-3 info__label'>{'Channel Handle:'}</div> <div className='col-sm-9'>{channel.name}</div> - </div> - <div className='row'> - <div className='col-sm-3 info__label'>Channel ID:</div> - <div className='col-sm-9'>{channel.id}</div> - </div> </div> - <div className='modal-footer'> - <button - type='button' - className='btn btn-default' - data-dismiss='modal' - >Close</button> + <div className='row'> + <div className='col-sm-3 info__label'>{'Channel ID:'}</div> + <div className='col-sm-9'>{channel.id}</div> </div> - </div> - </div> - </div> + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.props.onHide} + > + {'Close'} + </button> + </Modal.Footer> + </Modal> ); } } + +ChannelInfoModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired, + channel: React.PropTypes.object.isRequired +}; diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications_modal.jsx index f57fc12c5..c8bd1c2dc 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications_modal.jsx @@ -1,15 +1,15 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. +var Modal = ReactBootstrap.Modal; var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); -var Utils = require('../utils/utils.jsx'); var Client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); var ChannelStore = require('../stores/channel_store.jsx'); -export default class ChannelNotifications extends React.Component { +export default class ChannelNotificationsModal extends React.Component { constructor(props) { super(props); @@ -23,35 +23,17 @@ export default class ChannelNotifications extends React.Component { this.handleSubmitMarkUnreadLevel = this.handleSubmitMarkUnreadLevel.bind(this); this.handleUpdateMarkUnreadLevel = this.handleUpdateMarkUnreadLevel.bind(this); this.createMarkUnreadLevelSection = this.createMarkUnreadLevelSection.bind(this); - this.onShow = this.onShow.bind(this); + const member = ChannelStore.getMember(props.channel.id); this.state = { - notifyLevel: '', - markUnreadLevel: '', - title: '', + notifyLevel: member.notify_props.desktop, + markUnreadLevel: member.notify_props.mark_unread, channelId: '', activeSection: '' }; } - onShow(e) { - var button = e.relatedTarget; - var channelId = button.getAttribute('data-channelid'); - - const member = ChannelStore.getMember(channelId); - var notifyLevel = member.notify_props.desktop; - var markUnreadLevel = member.notify_props.mark_unread; - - this.setState({ - notifyLevel, - markUnreadLevel, - title: button.getAttribute('data-title'), - channelId - }); - } componentDidMount() { ChannelStore.addChangeListener(this.onListenerChange); - - $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow); } componentWillUnmount() { ChannelStore.removeChangeListener(this.onListenerChange); @@ -62,15 +44,12 @@ export default class ChannelNotifications extends React.Component { } const member = ChannelStore.getMember(this.state.channelId); - var notifyLevel = member.notify_props.desktop; - var markUnreadLevel = member.notify_props.mark_unread; - var newState = this.state; - newState.notifyLevel = notifyLevel; - newState.markUnreadLevel = markUnreadLevel; - - if (!Utils.areObjectsEqual(this.state, newState)) { - this.setState(newState); + if (member.notify_props.desktop !== this.state.notifyLevel || member.notify_props.mark_unread !== this.state.mark_unread) { + this.setState({ + notifyLevel: member.notify_props.desktop, + markUnreadLevel: member.notify_props.mark_unread + }); } } updateSection(section) { @@ -104,7 +83,6 @@ export default class ChannelNotifications extends React.Component { } handleUpdateNotifyLevel(notifyLevel) { this.setState({notifyLevel}); - ReactDOM.findDOMNode(this.refs.modal).focus(); } createNotifyLevelSection(serverError) { var handleUpdateSection; @@ -262,7 +240,6 @@ export default class ChannelNotifications extends React.Component { handleUpdateMarkUnreadLevel(markUnreadLevel) { this.setState({markUnreadLevel}); - ReactDOM.findDOMNode(this.refs.modal).focus(); } createMarkUnreadLevelSection(serverError) { @@ -347,48 +324,39 @@ export default class ChannelNotifications extends React.Component { } return ( - <div - className='modal fade' - id='channel_notifications' - ref='modal' - tabIndex='-1' - role='dialog' - aria-hidden='true' + <Modal + show={this.props.show} + dialogClassName='settings-modal' + onHide={this.props.onHide} > - <div className='modal-dialog settings-modal'> - <div className='modal-content'> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' + <Modal.Header closeButton={true}> + {'Notification Preferences for '}<span className='name'>{this.props.channel.display_name}</span> + </Modal.Header> + <Modal.Body> + <div className='settings-table'> + <div className='settings-content'> + <div + ref='wrapper' + className='user-settings' > - <span aria-hidden='true'>×</span> - <span className='sr-only'>{'Close'}</span> - </button> - <h4 className='modal-title'>Notification Preferences for <span className='name'>{this.state.title}</span></h4> - </div> - <div className='modal-body'> - <div className='settings-table'> - <div className='settings-content'> - <div - ref='wrapper' - className='user-settings' - > - <br/> - <div className='divider-dark first'/> - {this.createNotifyLevelSection(serverError)} - <div className='divider-light'/> - {this.createMarkUnreadLevelSection(serverError)} - <div className='divider-dark'/> - </div> + <br/> + <div className='divider-dark first'/> + {this.createNotifyLevelSection(serverError)} + <div className='divider-light'/> + {this.createMarkUnreadLevelSection(serverError)} + <div className='divider-dark'/> </div> - </div> - {serverError} </div> </div> - </div> - </div> + {serverError} + </Modal.Body> + </Modal> ); } } + +ChannelNotificationsModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired, + channel: React.PropTypes.object.isRequired +}; diff --git a/web/react/components/delete_channel_modal.jsx b/web/react/components/delete_channel_modal.jsx index b7d633b38..271f21c3a 100644 --- a/web/react/components/delete_channel_modal.jsx +++ b/web/react/components/delete_channel_modal.jsx @@ -1,102 +1,72 @@ // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. -const Client = require('../utils/client.jsx'); const AsyncClient = require('../utils/async_client.jsx'); -const ChannelStore = require('../stores/channel_store.jsx'); -var TeamStore = require('../stores/team_store.jsx'); +const Client = require('../utils/client.jsx'); +const Modal = ReactBootstrap.Modal; +const TeamStore = require('../stores/team_store.jsx'); +const Utils = require('../utils/utils.jsx'); export default class DeleteChannelModal extends React.Component { constructor(props) { super(props); this.handleDelete = this.handleDelete.bind(this); - this.onShow = this.onShow.bind(this); - - this.state = { - title: '', - channelId: '' - }; } + handleDelete() { - if (this.state.channelId.length !== 26) { + if (this.props.channel.id.length !== 26) { return; } - Client.deleteChannel(this.state.channelId, - function handleDeleteSuccess() { + Client.deleteChannel( + this.props.channel.id, + () => { AsyncClient.getChannels(true); window.location.href = TeamStore.getCurrentTeamUrl() + '/channels/town-square'; }, - function handleDeleteError(err) { + (err) => { AsyncClient.dispatchError(err, 'handleDelete'); } ); } - onShow(e) { - var button = $(e.relatedTarget); - this.setState({ - title: button.attr('data-title'), - channelId: button.attr('data-channelid') - }); - } - componentDidMount() { - $(ReactDOM.findDOMNode(this.refs.modal)).on('show.bs.modal', this.onShow); - } + render() { - const channel = ChannelStore.getCurrent(); - let channelType = 'channel'; - if (channel && channel.type === 'P') { - channelType = 'private group'; - } + const channelTerm = Utils.getChannelTerm(this.props.channel.type).toLowerCase(); return ( - <div - className='modal fade' - ref='modal' - id='delete_channel' - role='dialog' - tabIndex='-1' - aria-hidden='true' + <Modal + show={this.props.show} + onHide={this.props.onHide} > - <div className='modal-dialog'> - <div className='modal-content'> - <div className='modal-header'> - <button - type='button' - className='close' - data-dismiss='modal' - aria-label='Close' - > - <span aria-hidden='true'>×</span> - </button> - <h4 className='modal-title'>Confirm DELETE Channel</h4> - </div> - <div className='modal-body'> - <p> - Are you sure you wish to delete the {this.state.title} {channelType}? - </p> - </div> - <div className='modal-footer'> - <button - type='button' - className='btn btn-default' - data-dismiss='modal' - > - Cancel - </button> - <button - type='button' - className='btn btn-danger' - data-dismiss='modal' - onClick={this.handleDelete} - > - Delete - </button> - </div> - </div> - </div> - </div> + <Modal.Header closeButton={true}>{'Confirm DELETE Channel'}</Modal.Header> + <Modal.Body> + {`Are you sure you wish to delete the ${this.props.channel.display_name} ${channelTerm}?`} + </Modal.Body> + <Modal.Footer> + <button + type='button' + className='btn btn-default' + onClick={this.props.onHide} + > + {'Cancel'} + </button> + <button + type='button' + className='btn btn-danger' + data-dismiss='modal' + onClick={this.handleDelete} + > + {'Delete'} + </button> + </Modal.Footer> + </Modal> ); } } + +DeleteChannelModal.propTypes = { + show: React.PropTypes.bool.isRequired, + onHide: React.PropTypes.func.isRequired, + channel: React.PropTypes.object.isRequired +}; diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 7ad1f9305..1fcfabccd 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -5,7 +5,11 @@ const EditChannelPurposeModal = require('./edit_channel_purpose_modal.jsx'); const MessageWrapper = require('./message_wrapper.jsx'); const NotifyCounts = require('./notify_counts.jsx'); const ChannelMembersModal = require('./channel_members_modal.jsx'); +const ChannelInfoModal = require('./channel_info_modal.jsx'); const ChannelInviteModal = require('./channel_invite_modal.jsx'); +const ChannelNotificationsModal = require('./channel_notifications_modal.jsx'); +const DeleteChannelModal = require('./delete_channel_modal.jsx'); +const ToggleModalButton = require('./toggle_modal_button.jsx'); const UserStore = require('../stores/user_store.jsx'); const ChannelStore = require('../stores/channel_store.jsx'); @@ -104,15 +108,13 @@ export default class Navbar extends React.Component { if (channel) { var viewInfoOption = ( <li role='presentation'> - <a + <ToggleModalButton role='menuitem' - data-toggle='modal' - data-target='#channel_info' - data-channelid={channel.id} - href='#' + dialogType={ChannelInfoModal} + dialogProps={{channel}} > {'View Info'} - </a> + </ToggleModalButton> </li> ); @@ -194,16 +196,13 @@ export default class Navbar extends React.Component { deleteChannelOption = ( <li role='presentation'> - <a + <ToggleModalButton role='menuitem' - href='#' - data-toggle='modal' - data-target='#delete_channel' - data-title={channel.display_name} - data-channelid={channel.id} + dialogType={DeleteChannelModal} + dialogProps={{channel}} > {'Delete Channel...'} - </a> + </ToggleModalButton> </li> ); } @@ -229,16 +228,13 @@ export default class Navbar extends React.Component { if (!isDirect) { notificationPreferenceOption = ( <li role='presentation'> - <a + <ToggleModalButton role='menuitem' - href='#' - data-toggle='modal' - data-target='#channel_notifications' - data-title={channel.display_name} - data-channelid={channel.id} + dialogType={ChannelNotificationsModal} + dialogProps={{channel}} > - {'Notification Preferences'} - </a> + {'Notification Preferences'} + </ToggleModalButton> </li> ); } diff --git a/web/react/components/toggle_modal_button.jsx b/web/react/components/toggle_modal_button.jsx new file mode 100644 index 000000000..51c8d1f20 --- /dev/null +++ b/web/react/components/toggle_modal_button.jsx @@ -0,0 +1,62 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +export default class ModalToggleButton extends React.Component { + constructor(props) { + super(props); + + this.show = this.show.bind(this); + this.hide = this.hide.bind(this); + + this.state = { + show: false + }; + } + + show() { + this.setState({show: true}); + } + + hide() { + this.setState({show: false}); + } + + render() { + const {children, dialogType, dialogProps, ...props} = this.props; + + // this assumes that all modals will have a show property and an onHide event + const dialog = React.createElement(this.props.dialogType, Object.assign({}, dialogProps, { + show: this.state.show, + onHide: () => { + this.hide(); + + if (dialogProps.onHide) { + dialogProps.onHide(); + } + } + })); + + // nesting the dialog in the anchor tag looks like it shouldn't work, but it does due to how react-bootstrap + // renders modals at the top level of the DOM instead of where you specify in the virtual DOM + return ( + <a + {...props} + href='#' + onClick={this.show} + > + {children} + {dialog} + </a> + ); + } +} + +ModalToggleButton.propTypes = { + children: React.PropTypes.node.isRequired, + dialogType: React.PropTypes.func.isRequired, + dialogProps: React.PropTypes.object +}; + +ModalToggleButton.defaultProps = { + dialogProps: {} +}; diff --git a/web/react/components/user_settings/user_settings_modal.jsx b/web/react/components/user_settings/user_settings_modal.jsx index 4dcf32cb9..776201295 100644 --- a/web/react/components/user_settings/user_settings_modal.jsx +++ b/web/react/components/user_settings/user_settings_modal.jsx @@ -10,6 +10,7 @@ export default class UserSettingsModal extends React.Component { constructor(props) { super(props); + this.handleShow = this.handleShow.bind(this); this.handleHide = this.handleHide.bind(this); this.handleHidden = this.handleHidden.bind(this); this.handleCollapse = this.handleCollapse.bind(this); @@ -33,12 +34,22 @@ export default class UserSettingsModal extends React.Component { this.requireConfirm = false; } + componentDidMount() { + if (this.props.show) { + this.handleShow(); + } + } + componentDidUpdate(prevProps) { - if (!prevProps.show && this.props.show) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); - if ($(window).width() > 768) { - $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); - } + if (this.props.show && !prevProps.show) { + this.handleShow(); + } + } + + handleShow() { + $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); + if ($(window).width() > 768) { + $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } } diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx index 61d13ed8b..16ace0abc 100644 --- a/web/react/components/user_settings/user_settings_security.jsx +++ b/web/react/components/user_settings/user_settings_security.jsx @@ -5,6 +5,7 @@ var SettingItemMin = require('../setting_item_min.jsx'); var SettingItemMax = require('../setting_item_max.jsx'); var AccessHistoryModal = require('../access_history_modal.jsx'); var ActivityLogModal = require('../activity_log_modal.jsx'); +var ToggleModalButton = require('../toggle_modal_button.jsx'); var Client = require('../../utils/client.jsx'); var AsyncClient = require('../../utils/async_client.jsx'); var Constants = require('../../utils/constants.jsx'); @@ -13,34 +14,13 @@ export default class SecurityTab extends React.Component { constructor(props) { super(props); - this.showAccessHistoryModal = this.showAccessHistoryModal.bind(this); - this.showActivityLogModal = this.showActivityLogModal.bind(this); - this.hideModals = this.hideModals.bind(this); this.submitPassword = this.submitPassword.bind(this); this.updateCurrentPassword = this.updateCurrentPassword.bind(this); this.updateNewPassword = this.updateNewPassword.bind(this); this.updateConfirmPassword = this.updateConfirmPassword.bind(this); this.setupInitialState = this.setupInitialState.bind(this); - const state = this.setupInitialState(); - state.showAccessHistoryModal = false; - state.showActivityLogModal = false; - this.state = state; - } - showAccessHistoryModal() { - this.props.setEnforceFocus(false); - this.setState({showAccessHistoryModal: true}); - } - showActivityLogModal() { - this.props.setEnforceFocus(false); - this.setState({showActivityLogModal: true}); - } - hideModals() { - this.props.setEnforceFocus(true); - this.setState({ - showAccessHistoryModal: false, - showActivityLogModal: false - }); + this.state = this.setupInitialState(); } submitPassword(e) { e.preventDefault(); @@ -258,30 +238,20 @@ export default class SecurityTab extends React.Component { {passwordSection} <div className='divider-dark'/> <br></br> - <a + <ToggleModalButton className='security-links theme' - href='#' - onClick={this.showAccessHistoryModal} + dialogType={AccessHistoryModal} > <i className='fa fa-clock-o'></i>View Access History - </a> + </ToggleModalButton> <b> </b> - <a + <ToggleModalButton className='security-links theme' - href='#' - onClick={this.showActivityLogModal} + dialogType={ActivityLogModal} > - <i className='fa fa-globe'></i>View and Logout of Active Sessions - </a> + <i className='fa fa-clock-o'></i>{'View and Logout of Active Sessions'} + </ToggleModalButton> </div> - <AccessHistoryModal - show={this.state.showAccessHistoryModal} - onModalDismissed={this.hideModals} - /> - <ActivityLogModal - show={this.state.showActivityLogModal} - onModalDismissed={this.hideModals} - /> </div> ); } |