From f0e2a2e0bb427cbd179e94caba3cb684263607b1 Mon Sep 17 00:00:00 2001
From: Thorsten Eckel <te@znuny.com>
Date: Wed, 10 May 2017 09:43:16 +0200
Subject: [PATCH] Working on issue #981 - Improved UX: SSL selection should
 only be shown for LDAPS hostnames. Toggeling the enabled state confuses
 theuser.

---
 .../app/controllers/_integration/ldap.coffee  | 30 ++++++++++++-------
 .../integration/ldap_ssl_verify_row.jst.eco   |  3 ++
 .../app/views/integration/ldap_wizard.jst.eco |  3 --
 3 files changed, 23 insertions(+), 13 deletions(-)
 create mode 100644 app/assets/javascripts/app/views/integration/ldap_ssl_verify_row.jst.eco

diff --git a/app/assets/javascripts/app/controllers/_integration/ldap.coffee b/app/assets/javascripts/app/controllers/_integration/ldap.coffee
index bdc280e56..6ad15ea1c 100644
--- a/app/assets/javascripts/app/controllers/_integration/ldap.coffee
+++ b/app/assets/javascripts/app/controllers/_integration/ldap.coffee
@@ -152,7 +152,7 @@ class ConnectionWizard extends App.WizardModal
     'click .js-userMappingForm .js-add': 'addUserMapping'
     'click .js-groupRoleForm .js-add':   'addGroupRoleMapping'
     'click .js-goToSlide':               'goToSlide'
-    'input .js-hostUrl':                 'checkSslVerifyDisabled'
+    'input .js-hostUrl':                 'sslVerifyChange'
 
   elements:
     '.modal-body': 'body'
@@ -205,13 +205,27 @@ class ConnectionWizard extends App.WizardModal
 
   showHost: =>
     @$('.js-discover input[name="host_url"]').val(@wizardConfig.host_url)
-    @showSslVerify()
+    @checkSslVerifyVisibility(@wizardConfig.host_url)
+
+  sslVerifyChange: (e) =>
+    @checkSslVerifyVisibility($(e.currentTarget).val())
+
+  checkSslVerifyVisibility: (host_url) =>
+    el     = @$('.js-discover .js-sslVerify')
+    exists = el.length
 
-  showSslVerify: =>
     disabled = true
-    if @wizardConfig.host_url && @wizardConfig.host_url.startsWith('ldaps')
+    if host_url && host_url.startsWith('ldaps')
       disabled = false
 
+    if exists && disabled
+      el.parent().remove()
+    else if !exists && !disabled
+      @$('.js-discover tbody tr').last().after(@buildRowSslVerify())
+
+  buildRowSslVerify: =>
+    el = $(App.view('integration/ldap_ssl_verify_row')())
+
     ssl_verify = true
     if typeof @wizardConfig.ssl_verify != 'undefined'
       ssl_verify = @wizardConfig.ssl_verify
@@ -221,15 +235,11 @@ class ConnectionWizard extends App.WizardModal
       null: false
       options: { true: 'yes', false: 'no' }
       default: ssl_verify
-      disabled: disabled
       translate: true
       class: 'form-control form-control--small'
     )
-    @$('.js-discover .js-sslVerify').html sslVerifyElement
-
-  checkSslVerifyDisabled: (e) =>
-    enabled = $(e.currentTarget).val().startsWith('ldaps')
-    @$('.js-discover .js-sslVerify select[name="ssl_verify"]').prop('disabled', !enabled)
+    el.find('.js-sslVerify').html sslVerifyElement
+    el
 
   discover: (e) =>
     e.preventDefault()
diff --git a/app/assets/javascripts/app/views/integration/ldap_ssl_verify_row.jst.eco b/app/assets/javascripts/app/views/integration/ldap_ssl_verify_row.jst.eco
new file mode 100644
index 000000000..5746838eb
--- /dev/null
+++ b/app/assets/javascripts/app/views/integration/ldap_ssl_verify_row.jst.eco
@@ -0,0 +1,3 @@
+<tr>
+  <td class="settings-list-row-control"><%- @T('SSL verification') %>
+  <td class="settings-list-control-cell js-sslVerify">
diff --git a/app/assets/javascripts/app/views/integration/ldap_wizard.jst.eco b/app/assets/javascripts/app/views/integration/ldap_wizard.jst.eco
index ce5ee533a..b09550537 100644
--- a/app/assets/javascripts/app/views/integration/ldap_wizard.jst.eco
+++ b/app/assets/javascripts/app/views/integration/ldap_wizard.jst.eco
@@ -20,9 +20,6 @@
             <tr>
               <td class="settings-list-row-control"><%- @T('Host') %>
               <td class="settings-list-control-cell"><input type="text" name="host_url" class="form-control form-control--small js-hostUrl" value="" placeholder="ldaps://ldap.example.com" autocomplete="new-password">
-            <tr>
-              <td class="settings-list-row-control"><%- @T('SSL verification') %>
-              <td class="settings-list-control-cell js-sslVerify">
           </tbody>
         </table>
       </div>