refactor localSecuritySetting

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

@@ -16,7 +16,7 @@ class LocalSecuritySetting extends React.Component {
     super(props);
 
     this.state = {
-      retrieveError: null,
+      isRetrieving: true,
     };
     this.onClickSubmit = this.onClickSubmit.bind(this);
   }
@@ -29,8 +29,8 @@ class LocalSecuritySetting extends React.Component {
     }
     catch (err) {
       toastError(err);
-      this.setState({ retrieveError: err.message });
     }
+    this.setState({ isRetrieving: false });
   }
 
 
@@ -49,6 +49,10 @@ class LocalSecuritySetting extends React.Component {
     const { t, adminGeneralSecurityContainer, adminLocalSecurityContainer } = this.props;
     const { registrationMode } = adminLocalSecurityContainer.state;
 
+    if (this.state.isRetrieving) {
+      return null;
+    }
+
     return (
       <React.Fragment>
         {this.state.retrieveError != null && (
@@ -142,7 +146,7 @@ class LocalSecuritySetting extends React.Component {
                     className="form-control"
                     type="textarea"
                     name="registrationWhiteList"
-                    value={adminLocalSecurityContainer.state.registrationWhiteList.join('\n')}
+                    defaultValue={adminLocalSecurityContainer.state.registrationWhiteList.join('\n')}
                     onChange={e => adminLocalSecurityContainer.changeRegistrationWhiteList(e.target.value)}
                   />
                   <p className="help-block small">{t('security_setting.restrict_emails')}<br />{t('security_setting.for_instance')}
@@ -157,7 +161,9 @@ class LocalSecuritySetting 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={adminLocalSecurityContainer.state.retrieveError != null} onClick={this.onClickSubmit}>
+              {t('Update')}
+            </button>
           </div>
         </div>
 

src/client/js/services/AdminLocalSecurityContainer.js

@@ -1,5 +1,8 @@
 import { Container } from 'unstated';
+import loggerFactory from '@alias/logger';
 
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:services:AdminLocalSecurityContainer');
 /**
  * Service container for admin security page (LocalSecuritySetting.jsx)
  * @extends {Container} unstated Container
@@ -12,6 +15,7 @@ export default class AdminLocalSecurityContainer extends Container {
     this.appContainer = appContainer;
 
     this.state = {
+      retrieveError: null,
       registrationMode: 'Open',
       registrationWhiteList: [],
     };
@@ -19,12 +23,20 @@ export default class AdminLocalSecurityContainer extends Container {
   }
 
   async retrieveSecurityData() {
-    const response = await this.appContainer.apiv3.get('/security-setting/');
-    const { localSetting } = response.data.securityParams;
-    this.setState({
-      registrationMode: localSetting.registrationMode,
-      registrationWhiteList: localSetting.registrationWhiteList,
-    });
+    try {
+      const response = await this.appContainer.apiv3.get('/security-setting/');
+      const { localSetting } = response.data.securityParams;
+      this.setState({
+        registrationMode: localSetting.registrationMode,
+        registrationWhiteList: localSetting.registrationWhiteList,
+      });
+    }
+    catch (err) {
+      this.setState({ retrieveError: err });
+      logger.error(err);
+      throw new Error('Failed to fetch data');
+    }
+
   }
 
   /**