add bind mode dropdown

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

@@ -62,17 +62,26 @@ class SecurityLdapSetting extends React.Component {
 
             <div className="row mb-5">
               <strong className="col-xs-3 text-right">{ t('security_setting.ldap.bind_mode') }</strong>
-              <div className="col-xs-6 text-left">
-                <div className="checkbox checkbox-success">
-                  <input
-                    id="isLdapEnabled"
-                    type="checkbox"
-                    checked={ldapConfig.isEnabled}
-                    onChange={() => { adminSecurityContainer.switchIsLdapEnabled() }}
-                  />
-                  <label htmlFor="isLdapEnabled">
-                    { t('security_setting.ldap.enable_ldap') }
-                  </label>
+              <div className="col-xs-9 text-left">
+                <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="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') }}>
+                        <a role="menuitem">{ t('security_setting.ldap.bind_manager') }</a>
+                      </li>
+                      <li key="user" role="presentation" type="button" onClick={() => { adminSecurityContainer.changeLdapBindMode('user') }}>
+                        <a role="menuitem">{ t('security_setting.ldap.bind_user') }</a>
+                      </li>
+                    </ul>
+                  </div>
+                  {/* TODO */}
                 </div>
               </div>
             </div>

src/client/js/services/AdminSecurityContainer.js

@@ -25,6 +25,7 @@ export default class AdminSecurityContainer extends Container {
       ldapConfig: {
         isEnabled: true,
         serverUrl: '',
+        bindMode: 'manager',
       },
     };
 
@@ -33,6 +34,7 @@ export default class AdminSecurityContainer extends Container {
     this.switchIsLocalEnabled = this.switchIsLocalEnabled.bind(this);
     this.changeRegistrationMode = this.changeRegistrationMode.bind(this);
     this.switchIsLdapEnabled = this.switchIsLdapEnabled.bind(this);
+    this.changeLdapBindMode = this.changeLdapBindMode.bind(this);
   }
 
   init() {
@@ -70,4 +72,13 @@ export default class AdminSecurityContainer extends Container {
     this.setState({ newLdapConfig });
   }
 
+  /**
+   * Change ldap bind mode
+   */
+  changeLdapBindMode(mode) {
+    const newLdapConfig = this.state.ldapConfig;
+    newLdapConfig.bindMode = mode;
+    this.setState({ newLdapConfig });
+  }
+
 }