Added ToggleModalButton component

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 onModalDismissed event
+        const dialog = React.createElement(this.props.dialogType, Object.assign({}, dialogProps, {
+            show: this.state.show,
+            onModalDismissed: () => {
+                this.hide();
+
+                if (dialogProps.onModalDismissed) {
+                    dialogProps.onModalDismissed();
+                }
+            }
+        }));
+
+        return (
+            <div style={{display: 'inline'}}>
+                <a
+                    {...props}
+                    href='#'
+                    onClick={this.show}
+                >
+                    {children}
+                </a>
+                {dialog}
+            </div>
+        );
+    }
+}
+
+ModalToggleButton.propTypes = {
+    children: React.PropTypes.node.isRequired,
+    dialogType: React.PropTypes.func.isRequired,
+    dialogProps: React.PropTypes.object
+};
+
+ModalToggleButton.defaultProps = {
+    dialogProps: {}
+};

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();
+        this.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
-        });
     }
     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='#'
+                        dialogType={AccessHistoryModal}
-                        onClick={this.showAccessHistoryModal}
                     >
                         <i className='fa fa-clock-o'></i>View Access History
-                    </a>
+                    </ToggleModalButton>
                     <b> </b>
-                    <a
+                    <ToggleModalButton
                         className='security-links theme'
-                        href='#'
+                        dialogType={ActivityLogModal}
-                        onClick={this.showActivityLogModal}
                     >
-                        <i className='fa fa-globe'></i>View and Logout of Active Sessions
+                        <i className='fa fa-clock-o'></i>{'View and Logout of Active Sessions'}
-                    </a>
+                    </ToggleModalButton>
                 </div>
-                <AccessHistoryModal
-                    show={this.state.showAccessHistoryModal}
-                    onModalDismissed={this.hideModals}
-                />
-                <ActivityLogModal
-                    show={this.state.showActivityLogModal}
-                    onModalDismissed={this.hideModals}
-                />
             </div>
         );
     }