ensure to use testing form for LDAP association as a widget

lib/routes/me.js

@@ -251,6 +251,10 @@ module.exports = function(crowi, app) {
     const loginForm = req.body.loginForm;
 
     passport.authenticate('ldapauth', (err, user, info) => {
+      if (res.headersSent) {  // dirty hack -- 2017.09.25
+        return;               // cz: somehow passport.authenticate called twice when ECONNREFUSED error occurred
+      }
+
       if (err) {  // DB Error
         console.log('LDAP Server Error: ', err);
         return redirectWithFlash('warningMessage', 'LDAP Server Error occured.');
@@ -293,6 +297,10 @@ module.exports = function(crowi, app) {
     const loginForm = req.body.loginForm;
 
     passport.authenticate('ldapauth', (err, user, info) => {
+      if (res.headersSent) {  // dirty hack -- 2017.09.25
+        return;               // cz: somehow passport.authenticate called twice when ECONNREFUSED error occurred
+      }
+
       if (err) {  // DB Error
         console.log('LDAP Server Error: ', err);
         return res.json({

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

@@ -129,84 +129,84 @@
         <button type="submit" class="btn btn-primary">{# the first element is the default button to submit #}
           {{ t('Update') }}
         </button>
-        <button type="submit" formaction="/_api/admin/security/passport-ldap-test"
+        <button type="submit"
             class="btn btn-default passport-ldap-hide-when-disabled"
+            data-target="#test-ldap-account" data-toggle="modal"
             {%if !isLdapEnabled %}style="display: none;"{% endif %}>
-          (TBD) Test to bind
+
+          Test Saved Configuration
         </button>
       </div>
     </div>
   </fieldset>
   <input type="hidden" name="_csrf" value="{{ csrf() }}">
 
-</form>
+  <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);
+      }
+    });
 
-<script>
-  // switch display according to on / off of radio buttons
-  $('input[name="{{nameForIsLdapEnabled}}"]:radio').change(function() {
-    const isEnabled = ($(this).val() === "true");
+    // switch display according to on / off of radio buttons
+    $('input[name="{{nameForIsUserBind}}"]:radio').change(function() {
+      const isUserBind = ($(this).val() === "true");
 
-    if (isEnabled) {
-      $('.passport-ldap-hide-when-disabled').show(400);
-    }
-    else {
-      $('.passport-ldap-hide-when-disabled').hide(400);
-    }
-  });
+      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();
+      }
+    });
 
-  // switch display according to on / off of radio buttons
-  $('input[name="{{nameForIsUserBind}}"]:radio').change(function() {
-    const isUserBind = ($(this).val() === "true");
+    // 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 (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);
+          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)
+        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 || '更新しました';
@@ -220,8 +220,42 @@
         })
         .always(function() {
           $button.prop('disabled', false);
+        });
+        return false;
       });
-      return false;
     });
-  });
-</script>
+    </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>
+        <h4 class="modal-title">{{ t('Test LDAP Account') }}</h4>
+      </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 -->

lib/views/me/external-accounts.html

@@ -138,32 +138,14 @@
 
           <div class="tab-content passport-settings">
             <div id="passport-ldap" class="tab-pane active" role="tabpanel" >
-              <div id="form-box">
-                <form id="formLdapAssociation" 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>
-
-                    <div class="form-group">
-                      <div class="col-xs-12 text-right">
-                        <button type="button" class="btn btn-default" onclick="testAssociateLdap()">{{ t('Test') }}</button>
-                        <button type="button" class="btn btn-primary" onclick="associateLdap()">{{ t('Add') }}</button>
-                      </div>
-                    </div>
-
-                  </fieldset>
-                </form>
+              <div id="formLdapAssociationContainer">
+                {% include '../widget/passport/ldap-association-tester.html' %}
+                <div class="clearfix">
+                  <button type="button" class="btn btn-primary pull-right" onclick="associateLdap()">
+                    <i class="fa fa-plus-circle" aria-hidden="true"></i>
+                    {{ t('Add') }}
+                  </button>
+                </div>
               </div>
             </div>
 
@@ -195,59 +177,11 @@
        * associate (submit the form)
        */
       function associateLdap() {
-        var $form = $('#formLdapAssociation');
+        var $form = $('#formLdapAssociationContainer > form');
         var $action = '/me/external-accounts/associateLdap';
         $form.attr('action', $action);
         $form.submit();
       }
-
-      /**
-       * test association (ajax)
-       */
-      function testAssociateLdap() {
-        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);
-          }
-        }
-
-        var $form = $('#formLdapAssociation');
-        var $action = '/_api/me/external-accounts/testAssociateLdap';
-        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);
-            }
-          })
-          .fail(function() {
-            showMessage($id, 'エラーが発生しました', 'danger');
-          })
-          .always(function() {
-            $button.prop('disabled', false);
-          });
-          return false;
-      }
     </script>
 
   </div><!-- /.modal -->

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

@@ -0,0 +1,72 @@
+<form id="formLdapAssociation" 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>
+
+    <div class="form-group">
+      <button type="button" class="btn btn-default col-xs-offset-5 col-xs-2" onclick="testAssociateLdap()">{{ t('Test') }}</button>
+    </div>
+
+  </fieldset>
+
+  <script>
+    /**
+     * test association (ajax)
+     */
+    function testAssociateLdap() {
+      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);
+        }
+      }
+
+      var $form = $('#formLdapAssociation');
+      var $action = '/_api/me/external-accounts/testAssociateLdap';
+      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);
+          }
+        })
+        .fail(function() {
+          showMessage($id, 'エラーが発生しました', 'danger');
+        })
+        .always(function() {
+          $button.prop('disabled', false);
+        });
+        return false;
+    }
+  </script>
+</form>