summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--web/react/components/access_history_modal.jsx70
-rw-r--r--web/react/components/activity_log_modal.jsx72
-rw-r--r--web/react/components/user_settings/user_settings_security.jsx29
-rw-r--r--web/react/pages/channel.jsx12
4 files changed, 75 insertions, 108 deletions
diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx
index f0a31ce90..27959ec7e 100644
--- a/web/react/components/access_history_modal.jsx
+++ b/web/react/components/access_history_modal.jsx
@@ -1,6 +1,7 @@
// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
// See License.txt for license information.
+var Modal = ReactBootstrap.Modal;
var UserStore = require('../stores/user_store.jsx');
var ChannelStore = require('../stores/channel_store.jsx');
var AsyncClient = require('../utils/async_client.jsx');
@@ -30,16 +31,23 @@ export default class AccessHistoryModal extends React.Component {
}
onShow() {
AsyncClient.getAudits();
+
+ $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+ if ($(window).width() > 768) {
+ $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+ }
}
onHide() {
- $('#user_settings').modal('show');
this.setState({moreInfo: []});
+ this.props.onModalDismissed();
}
componentDidMount() {
UserStore.addAuditsChangeListener(this.onAuditChange);
- $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.onShow);
-
- $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.onHide);
+ }
+ componentDidUpdate(prevProps) {
+ if (this.props.show && !prevProps.show) {
+ this.onShow();
+ }
}
componentWillUnmount() {
UserStore.removeAuditsChangeListener(this.onAuditChange);
@@ -380,43 +388,23 @@ export default class AccessHistoryModal extends React.Component {
}
return (
- <div>
- <div
- className='modal fade'
- ref='modal'
- id='access-history'
- tabIndex='-1'
- role='dialog'
- aria-hidden='true'
- >
- <div className='modal-dialog modal-lg'>
- <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'
- >
- {'Access History'}
- </h4>
- </div>
- <div
- ref='modalBody'
- className='modal-body'
- >
- {content}
- </div>
- </div>
- </div>
- </div>
- </div>
+ <Modal
+ show={this.props.show}
+ onHide={this.onHide}
+ bsSize='large'
+ >
+ <Modal.Header closeButton={true}>
+ <Modal.Title>{'Access History'}</Modal.Title>
+ </Modal.Header>
+ <Modal.Body ref='modalBody'>
+ {content}
+ </Modal.Body>
+ </Modal>
);
}
}
+
+AccessHistoryModal.propTypes = {
+ show: React.PropTypes.bool.isRequired,
+ onModalDismissed: React.PropTypes.func.isRequired
+};
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 2c944913f..6a24870f6 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -4,6 +4,7 @@
const UserStore = require('../stores/user_store.jsx');
const Client = require('../utils/client.jsx');
const AsyncClient = require('../utils/async_client.jsx');
+const Modal = ReactBootstrap.Modal;
const LoadingScreen = require('./loading_screen.jsx');
const Utils = require('../utils/utils.jsx');
@@ -49,16 +50,23 @@ export default class ActivityLogModal extends React.Component {
}
onShow() {
AsyncClient.getSessions();
+
+ $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300);
+ if ($(window).width() > 768) {
+ $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar();
+ }
}
onHide() {
- $('#user_settings').modal('show');
this.setState({moreInfo: []});
+ this.props.onModalDismissed();
}
componentDidMount() {
UserStore.addSessionsChangeListener(this.onListenerChange);
- $(ReactDOM.findDOMNode(this.refs.modal)).on('shown.bs.modal', this.onShow);
-
- $(ReactDOM.findDOMNode(this.refs.modal)).on('hidden.bs.modal', this.onHide);
+ }
+ componentDidUpdate(prevProps) {
+ if (this.props.show && !prevProps.show) {
+ this.onShow();
+ }
}
componentWillUnmount() {
UserStore.removeSessionsChangeListener(this.onListenerChange);
@@ -151,44 +159,24 @@ export default class ActivityLogModal extends React.Component {
}
return (
- <div>
- <div
- className='modal fade'
- ref='modal'
- id='activity-log'
- tabIndex='-1'
- role='dialog'
- aria-hidden='true'
- >
- <div className='modal-dialog modal-lg'>
- <div className='modal-content'>
- <div className='modal-header'>
- <button
- type='button'
- className='close'
- data-dismiss='modal'
- aria-label='Close'
- >
- <span aria-hidden='true'>&times;</span>
- </button>
- <h4
- className='modal-title'
- id='myModalLabel'
- >
- Active Sessions
- </h4>
- </div>
- <p className='session-help-text'>Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the 'Logout' button below to end a session.</p>
- <div
- ref='modalBody'
- className='modal-body'
- >
- {content}
- </div>
- </div>
- </div>
- </div>
- </div>
+ <Modal
+ show={this.props.show}
+ onHide={this.onHide}
+ bsSize='large'
+ >
+ <Modal.Header closeButton={true}>
+ <Modal.Title>{'Active Sessions'}</Modal.Title>
+ </Modal.Header>
+ <p className='session-help-text'>{'Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the \'Logout\' button below to end a session.'}</p>
+ <Modal.Body ref='modalBody'>
+ {content}
+ </Modal.Body>
+ </Modal>
);
}
}
+
+ActivityLogModal.propTypes = {
+ show: React.PropTypes.bool.isRequired,
+ onModalDismissed: React.PropTypes.func.isRequired
+};
diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index 983a10df0..4d414008e 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -3,6 +3,8 @@
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 Client = require('../../utils/client.jsx');
var AsyncClient = require('../../utils/async_client.jsx');
var Constants = require('../../utils/constants.jsx');
@@ -18,7 +20,10 @@ export default class SecurityTab extends React.Component {
this.handleClose = this.handleClose.bind(this);
this.setupInitialState = this.setupInitialState.bind(this);
- this.state = this.setupInitialState();
+ const state = this.setupInitialState();
+ state.showAccessHistoryModal = false;
+ state.showActivityLogModal = false;
+ this.state = state;
}
submitPassword(e) {
e.preventDefault();
@@ -75,12 +80,6 @@ export default class SecurityTab extends React.Component {
updateConfirmPassword(e) {
this.setState({confirmPassword: e.target.value});
}
- handleHistoryOpen() {
- $('#user_settings').modal('hide');
- }
- handleDevicesOpen() {
- $('#user_settings').modal('hide');
- }
handleClose() {
$(ReactDOM.findDOMNode(this)).find('.form-control').each(function resetValue() {
this.value = '';
@@ -253,25 +252,29 @@ export default class SecurityTab extends React.Component {
<div className='divider-dark'/>
<br></br>
<a
- data-toggle='modal'
className='security-links theme'
- data-target='#access-history'
href='#'
- onClick={this.handleHistoryOpen}
+ onClick={() => this.setState({showAccessHistoryModal: true})}
>
<i className='fa fa-clock-o'></i>View Access History
</a>
<b> </b>
<a
- data-toggle='modal'
className='security-links theme'
- data-target='#activity-log'
href='#'
- onClick={this.handleDevicesOpen}
+ onClick={() => this.setState({showActivityLogModal: true})}
>
<i className='fa fa-globe'></i>View and Logout of Active Sessions
</a>
</div>
+ <AccessHistoryModal
+ show={this.state.showAccessHistoryModal}
+ onModalDismissed={() => this.setState({showAccessHistoryModal: false})}
+ />
+ <ActivityLogModal
+ show={this.state.showActivityLogModal}
+ onModalDismissed={() => this.setState({showActivityLogModal: false})}
+ />
</div>
);
}
diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx
index e0272d276..c1085075d 100644
--- a/web/react/pages/channel.jsx
+++ b/web/react/pages/channel.jsx
@@ -23,8 +23,6 @@ var ChannelMembersModal = require('../components/channel_members.jsx');
var ChannelInviteModal = require('../components/channel_invite_modal.jsx');
var TeamMembersModal = require('../components/team_members.jsx');
var ChannelInfoModal = require('../components/channel_info_modal.jsx');
-var AccessHistoryModal = require('../components/access_history_modal.jsx');
-var ActivityLogModal = require('../components/activity_log_modal.jsx');
var RemovedFromChannelModal = require('../components/removed_from_channel_modal.jsx');
var RegisterAppModal = require('../components/register_app_modal.jsx');
var ImportThemeModal = require('../components/user_settings/import_theme_modal.jsx');
@@ -157,16 +155,6 @@ function setupChannelPage(props) {
);
ReactDOM.render(
- <AccessHistoryModal />,
- document.getElementById('access_history_modal')
- );
-
- ReactDOM.render(
- <ActivityLogModal />,
- document.getElementById('activity_log_modal')
- );
-
- ReactDOM.render(
<RemovedFromChannelModal />,
document.getElementById('removed_from_channel_modal')
);
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-01 09:56:19 +0000