Merge pull request #1495 from weseek/reactify-admin/saml-auth-test-function

Reactify admin/ldap auth test function

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

@@ -1,23 +1,90 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import loggerFactory from '@alias/logger';
 
 import Modal from 'react-bootstrap/es/Modal';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
+import { toastError } from '../../../util/apiNotification';
 
+import AppContainer from '../../../services/AppContainer';
 import AdminLdapSecurityContainer from '../../../services/AdminLdapSecurityContainer';
 
+const logger = loggerFactory('growi:security:AdminLdapSecurityContainer');
+
 class LdapAuthTestModal extends React.Component {
 
   constructor(props) {
     super(props);
 
+    this.state = {
+      username: '',
+      password: '',
+      logs: '',
+    };
+
+    this.onChangeUsername = this.onChangeUsername.bind(this);
+    this.onChangePassword = this.onChangePassword.bind(this);
+    this.addLogs = this.addLogs.bind(this);
     this.testLdapCredentials = this.testLdapCredentials.bind(this);
   }
 
-  testLdapCredentials() {
-    // TODO GW-770 implement auth test
+  /**
+   * Change username
+   */
+  onChangeUsername(username) {
+    this.setState({ username });
+  }
+
+  /**
+   * Change password
+   */
+  onChangePassword(password) {
+    this.setState({ password });
+  }
+
+  /**
+   * add logs
+   */
+  addLogs(log) {
+    const newLog = `${new Date()} - ${log}\n\n`;
+    this.setState({
+      logs: `${newLog}${this.state.logs}`,
+    });
+  }
+
+  /**
+   * Test ldap auth
+   */
+  async testLdapCredentials() {
+    try {
+      const response = await this.props.appContainer.apiPost('/login/testLdap', {
+        loginForm: {
+          username: this.state.username,
+          password: this.state.password,
+        },
+      });
+
+      // add logs
+      if (response.err) {
+        this.addLogs(response.err);
+      }
+      if (response.ldapConfiguration) {
+        const prettified = JSON.stringify(response.ldapConfiguration.server, undefined, 4);
+        this.addLogs(`LDAP Configuration : ${prettified}`);
+      }
+      if (response.ldapAccountInfo) {
+        const prettified = JSON.stringify(response.ldapAccountInfo, undefined, 4);
+        this.addLogs(`Retrieved LDAP Account : ${prettified}`);
+      }
+
+    }
+    // Catch server communication error
+    catch (err) {
+      toastError(err);
+      logger.error(err);
+    }
   }
 
   render() {
@@ -27,29 +94,40 @@ class LdapAuthTestModal extends React.Component {
       <Modal show={this.props.isOpen} onHide={this.props.onClose}>
         <Modal.Header className="modal-header" closeButton>
           <Modal.Title>
-            {t('Test LDAP Account')}
+            Test LDAP Account
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
           <div className="row p-3">
             <label htmlFor="username" className="col-xs-3 text-right">{t('username')}</label>
             <div className="col-xs-6">
-              <input className="form-control" name="username" />
+              <input
+                className="form-control"
+                name="username"
+                value={this.state.username}
+                onChange={(e) => { this.onChangeUsername(e.target.value) }}
+              />
             </div>
           </div>
           <div className="row p-3">
             <label htmlFor="password" className="col-xs-3 text-right">{t('Password')}</label>
             <div className="col-xs-6">
-              <input className="form-control" type="password" name="password" />
+              <input
+                className="form-control"
+                type="password"
+                name="password"
+                value={this.state.password}
+                onChange={(e) => { this.onChangePassword(e.target.value) }}
+              />
             </div>
           </div>
           <div>
             <h5>Logs</h5>
-            <textarea id="taLogs" className="col-xs-12" rows="4" readOnly />
+            <textarea id="taLogs" className="col-xs-12" rows="4" value={this.state.logs} readOnly />
           </div>
         </Modal.Body>
         <Modal.Footer>
-          <button type="button" className="btn btn-default mt-3 col-xs-offset-5 col-xs-2" onClick={this.testLdapCredentials}>{t('Test')}</button>
+          <button type="button" className="btn btn-default mt-3 col-xs-offset-5 col-xs-2" onClick={this.testLdapCredentials}>Test</button>
         </Modal.Footer>
       </Modal>
     );
@@ -60,6 +138,7 @@ class LdapAuthTestModal extends React.Component {
 
 LdapAuthTestModal.propTypes = {
   t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminLdapSecurityContainer: PropTypes.instanceOf(AdminLdapSecurityContainer).isRequired,
 
   isOpen: PropTypes.bool.isRequired,
@@ -67,7 +146,7 @@ LdapAuthTestModal.propTypes = {
 };
 
 const LdapAuthTestModalWrapper = (props) => {
-  return createSubscribedElement(LdapAuthTestModal, props, [AdminLdapSecurityContainer]);
+  return createSubscribedElement(LdapAuthTestModal, props, [AppContainer, AdminLdapSecurityContainer]);
 };
 
 export default withTranslation()(LdapAuthTestModalWrapper);