FB

src/client/js/app.jsx

@@ -59,6 +59,7 @@ import AdminSecurityContainer from './services/AdminSecurityContainer';
 import WebsocketContainer from './services/WebsocketContainer';
 import MarkDownSettingContainer from './services/MarkDownSettingContainer';
 import AdminExternalAccountsContainer from './services/AdminExternalAccountsContainer';
+import AdminSecurityLdapContainer from './services/AdminSecutityLdapContainer';
 
 const logger = loggerFactory('growi:app');
 
@@ -215,8 +216,9 @@ if (adminMarkDownSettingElem != null) {
 const adminSecuritySettingElem = document.getElementById('admin-security-setting');
 if (adminSecuritySettingElem != null) {
   const adminSecurityContainer = new AdminSecurityContainer(appContainer);
+  const adminSecurityLdapContainer = new AdminSecurityLdapContainer(appContainer);
   ReactDOM.render(
-    <Provider inject={[injectableContainers, adminSecurityContainer]}>
+    <Provider inject={[injectableContainers, adminSecurityContainer, adminSecurityLdapContainer]}>
       <I18nextProvider i18n={i18n}>
         <SecurityManagement />
       </I18nextProvider>

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

@@ -6,12 +6,13 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminSecurityContainer from '../../../services/AdminSecurityContainer';
+import AdminSecurityLdapContainer from '../../../services/AdminSecutityLdapContainer';
 
 class SecurityLdapSetting extends React.Component {
 
   render() {
-    const { t, adminSecurityContainer } = this.props;
-    const { ldapConfig } = adminSecurityContainer.state;
+    const { t, adminSecurityContainer, adminSecurityLdapContainer } = this.props;
+    const { isLdapConfigEnabled } = adminSecurityContainer.state;
 
     return (
       <React.Fragment>
@@ -27,7 +28,7 @@ class SecurityLdapSetting extends React.Component {
               <input
                 id="isLdapEnabled"
                 type="checkbox"
-                checked={ldapConfig.isEnabled}
+                checked={isLdapConfigEnabled}
                 onChange={() => { adminSecurityContainer.switchIsLdapEnabled() }}
               />
               <label htmlFor="isLdapEnabled">
@@ -38,7 +39,7 @@ class SecurityLdapSetting extends React.Component {
         </div>
 
 
-        {ldapConfig.isEnabled && (
+        {isLdapConfigEnabled && (
           <React.Fragment>
             <div className="row mb-5">
               <label htmlFor="serverUrl" className="col-xs-3 control-label text-right">Server URL</label>
@@ -47,8 +48,8 @@ class SecurityLdapSetting extends React.Component {
                   className="form-control"
                   type="text"
                   name="serverUrl"
-                  value={ldapConfig.serverUrl}
-                  onChange={e => adminSecurityContainer.changeServerUrl(e.target.value)}
+                  value={adminSecurityLdapContainer.state.serverUrl}
+                  onChange={e => adminSecurityLdapContainer.changeServerUrl(e.target.value)}
                 />
                 <small>
                   <p
@@ -67,17 +68,17 @@ class SecurityLdapSetting extends React.Component {
                 <div className="my-0 btn-group">
                   <div className="dropdown">
                     <button className="btn btn-default dropdown-toggle w-100" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                      <span className="pull-left">{t(`security_setting.ldap.bind_${ldapConfig.bindMode}`)}</span>
+                      <span className="pull-left">{t(`security_setting.ldap.bind_${adminSecurityLdapContainer.state.bindMode}`)}</span>
                       <span className="bs-caret pull-right">
                         <span className="caret" />
                       </span>
                     </button>
                     {/* TODO adjust dropdown after BS4 */}
                     <ul className="dropdown-menu" role="menu">
-                      <li key="manager" role="presentation" type="button" onClick={() => { adminSecurityContainer.changeLdapBindMode('manager') }}>
+                      <li key="manager" role="presentation" type="button" onClick={() => { adminSecurityLdapContainer.changeLdapBindMode('manager') }}>
                         <a role="menuitem">{ t('security_setting.ldap.bind_manager') }</a>
                       </li>
-                      <li key="user" role="presentation" type="button" onClick={() => { adminSecurityContainer.changeLdapBindMode('user') }}>
+                      <li key="user" role="presentation" type="button" onClick={() => { adminSecurityLdapContainer.changeLdapBindMode('user') }}>
                         <a role="menuitem">{ t('security_setting.ldap.bind_user') }</a>
                       </li>
                     </ul>
@@ -93,10 +94,10 @@ class SecurityLdapSetting extends React.Component {
                   className="form-control"
                   type="text"
                   name="bindDN"
-                  value={ldapConfig.bindDN}
-                  onChange={e => adminSecurityContainer.changeBindDN(e.target.value)}
+                  value={adminSecurityLdapContainer.state.bindDN}
+                  onChange={e => adminSecurityLdapContainer.changeBindDN(e.target.value)}
                 />
-                {(ldapConfig.bindMode === 'manager') ? (
+                {(adminSecurityLdapContainer.state.bindMode === 'manager') ? (
                   <p className="help-block passport-ldap-managerbind">
                     <small>
                       { t('security_setting.ldap.bind_DN_manager_detail') }<br />
@@ -125,10 +126,10 @@ class SecurityLdapSetting extends React.Component {
                   className="form-control passport-ldap-managerbind"
                   type="password"
                   name="bindDNPassword"
-                  value={ldapConfig.bindDNPassword}
-                  onChange={e => adminSecurityContainer.changeBindDNPassword(e.target.value)}
+                  value={adminSecurityLdapContainer.state.bindDNPassword}
+                  onChange={e => adminSecurityLdapContainer.changeBindDNPassword(e.target.value)}
                 />
-                {(ldapConfig.bindMode === 'manager') ? (
+                {(adminSecurityLdapContainer.state.bindMode === 'manager') ? (
                   <p className="help-block passport-ldap-managerbind">
                     <small>
                       { t('security_setting.ldap.bind_DN_password_manager_detail') }
@@ -151,8 +152,8 @@ class SecurityLdapSetting extends React.Component {
                   className="form-control"
                   type="text"
                   name="searchFilter"
-                  value={ldapConfig.searchFilter}
-                  onChange={e => adminSecurityContainer.changeSearchFilter(e.target.value)}
+                  value={adminSecurityLdapContainer.state.searchFilter}
+                  onChange={e => adminSecurityLdapContainer.changeSearchFilter(e.target.value)}
                 />
                 <p className="help-block">
                   <small>
@@ -186,8 +187,8 @@ class SecurityLdapSetting extends React.Component {
                   type="text"
                   placeholder="Default: uid"
                   name="attrMapUsername"
-                  value={ldapConfig.attrMapUsername}
-                  onChange={e => adminSecurityContainer.changeAttrMapUsername(e.target.value)}
+                  value={adminSecurityLdapContainer.state.attrMapUsername}
+                  onChange={e => adminSecurityLdapContainer.changeAttrMapUsername(e.target.value)}
                 />
                 <p className="help-block">
                   {/* eslint-disable-next-line react/no-danger */}
@@ -202,8 +203,8 @@ class SecurityLdapSetting extends React.Component {
                   <input
                     id="cbSameUsernameTreatedAsIdenticalUser"
                     type="checkbox"
-                    checked={ldapConfig.cbSameUsernameTreatedAsIdenticalUser}
-                    onChange={() => { adminSecurityContainer.switchCbSameUsernameTreatedAsIdenticalUser() }}
+                    checked={adminSecurityLdapContainer.state.cbSameUsernameTreatedAsIdenticalUser}
+                    onChange={() => { adminSecurityLdapContainer.switchCbSameUsernameTreatedAsIdenticalUser() }}
                   />
                   <label
                     htmlFor="cbSameUsernameTreatedAsIdenticalUser"
@@ -226,8 +227,8 @@ class SecurityLdapSetting extends React.Component {
                   type="text"
                   placeholder="Default: mail"
                   name="attrMapMail"
-                  value={ldapConfig.attrMapMail}
-                  onChange={e => adminSecurityContainer.changeAttrMapMail(e.target.value)}
+                  value={adminSecurityLdapContainer.state.attrMapMail}
+                  onChange={e => adminSecurityLdapContainer.changeAttrMapMail(e.target.value)}
                 />
                 <p className="help-block">
                   <small>
@@ -244,8 +245,8 @@ class SecurityLdapSetting extends React.Component {
                   className="form-control"
                   type="text"
                   name="attrMapName"
-                  value={ldapConfig.attrMapName}
-                  onChange={e => adminSecurityContainer.changeAttrMapName(e.target.value)}
+                  value={adminSecurityLdapContainer.state.attrMapName}
+                  onChange={e => adminSecurityLdapContainer.changeAttrMapName(e.target.value)}
                 />
                 <p className="help-block">
                   <small>
@@ -267,8 +268,8 @@ class SecurityLdapSetting extends React.Component {
                   className="form-control"
                   type="text"
                   name="groupSearchBase"
-                  value={ldapConfig.groupSearchBase}
-                  onChange={e => adminSecurityContainer.changeGroupSearchBase(e.target.value)}
+                  value={adminSecurityLdapContainer.state.groupSearchBase}
+                  onChange={e => adminSecurityLdapContainer.changeGroupSearchBase(e.target.value)}
                 />
                 <p className="help-block">
                   <small>
@@ -287,8 +288,8 @@ class SecurityLdapSetting extends React.Component {
                   className="form-control"
                   type="text"
                   name="groupSearchFilter"
-                  value={ldapConfig.groupSearchFilter}
-                  onChange={e => adminSecurityContainer.changeGroupSearchFilter(e.target.value)}
+                  value={adminSecurityLdapContainer.state.groupSearchFilter}
+                  onChange={e => adminSecurityLdapContainer.changeGroupSearchFilter(e.target.value)}
                 />
                 <p className="help-block">
                   <small>
@@ -317,8 +318,8 @@ class SecurityLdapSetting extends React.Component {
                   type="text"
                   placeholder="Default: uid"
                   name="groupDnProperty"
-                  value={ldapConfig.groupDnProperty}
-                  onChange={e => adminSecurityContainer.changeGroupDnProperty(e.target.value)}
+                  value={adminSecurityLdapContainer.state.groupDnProperty}
+                  onChange={e => adminSecurityLdapContainer.changeGroupDnProperty(e.target.value)}
                 />
                 <p className="help-block">
                   {/* eslint-disable-next-line react/no-danger */}
@@ -340,10 +341,11 @@ SecurityLdapSetting.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   adminSecurityContainer: PropTypes.instanceOf(AdminSecurityContainer).isRequired,
+  adminSecurityLdapContainer: PropTypes.instanceOf(AdminSecurityLdapContainer).isRequired,
 };
 
 const SecurityLdapSettingWrapper = (props) => {
-  return createSubscribedElement(SecurityLdapSetting, props, [AppContainer, AdminSecurityContainer]);
+  return createSubscribedElement(SecurityLdapSetting, props, [AppContainer, AdminSecurityContainer, AdminSecurityLdapContainer]);
 };
 
 export default withTranslation()(SecurityLdapSettingWrapper);

src/client/js/services/AdminSecurityContainer.js

@@ -22,21 +22,7 @@ export default class AdminSecurityContainer extends Container {
       isLocalEnabled: true,
       registrationMode: 'open',
       registrationWhiteList: '',
-      ldapConfig: {
-        isEnabled: true,
-        serverUrl: '',
-        bindMode: 'manager',
-        bindDN: '',
-        bindDNPassword: '',
-        searchFilter: '',
-        attrMapUsername: '',
-        cbSameUsernameTreatedAsIdenticalUser: true,
-        attrMapMail: '',
-        attrMapName: '',
-        groupSearchBase: '',
-        groupSearchFilter: '',
-        groupDnProperty: '',
-      },
+      isLdapConfigEnabled: true,
     };
 
     this.init();
@@ -77,117 +63,7 @@ export default class AdminSecurityContainer extends Container {
    * Switch local enabled
    */
   switchIsLdapEnabled() {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.isEnabled = !this.state.ldapConfig.isEnabled;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change server url
-   */
-  changeServerUrl(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.serverUrl = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change ldap bind mode
-   */
-  changeLdapBindMode(mode) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.bindMode = mode;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change bind DN
-   */
-  changeBindDN(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.bindDN = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change bind DN password
-   */
-  changeBindDNPassword(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.bindDNPassword = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change search filter
-   */
-  changeSearchFilter(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.searchFilter = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change attr map username
-   */
-  changeAttrMapUsername(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.attrMapUsername = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Switch cb same username treated as identical user
-   */
-  switchCbSameUsernameTreatedAsIdenticalUser() {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.cbSameUsernameTreatedAsIdenticalUser = !this.state.ldapConfig.cbSameUsernameTreatedAsIdenticalUser;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change attr map email
-   */
-  changeAttrMapMail(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.attrMapMail = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change attr map name
-   */
-  changeAttrMapName(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.attrMapName = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change group search base
-   */
-  changeGroupSearchBase(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.groupSearchBase = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change group search filter
-   */
-  changeGroupSearchFilter(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.groupSearchFilter = inputValue;
-    this.setState({ newLdapConfig });
-  }
-
-  /**
-   * Change group dn property
-   */
-  changeGroupDnProperty(inputValue) {
-    const newLdapConfig = this.state.ldapConfig;
-    newLdapConfig.groupDnProperty = inputValue;
-    this.setState({ newLdapConfig });
+    this.setState({ isLdapConfigEnabled: !this.state.isLdapConfigEnabled });
   }
 
 }

src/client/js/services/AdminSecutityLdapContainer.js

@@ -0,0 +1,135 @@
+import { Container } from 'unstated';
+
+import loggerFactory from '@alias/logger';
+
+// eslint-disable-next-line no-unused-vars
+const logger = loggerFactory('growi:services:AdminSecurityLdapContainer');
+
+/**
+ * Service container for admin security page (SecurityManagement.jsx)
+ * @extends {Container} unstated Container
+ */
+export default class AdminSecurityLdapContainer extends Container {
+
+  constructor(appContainer) {
+    super();
+
+    this.appContainer = appContainer;
+
+    this.state = {
+      // TODO GW-583 set value
+      serverUrl: '',
+      bindMode: 'manager',
+      bindDN: '',
+      bindDNPassword: '',
+      searchFilter: '',
+      attrMapUsername: '',
+      cbSameUsernameTreatedAsIdenticalUser: true,
+      attrMapMail: '',
+      attrMapName: '',
+      groupSearchBase: '',
+      groupSearchFilter: '',
+      groupDnProperty: '',
+    };
+
+    this.init();
+
+  }
+
+  init() {
+    // TODO GW-583 fetch config value with api
+  }
+
+
+  /**
+   * Workaround for the mangling in production build to break constructor.name
+   */
+  static getClassName() {
+    return 'AdminSecurityLdapContainer';
+  }
+
+  /**
+   * Change server url
+   */
+  changeServerUrl(inputValue) {
+    this.setState({ serverUrl: inputValue });
+  }
+
+  /**
+   * Change ldap bind mode
+   */
+  changeLdapBindMode(mode) {
+    this.setState({ bindMode: mode });
+  }
+
+  /**
+   * Change bind DN
+   */
+  changeBindDN(inputValue) {
+    this.setState({ bindDN: inputValue });
+  }
+
+  /**
+   * Change bind DN password
+   */
+  changeBindDNPassword(inputValue) {
+    this.setState({ bindDNPassword: inputValue });
+  }
+
+  /**
+   * Change search filter
+   */
+  changeSearchFilter(inputValue) {
+    this.setState({ searchFilter: inputValue });
+  }
+
+  /**
+   * Change attr map username
+   */
+  changeAttrMapUsername(inputValue) {
+    this.setState({ attrMapUsername: inputValue });
+  }
+
+  /**
+   * Switch cb same username treated as identical user
+   */
+  switchCbSameUsernameTreatedAsIdenticalUser() {
+    this.setState({ cbSameUsernameTreatedAsIdenticalUser: !this.state.cbSameUsernameTreatedAsIdenticalUser });
+  }
+
+  /**
+   * Change attr map email
+   */
+  changeAttrMapMail(inputValue) {
+    this.setState({ attrMapMail: inputValue });
+  }
+
+  /**
+   * Change attr map name
+   */
+  changeAttrMapName(inputValue) {
+    this.setState({ attrMapName: inputValue });
+  }
+
+  /**
+   * Change group search base
+   */
+  changeGroupSearchBase(inputValue) {
+    this.setState({ groupSearchBase: inputValue });
+  }
+
+  /**
+   * Change group search filter
+   */
+  changeGroupSearchFilter(inputValue) {
+    this.setState({ groupSearchFilter: inputValue });
+  }
+
+  /**
+   * Change group dn property
+   */
+  changeGroupDnProperty(inputValue) {
+    this.setState({ groupDnProperty: inputValue });
+  }
+
+}