1 files changed, 16 insertions, 46 deletions

diff --git a/web/react/components/user_settings/user_settings_security.jsx b/web/react/components/user_settings/user_settings_security.jsx
index 61d13ed8b..fa2fecf07 100644
--- a/web/react/components/user_settings/user_settings_security.jsx
+++ b/web/react/components/user_settings/user_settings_security.jsx
@@ -1,46 +1,26 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-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');
+import SettingItemMin from '../setting_item_min.jsx';
+import SettingItemMax from '../setting_item_max.jsx';
+import AccessHistoryModal from '../access_history_modal.jsx';
+import ActivityLogModal from '../activity_log_modal.jsx';
+import ToggleModalButton from '../toggle_modal_button.jsx';
+import * as Client from '../../utils/client.jsx';
+import * as AsyncClient from '../../utils/async_client.jsx';
+import Constants from '../../utils/constants.jsx';
 
 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>
         );
     }