create auth test modal

src/client/js/components/Admin/Security/LdapAuthTestModal.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import Modal from 'react-bootstrap/es/Modal';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AdminLdapSecurityContainer from '../../../services/AdminLdapSecurityContainer';
+
+class LdapAuthTestModal extends React.Component {
+  render() {
+    return (
+      <Modal show={this.props.isOpen} onHide={this.props.onClose}>
+        <Modal.Header className="modal-header" closeButton>
+          <Modal.Title>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          hoge
+        </Modal.Body>
+        <Modal.Footer className="d-flex">
+
+        </Modal.Footer>
+      </Modal>
+    )
+  }
+}
+
+
+LdapAuthTestModal.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  adminLdapSecurityContainer: PropTypes.instanceOf(AdminLdapSecurityContainer).isRequired,
+
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+const LdapAuthTestModalWrapper = (props) => {
+  return createSubscribedElement(LdapAuthTestModal, props, [AdminLdapSecurityContainer]);
+};
+
+export default withTranslation()(LdapAuthTestModalWrapper);

src/client/js/components/Admin/Security/LdapSecuritySetting.jsx

@@ -9,6 +9,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
 import AdminLdapSecurityContainer from '../../../services/AdminLdapSecurityContainer';
+import LdapAuthTestModal from './LdapAuthTestModal';
 
 const logger = loggerFactory('growi:security:AdminLdapSecurityContainer');
 
@@ -19,9 +20,12 @@ class LdapSecuritySetting extends React.Component {
 
     this.state = {
       retrieveError: null,
+      isLdapAuthTestModalShown: false,
     };
 
     this.onClickSubmit = this.onClickSubmit.bind(this);
+    this.openLdapAuthTestModal = this.openLdapAuthTestModal.bind(this);
+    this.closeLdapAuthTestModal = this.closeLdapAuthTestModal.bind(this);
   }
 
   async componentDidMount() {
@@ -50,6 +54,14 @@ class LdapSecuritySetting extends React.Component {
     }
   }
 
+  openLdapAuthTestModal() {
+    this.setState({ isLdapAuthTestModalShown: true });
+  }
+
+  closeLdapAuthTestModal() {
+    this.setState({ isLdapAuthTestModalShown: false });
+  }
+
   render() {
     const { t, adminGeneralSecurityContainer, adminLdapSecurityContainer } = this.props;
     const { isLdapEnabled } = adminGeneralSecurityContainer.state;
@@ -379,11 +391,13 @@ class LdapSecuritySetting extends React.Component {
           <div className="col-xs-offset-3 col-xs-5">
             <button type="button" className="btn btn-primary" disabled={this.state.retrieveError != null} onClick={this.onClickSubmit}>{t('Update')}</button>
             {adminGeneralSecurityContainer.state.isLdapEnabled
-              && <button type="button" className="btn btn-default ml-2">{t('security_setting.ldap.test_config')}</button>
+              && <button type="button" className="btn btn-default ml-2" onClick={this.openLdapAuthTestModal}>{t('security_setting.ldap.test_config')}</button>
             }
           </div>
         </div>
 
+        <LdapAuthTestModal isOpen={this.state.isLdapAuthTestModalShown} onClose={this.closeLdapAuthTestModal} />
+
       </React.Fragment>
     );
   }