weseek__growi/lib/views/admin/widget/passport/ldap.html

<form action="/_api/admin/security/passport-ldap" method="post" class="form-horizontal" id="ldapSetting" role="form">

  <fieldset>
    <legend>LDAP {{ t("security_setting.configuration") }}</legend>

    {% set nameForIsLdapEnabled = "settingForm[security:passport-ldap:isEnabled]" %}
    {% set isLdapEnabled = settingForm['security:passport-ldap:isEnabled'] %}
    <div class="form-group">
      <label for="{{nameForIsLdapEnabled}}" class="col-xs-3 control-label">{{ t("security_setting.ldap.use_ldap") }}</label>
      <div class="col-xs-6">
        <div class="btn-group btn-toggle" data-toggle="buttons">
          <label class="btn btn-default btn-rounded btn-outline {% if isLdapEnabled %}active{% endif %}" data-active-class="primary">
            <input name="{{nameForIsLdapEnabled}}" value="true" type="radio"
                {% if true === isLdapEnabled %}checked{% endif %}> ON
          </label>
          <label class="btn btn-default btn-rounded btn-outline {% if !isLdapEnabled %}active{% endif %}" data-active-class="default">
            <input name="{{nameForIsLdapEnabled}}" value="false" type="radio"
                {% if !isLdapEnabled %}checked{% endif %}> OFF
          </label>
        </div>
      </div>
    </div>

    <div class="passport-ldap-hide-when-disabled" {%if !isLdapEnabled %}style="display: none;"{% endif %}>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:serverUrl]" class="col-xs-3 control-label">{{ t("security_setting.ldap.server_url") }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="text"
              name="settingForm[security:passport-ldap:serverUrl]" value="{{ settingForm['security:passport-ldap:serverUrl'] || '' }}">
          <p class="help-block">
            <small>
              {{ t("security_setting.ldap.server_url_detail") }}<br>
              {{ t("security_setting.example") }}: <code>ldaps://ldap.company.com/ou=people,dc=company,dc=com</code>
            </small>
          </p>
        </div>
      </div>

      {% set nameForIsUserBind = "settingForm[security:passport-ldap:isUserBind]" %}
      {% set isUserBind = settingForm['security:passport-ldap:isUserBind'] %}
      <div class="form-group">
        <label for="{{nameForIsUserBind}}" class="col-xs-3 control-label">{{ t("security_setting.ldap.bind_mode") }}</label>
        <div class="col-xs-6">
          <div class="btn-group btn-toggle" data-toggle="buttons">
            <label class="btn btn-default btn-rounded btn-outline {% if !isUserBind %}active{% endif %}" data-active-class="primary">
              <input name="{{nameForIsUserBind}}" value="false" type="radio"
                  {% if !isUserBind %}checked{% endif %}> {{ t("security_setting.ldap.bind_manager") }}
            </label>
            <label class="btn btn-default btn-rounded btn-outline {% if isUserBind %}active{% endif %}" data-active-class="primary">
              <input name="{{nameForIsUserBind}}" value="true" type="radio"
                  {% if isUserBind %}checked{% endif %}> {{ t("security_setting.ldap.bind_user") }}
            </label>
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:bindDN]" class="col-xs-3 control-label">{{ t("security_setting.ldap.bind_DN") }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="text"
              name="settingForm[security:passport-ldap:bindDN]" value="{{ settingForm['security:passport-ldap:bindDN'] || '' }}">
          <p class="help-block passport-ldap-managerbind" {% if isUserBind %}style="display: none;"{% endif %}>
            <small>
              {{ t("security_setting.ldap.bind_DN_manager_detail") }}
            </small>
          </p>
          <p class="help-block passport-ldap-userbind" {% if !isUserBind %}style="display: none;"{% endif %}>
            <small>
              {{ t("security_setting.ldap.bind_DN_user_detail1") }}<br>
              {{ t("security_setting.ldap.bind_DN_user_detail2") }}<br>
              {{ t("security_setting.example") }}: <code>uid={% raw %}{{username}}{% endraw %},dc=domain,dc=com</code><br>
            </small>
          </p>
          </div>
      </div>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:bindDNPassword]" class="col-xs-3 control-label">{{ t("security_setting.ldap.bind_DN_password") }}</label>
        <div class="col-xs-6">
          <input class="form-control passport-ldap-managerbind" type="text" {% if isUserBind %}style="display: none;"{% endif %}
              name="settingForm[security:passport-ldap:bindDNPassword]" value="{{ settingForm['security:passport-ldap:bindDNPassword'] || '' }}">
          <p class="help-block passport-ldap-managerbind">
            <small>
              {{ t("security_setting.ldap.bind_DN_password_manager_detail") }}
            </small>
          </p>
          <p class="help-block passport-ldap-userbind" {% if !isUserBind %}style="display: none;"{% endif %}>
            <small>
              {{ t("security_setting.ldap.bind_DN_password_user_detail") }}
            </small>
          </p>
        </div>
      </div>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:searchFilter]" class="col-xs-3 control-label">{{ t("security_setting.ldap.search_filter") }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="{{ t("security_setting.default") }}: (uid={% raw %}{{username}}{% endraw %})"
              name="settingForm[security:passport-ldap:searchFilter]" value="{{ settingForm['security:passport-ldap:searchFilter'] || '' }}">
          <p class="help-block">
            <small>
              {{ t("security_setting.ldap.search_filter_detail1") }}<br>
              {{ t("security_setting.ldap.search_filter_detail2") }}<br>
              {{ t("security_setting.ldap.search_filter_detail3") }}<br>
              <br>
              {{ t("security_setting.ldap.search_filter_example") }}: <code>(|(uid={% raw %}{{username}}{% endraw %})(mail={% raw %}{{username}}{% endraw %}))</code>
            </small>
          </p>
        </div>
      </div>

      <h4>{{ t("security_setting.ldap.attribute_mapping") }} ({{ t("security_setting.optional") }})</h4>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:attrMapUsername]" class="col-xs-3 control-label">{{ t("security_setting.ldap.username") }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="{{ t("security_setting.default") }}: uid"
              name="settingForm[security:passport-ldap:attrMapUsername]" value="{{ settingForm['security:passport-ldap:attrMapUsername'] || '' }}">
          <p class="help-block">
            <small>
              {{ t("security_setting.ldap.username_detail") }}
            </small>
          </p>

          <div class="checkbox checkbox-info">
            <input type="checkbox" id="cbSameUsernameTreatedAsIdenticalUser" name="settingForm[security:passport-ldap:isSameUsernameTreatedAsIdenticalUser]" value="1"
                {% if settingForm['security:passport-ldap:isSameUsernameTreatedAsIdenticalUser'] %}checked{% endif %} />
            <label for="cbSameUsernameTreatedAsIdenticalUser">
              {{ t("security_setting.ldap.Treat username matching as identical") }}
            </label>
          </div>
        </div>
      </div>


      <h4>{{ t("security_setting.ldap.group_search_filter") }} ({{ t("security_setting.optional") }})</h4>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:groupSearchBase]" class="col-xs-3 control-label">{{ t("security_setting.ldap.group_search_base_DN") }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="text"
              name="settingForm[security:passport-ldap:groupSearchBase]" value="{{ settingForm['security:passport-ldap:groupSearchBase'] || '' }}">
          <p class="help-block">
            <small>
              {{ t("security_setting.ldap.group_search_base_DN_detail") }}<br>
              {{ t("security_setting.example") }}: <code>ou=groups,dc=domain,dc=com</code><br>
            </small>
          </p>
        </div>
      </div>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:groupSearchFilter]" class="col-xs-3 control-label">{{ t("security_setting.ldap.group_search_filter") }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="text"
              name="settingForm[security:passport-ldap:groupSearchFilter]" value="{{ settingForm['security:passport-ldap:groupSearchFilter'] || '' }}">
          <p class="help-block">
            <small>
              {{ t("security_setting.ldap.group_search_filter_detail1") }}<br>
              {{ t("security_setting.ldap.group_search_filter_detail2") }}<br>
              <br>
              {{ t("security_setting.example") }}: {{ t("security_setting.ldap.group_search_filter_detail3") }}
            </small>
          </p>
        </div>
      </div>

      <div class="form-group">
        <label for="settingForm[security:passport-ldap:groupSearchFilter]" class="col-xs-3 control-label">{{ t("security_setting.ldap.group_DN_property") }}</label>
        <div class="col-xs-6">
          <input class="form-control" type="text" placeholder="{{ t("security_setting.default") }}: uid"
              name="settingForm[security:passport-ldap:groupDnProperty]" value="{{ settingForm['security:passport-ldap:groupDnProperty'] || '' }}">
          <p class="help-block">
            <small>
              {{ t("security_setting.ldap.group_DN_property_detail") }}
            </small>
          </p>
        </div>
      </div>

    </div><!-- /.passport-ldap-configurations -->

    <div class="form-group">
      <div class="col-xs-offset-3 col-xs-6">
        <button type="submit" class="btn btn-primary">{# the first element is the default button to submit #}
          {{ t('Update') }}
        </button>
        <button type="button"
            class="btn btn-default passport-ldap-hide-when-disabled"
            data-target="#test-ldap-account" data-toggle="modal"
            {%if !isLdapEnabled %}style="display: none;"{% endif %}>

          {{ t("security_setting.ldap.test_config") }}
        </button>
      </div>
    </div>
  </fieldset>
  <input type="hidden" name="_csrf" value="{{ csrf() }}">

  <script>
    // switch display according to on / off of radio buttons
    $('input[name="{{nameForIsLdapEnabled}}"]:radio').change(function() {
      const isEnabled = ($(this).val() === "true");

      if (isEnabled) {
        $('.passport-ldap-hide-when-disabled').show(400);
      }
      else {
        $('.passport-ldap-hide-when-disabled').hide(400);
      }
    });

    // switch display according to on / off of radio buttons
    $('input[name="{{nameForIsUserBind}}"]:radio').change(function() {
      const isUserBind = ($(this).val() === "true");

      if (isUserBind) {
        $('input.passport-ldap-managerbind').hide();
        $('.help-block.passport-ldap-managerbind').hide();
        $('.help-block.passport-ldap-userbind').show();
      }
      else {
        $('input.passport-ldap-managerbind').show();
        $('.help-block.passport-ldap-managerbind').show();
        $('.help-block.passport-ldap-userbind').hide();
      }
    });

    // store which button is clicked when submit
    var submittedButton;
    $('button[type="submit"]').click(function() {
      submittedButton = $(this);
    });
    $('#ldapSetting, #ldapTest').each(function() {
      $(this).submit(function()
      {
        function showMessage(formId, msg, status) {
          $('#' + formId + ' .alert').remove();

          if (!status) {
            status = 'success';
          }
          var $message = $('<p class="alert"></p>');
          $message.addClass('alert-' + status);
          $message.html(msg.replace('\n', '<br>'));
          $message.insertAfter('#' + formId + ' legend');

          if (status == 'success') {
            setTimeout(function()
            {
              $message.fadeOut({
                complete: function() {
                  $message.remove();
                }
              });
            }, 5000);
          }
        }

        var $form = $(this);
        var $id = $form.attr('id');
        var $button = submittedButton;
        var $action = $button.attr('formaction') || $form.attr('action');
        $button.attr('disabled', 'disabled');
        var jqxhr = $.post($action, $form.serialize(), function(data)
        {
          if (data.status) {
            const message = data.message || '更新しました';
            showMessage($id, message);
          } else {
            showMessage($id, data.message, 'danger');
          }
        })
        .fail(function() {
          showMessage($id, 'エラーが発生しました', 'danger');
        })
        .always(function() {
          $button.prop('disabled', false);
        });
        return false;
      });
    });
    </script>

</form>

<div class="modal test-ldap-account" id="test-ldap-account">
  <div class="modal-dialog">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <div class="modal-title">{{ t('Test LDAP Account') }}</div>
      </div>

      <div class="modal-body">

        {% include '../../../widget/passport/ldap-association-tester.html' %}

      </div><!-- /.modal-body -->

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->

  <script>
    /**
     * associate (submit the form)
     */
    function associateLdap() {
      var $form = $('#formLdapAssociationContainer > form');
      var $action = '/me/external-accounts/associateLdap';
      $form.attr('action', $action);
      $form.submit();
    }
  </script>

</div><!-- /.modal -->