weseek__growi/lib/views/widget/passport/ldap-association-tester.html

<form id="formTestLdapCredentials" method="post" class="form-horizontal" role="form">
  <div class="alert-container"></div>
  <fieldset>
    <div class="form-group">
      <label for="username" class="col-xs-3 control-label">{{ t('Username') }}</label>
      <div class="col-xs-6">
        <input class="form-control" name="loginForm[username]">
      </div>
    </div>
    <div class="form-group">
      <label for="password" class="col-xs-3 control-label">{{ t('Password') }}</label>
      <div class="col-xs-6">
        <input class="form-control col-xs-4" type="password" name="loginForm[password]">
      </div>
    </div>


  </fieldset>

  {% if showLog %}
  <fieldset>
    <h5>Logs</h5>
    <textarea id="taLogs" class="col-xs-12" rows="4" readonly></textarea>
  </fieldset>
  {% endif %}

  <fieldset class="mt-4">
    <button type="button" class="btn btn-default col-xs-offset-5 col-xs-2" onclick="testLdapCredentials()">{{ t('Test') }}</button>
  </fieldset>

  <script>
    /**
     * test association (ajax)
     */
    function testLdapCredentials() {
      function showMessage(formId, msg, status) {
        $('#' + formId + ' .alert-container .alert').remove();

        var $message = $('<p class="alert"></p>');
        $message.addClass('alert-' + status);
        $message.html(msg.replace('\n', '<br>'));
        $message.appendTo('#' + formId + '> .alert-container');

        if (status == 'success') {
          setTimeout(function()
          {
            $message.fadeOut({
              complete: function() {
                $message.remove();
              }
            });
          }, 5000);
        }
      }
      /**
       * add logs
       */
      function addLogs(formId, log) {
        const textarea = $(`#${formId} #taLogs`);
        const newLog = `${new Date()} - ${log}\n\n`;
        textarea.val(`${newLog}${textarea.val()}`);
      }

      var $form = $('#formTestLdapCredentials');
      var $action = '/_api/login/testLdap';
      var $id = $form.attr('id');
      var $button = $('button', this);
      $button.attr('disabled', 'disabled');

      var jqxhr = $.post($action, $form.serialize(), function(data)
        {
          if (!data.status) {
            showMessage($id, 'data.status not found', 'danger');
          }
          else {
            showMessage($id, data.message, data.status);
          }

          // add logs
          if ('true' === '{{showLog}}') {
            if (data.err) {
              addLogs($id, data.err);
            }
            if (data.ldapConfiguration) {
              const prettified = JSON.stringify(data.ldapConfiguration.server, undefined, 4);
              addLogs($id, `LDAP Configuration : ${prettified}`);
            }
            if (data.ldapAccountInfo) {
              const prettified = JSON.stringify(data.ldapAccountInfo, undefined, 4);
              addLogs($id, `Retrieved LDAP Account : ${prettified}`);
            }
          }
        })
        .fail(function() {
          showMessage($id, 'エラーが発生しました', 'danger');
        })
        .always(function() {
          $button.prop('disabled', false);
        });
        return false;
    }
  </script>
</form>