refactor LdapSecuritySetting

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

@@ -19,7 +19,7 @@ class LdapSecuritySetting extends React.Component {
     super(props);
 
     this.state = {
-      retrieveError: null,
+      isRetrieving: true,
       isLdapAuthTestModalShown: false,
     };
 
@@ -36,9 +36,8 @@ class LdapSecuritySetting extends React.Component {
     }
     catch (err) {
       toastError(err);
-      this.setState({ retrieveError: err.message });
-      logger.error(err);
     }
+    this.setState({ isRetrieving: false });
   }
 
   async onClickSubmit() {
@@ -66,6 +65,9 @@ class LdapSecuritySetting extends React.Component {
     const { t, adminGeneralSecurityContainer, adminLdapSecurityContainer } = this.props;
     const { isLdapEnabled } = adminGeneralSecurityContainer.state;
 
+    if (this.state.isRetrieving) {
+      return null;
+    }
     return (
       <React.Fragment>
 
@@ -389,7 +391,9 @@ class LdapSecuritySetting extends React.Component {
 
         <div className="row my-3">
           <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>
+            <button type="button" className="btn btn-primary" disabled={adminLdapSecurityContainer.state.retrieveError != null} onClick={this.onClickSubmit}>
+              {t('Update')}
+            </button>
             {adminGeneralSecurityContainer.state.isLdapEnabled
               && <button type="button" className="btn btn-default ml-2" onClick={this.openLdapAuthTestModal}>{t('security_setting.ldap.test_config')}</button>
             }

src/client/js/services/AdminLdapSecurityContainer.js

@@ -1,7 +1,11 @@
 import { Container } from 'unstated';
+import loggerFactory from '@alias/logger';
 
 import removeNullPropertyFromObject from '../../../lib/util/removeNullPropertyFromObject';
 
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:services:AdminLdapSecurityContainer');
+
 /**
  * Service container for admin security page (SecurityLdapSetting.jsx)
  * @extends {Container} unstated Container
@@ -14,6 +18,7 @@ export default class AdminLdapSecurityContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
+      retrieveError: null,
       serverUrl: '',
       isUserBind: false,
       ldapBindDN: '',
@@ -34,22 +39,29 @@ export default class AdminLdapSecurityContainer extends Container {
    * retrieve security data
    */
   async retrieveSecurityData() {
-    const response = await this.appContainer.apiv3.get('/security-setting/');
-    const { ldapAuth } = response.data.securityParams;
-    this.setState({
-      serverUrl: ldapAuth.serverUrl,
-      isUserBind: ldapAuth.isUserBind,
-      ldapBindDN: ldapAuth.ldapBindDN,
-      ldapBindDNPassword: ldapAuth.ldapBindDNPassword,
-      ldapSearchFilter: ldapAuth.ldapSearchFilter,
-      ldapAttrMapUsername: ldapAuth.ldapAttrMapUsername,
-      isSameUsernameTreatedAsIdenticalUser: ldapAuth.isSameUsernameTreatedAsIdenticalUser,
-      ldapAttrMapMail: ldapAuth.ldapAttrMapMail,
-      ldapAttrMapName: ldapAuth.ldapAttrMapName,
-      ldapGroupSearchBase: ldapAuth.ldapGroupSearchBase,
-      ldapGroupSearchFilter: ldapAuth.ldapGroupSearchFilter,
-      ldapGroupDnProperty: ldapAuth.ldapGroupDnProperty,
-    });
+    try {
+      const response = await this.appContainer.apiv3.get('/security-setting/');
+      const { ldapAuth } = response.data.securityParams;
+      this.setState({
+        serverUrl: ldapAuth.serverUrl,
+        isUserBind: ldapAuth.isUserBind,
+        ldapBindDN: ldapAuth.ldapBindDN,
+        ldapBindDNPassword: ldapAuth.ldapBindDNPassword,
+        ldapSearchFilter: ldapAuth.ldapSearchFilter,
+        ldapAttrMapUsername: ldapAuth.ldapAttrMapUsername,
+        isSameUsernameTreatedAsIdenticalUser: ldapAuth.isSameUsernameTreatedAsIdenticalUser,
+        ldapAttrMapMail: ldapAuth.ldapAttrMapMail,
+        ldapAttrMapName: ldapAuth.ldapAttrMapName,
+        ldapGroupSearchBase: ldapAuth.ldapGroupSearchBase,
+        ldapGroupSearchFilter: ldapAuth.ldapGroupSearchFilter,
+        ldapGroupDnProperty: ldapAuth.ldapGroupDnProperty,
+      });
+    }
+    catch (err) {
+      this.setState({ retrieveError: err });
+      logger.error(err);
+      throw new Error('Failed to fetch data');
+    }
   }