create container

src/client/js/app.jsx

@@ -66,6 +66,7 @@ import AdminBasicSecurityContainer from './services/AdminBasicSecurityContainer'
 import AdminGoogleSecurityContainer from './services/AdminGoogleSecurityContainer';
 import AdminGithubSecurityContainer from './services/AdminGithubSecurityConatainer';
 import AdminTwitterSecurityContainer from './services/AdminTwitterSecurityContainer';
+import AdminLocalSecurityContainer from './services/AdminLocalSecurityContainer';
 
 const logger = loggerFactory('growi:app');
 
@@ -249,6 +250,7 @@ if (adminMarkDownSettingElem != null) {
 const adminSecuritySettingElem = document.getElementById('admin-security-setting');
 if (adminSecuritySettingElem != null) {
   const adminGeneralSecurityContainer = new AdminGeneralSecurityContainer(appContainer);
+  const adminLocalSecurityContainer = new AdminLocalSecurityContainer(appContainer);
   const adminLdapSecurityContainer = new AdminLdapSecurityContainer(appContainer);
   const adminSamlSecurityContainer = new AdminSamlSecurityContainer(appContainer);
   const adminOidcSecurityContainer = new AdminOidcSecurityContainer(appContainer);
@@ -257,8 +259,8 @@ if (adminSecuritySettingElem != null) {
   const adminGithubSecurityContainer = new AdminGithubSecurityContainer(appContainer);
   const adminTwitterSecurityContainer = new AdminTwitterSecurityContainer(appContainer);
   const adminSecurityContainers = [
-    adminGeneralSecurityContainer, adminLdapSecurityContainer, adminSamlSecurityContainer, adminOidcSecurityContainer, adminBasicSecurityContainer,
-    adminGoogleSecurityContainer, adminGithubSecurityContainer, adminTwitterSecurityContainer,
+    adminGeneralSecurityContainer, adminLocalSecurityContainer, adminLdapSecurityContainer, adminSamlSecurityContainer,
+    adminOidcSecurityContainer, adminBasicSecurityContainer, adminGoogleSecurityContainer, adminGithubSecurityContainer, adminTwitterSecurityContainer,
   ];
   ReactDOM.render(
     <Provider inject={[...injectableContainers, ...adminSecurityContainers]}>

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

@@ -8,6 +8,7 @@ import { toastSuccess, toastError } from '../../../util/apiNotification';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminGeneralSecurityContainer from '../../../services/AdminGeneralSecurityContainer';
+import AdminLocalSecurityContainer from '../../../services/AdminLocalSecurityContainer';
 
 class LocalSecuritySetting extends React.Component {
 
@@ -17,14 +18,14 @@ class LocalSecuritySetting extends React.Component {
     this.state = {
       retrieveError: null,
     };
-    this.putLocalSecuritySetting = this.putLocalSecuritySetting.bind(this);
+    this.onClickSubmit = this.onClickSubmit.bind(this);
   }
 
   async componentDidMount() {
-    const { adminGeneralSecurityContainer } = this.props;
+    const { adminLocalSecurityContainer } = this.props;
 
     try {
-      await adminGeneralSecurityContainer.retrieveSecurityData();
+      await adminLocalSecurityContainer.retrieveSecurityData();
     }
     catch (err) {
       toastError(err);
@@ -33,10 +34,10 @@ class LocalSecuritySetting extends React.Component {
   }
 
 
-  async putLocalSecuritySetting() {
-    const { t, adminGeneralSecurityContainer } = this.props;
+  async onClickSubmit() {
+    const { t, adminLocalSecurityContainer } = this.props;
     try {
-      await adminGeneralSecurityContainer.updateLocalSecuritySetting();
+      await adminLocalSecurityContainer.updateLocalSecuritySetting();
       toastSuccess(t('security_setting.updated_general_security_setting'));
     }
     catch (err) {
@@ -45,8 +46,8 @@ class LocalSecuritySetting extends React.Component {
   }
 
   render() {
-    const { t, adminGeneralSecurityContainer } = this.props;
-    const { registrationMode } = adminGeneralSecurityContainer.state;
+    const { t, adminGeneralSecurityContainer, adminLocalSecurityContainer } = this.props;
+    const { registrationMode } = adminLocalSecurityContainer.state;
 
     return (
       <React.Fragment>
@@ -105,7 +106,7 @@ class LocalSecuritySetting extends React.Component {
                         key="Open"
                         role="presentation"
                         type="button"
-                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('Open') }}
+                        onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Open') }}
                       >
                         <a role="menuitem">{t('security_setting.registration_mode.open')}</a>
                       </li>
@@ -113,7 +114,7 @@ class LocalSecuritySetting extends React.Component {
                         key="Restricted"
                         role="presentation"
                         type="button"
-                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('Restricted') }}
+                        onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Restricted') }}
                       >
                         <a role="menuitem">{t('security_setting.registration_mode.restricted')}</a>
                       </li>
@@ -121,7 +122,7 @@ class LocalSecuritySetting extends React.Component {
                         key="Closed"
                         role="presentation"
                         type="button"
-                        onClick={() => { adminGeneralSecurityContainer.changeRegistrationMode('Closed') }}
+                        onClick={() => { adminLocalSecurityContainer.changeRegistrationMode('Closed') }}
                       >
                         <a role="menuitem">{t('security_setting.registration_mode.closed')}</a>
                       </li>
@@ -141,8 +142,8 @@ class LocalSecuritySetting extends React.Component {
                     className="form-control"
                     type="textarea"
                     name="registrationWhiteList"
-                    value={adminGeneralSecurityContainer.state.registrationWhiteList}
-                    onChange={e => adminGeneralSecurityContainer.changeRegistrationWhiteList(e.target.value)}
+                    defaultValue={adminLocalSecurityContainer.state.registrationWhiteList}
+                    onChange={e => adminLocalSecurityContainer.changeRegistrationWhiteList(e.target.value)}
                   />
                   <p className="help-block small">{t('security_setting.restrict_emails')}<br />{t('security_setting.for_instance')}
                     <code>@growi.org</code>{t('security_setting.only_those')}<br />
@@ -154,9 +155,10 @@ class LocalSecuritySetting extends React.Component {
           </div>
         )}
 
-        {/*  TODO replace component */}
-        <div className="col-xs-offset-3 col-xs-6 mb-5">
-          <button type="submit" className="btn btn-primary" onClick={this.putLocalSecuritySetting}>{t('Update')}</button>
+        <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>
+          </div>
         </div>
 
       </React.Fragment>
@@ -169,10 +171,11 @@ LocalSecuritySetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminGeneralSecurityContainer: PropTypes.instanceOf(AdminGeneralSecurityContainer).isRequired,
+  adminLocalSecurityContainer: PropTypes.instanceOf(AdminLocalSecurityContainer).isRequired,
 };
 
 const LocalSecuritySettingWrapper = (props) => {
-  return createSubscribedElement(LocalSecuritySetting, props, [AppContainer, AdminGeneralSecurityContainer]);
+  return createSubscribedElement(LocalSecuritySetting, props, [AppContainer, AdminGeneralSecurityContainer, AdminLocalSecurityContainer]);
 };
 
 export default withTranslation()(LocalSecuritySettingWrapper);

src/client/js/services/AdminGeneralSecurityContainer.js

@@ -27,8 +27,6 @@ export default class AdminGeneralSecurityContainer extends Container {
       useOnlyEnvVarsForSomeOptions: false,
       appSiteUrl: appContainer.config.crowi.url || '',
       isLocalEnabled: false,
-      registrationMode: 'Open',
-      registrationWhiteList: '',
       isLdapEnabled: false,
       isSamlEnabled: false,
       isOidcEnabled: false,
@@ -42,19 +40,14 @@ export default class AdminGeneralSecurityContainer extends Container {
   }
 
   async retrieveSecurityData() {
-    // TODO GW-956 separate local setting container
     const response = await this.appContainer.apiv3.get('/security-setting/');
-    const { generalSetting, localSetting } = response.data.securityParams;
+    const { generalSetting } = response.data.securityParams;
     this.onIsWikiModeForced(generalSetting.wikiMode);
     this.setState({
-      currentRestrictGuestMode: generalSetting.restrictGuestMode || 'Deny',
       currentPageCompleteDeletionAuthority: generalSetting.pageCompleteDeletionAuthority || 'anyone',
       isHideRestrictedByOwner: generalSetting.hideRestrictedByOwner || false,
       isHideRestrictedByGroup: generalSetting.hideRestrictedByGroup || false,
       wikiMode: generalSetting.wikiMode || '',
-      isLocalEnabled: localSetting.isLocalEnabled || false,
-      registrationMode: localSetting.registrationMode || 'Open',
-      registrationWhiteList: localSetting.registrationWhiteList.join('\n') || '',
     });
   }
 
@@ -144,35 +137,6 @@ export default class AdminGeneralSecurityContainer extends Container {
     this.switchAuthentication('isLocalEnabled', 'local');
   }
 
-  /**
-   * Change registration mode
-   */
-  changeRegistrationMode(value) {
-    this.setState({ registrationMode: value });
-  }
-
-  /**
-   * Change registration white list
-   */
-  changeRegistrationWhiteList(value) {
-    this.setState({ registrationWhiteList: value });
-  }
-
-  /**
-  * update local security setting
-  */
-  async updateLocalSecuritySetting() {
-    let { registrationWhiteList } = this.state;
-    registrationWhiteList = Array.isArray(registrationWhiteList) ? registrationWhiteList : registrationWhiteList.split('\n');
-    const response = await this.appContainer.apiv3.put('/security-setting/local-setting', {
-      isLocalEnabled: this.state.isLocalEnabled,
-      registrationMode: this.state.registrationMode,
-      registrationWhiteList,
-    });
-    const { localSecuritySettingParams } = response.data;
-    return localSecuritySettingParams;
-  }
-
   /**
    * Switch LDAP enabled
    */

src/client/js/services/AdminLocalSecurityContainer.js

@@ -0,0 +1,80 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:security:AdminLocalSecurityContainer');
+
+/**
+ * Service container for admin security page (LocalSecuritySetting.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class AdminLocalSecurityContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+      registrationMode: 'Open',
+      registrationWhiteList: '',
+    };
+
+  }
+
+  async retrieveSecurityData() {
+    const response = await this.appContainer.apiv3.get('/security-setting/');
+    const { localSetting } = response.data.securityParams;
+    this.setState({
+      registrationMode: localSetting.registrationMode || 'Open',
+      registrationWhiteList: localSetting.registrationWhiteList.join('\n') || '',
+    });
+  }
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'AdminLocalSecurityContainer';
+  }
+
+
+  /**
+   * Change registration mode
+   */
+  changeRegistrationMode(value) {
+    this.setState({ registrationMode: value });
+  }
+
+  /**
+   * Change registration white list
+   */
+  changeRegistrationWhiteList(value) {
+    this.setState({ registrationWhiteList: value });
+  }
+
+  /**
+   * update local security setting
+   */
+  async updateLocalSecuritySetting() {
+    let { registrationWhiteList } = this.state;
+    registrationWhiteList = Array.isArray(registrationWhiteList) ? registrationWhiteList : registrationWhiteList.split('\n');
+    const response = await this.appContainer.apiv3.put('/security-setting/local-setting', {
+      isLocalEnabled: this.state.isLocalEnabled,
+      registrationMode: this.state.registrationMode,
+      registrationWhiteList,
+    });
+
+    const { localSecuritySettingParams } = response.data;
+
+    this.setState({
+      registrationMode: localSecuritySettingParams.registrationMode || 'Open',
+      registrationWhiteList: localSecuritySettingParams.registrationWhiteList || 'Open',
+    });
+
+    return localSecuritySettingParams;
+  }
+
+
+}