Fix LDAP service update error

When a service is enabled, it must be disabled prior
to changing the service type, e.g change from OpenLDAP
to ActiveDirectory.

- Add check to determine if a service is already enabled
- Make two calls if service is already enabled. First to
  disable existing service. Second to enable updated
  service
- Remove toast message for ssl check and replace with
  error message which also keeps submit button disabled
  if the regex pattern is not met

Tested:
- Edge
- Safari
- Firefox
- Chrome
- IE 11

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I195eeb7d1cd3621681c18f4dd9aa4414eb079c09

1 files changed, 28 insertions, 23 deletions

diff --git a/app/access-control/controllers/ldap-controller.html b/app/access-control/controllers/ldap-controller.html
index cfa929f..21d7e9e 100644
--- a/app/access-control/controllers/ldap-controller.html
+++ b/app/access-control/controllers/ldap-controller.html
@@ -29,34 +29,36 @@
       <fieldset ng-disabled="!ldapProperties.ServiceEnabled">
         <legend class="screen-reader-offscreen">LDAP Settings</legend>
         <div class="ldap__configure-settings row column">
-          <div class="large-3 column ldap__ssl-column">
-            <label class="control-check" ng-class="{'disabled' : certificates.length < 1}">
+          <div class="large-3 column ldap__ssl-column" ng-class="{'disabled' : !ldapProperties.ServiceEnabled}">
+            <label class="control-check" ng-class="{'disabled' : (!ldapCertificate || !caCertificate) || !ldapProperties.ServiceEnabled}">
               <input id="secure-ldap-ssl" aria-labelledby="use-ssl" type="checkbox"
+                ng-change="ldap__configuration.ldap__uri.$touched = true"
                 ng-model="ldapProperties.useSSL" ng-checked="ldapProperties.useSSL"
-                ng-disabled="certificates.length < 1" />
+                ng-disabled="!ldapCertificate || !caCertificate" />
               <span class="control__indicator"></span>
               <span class="control__label" id="use-ssl">Secure LDAP using SSL</span>
             </label>
-            <div>
-              <div class="ldap__certificate-info" ng-if="ldapProperties.ServiceEnabled">
-                <p>Client certificate valid until:</p>
-                <small>
-                  {{clientCertificateExpires ? (clientCertificateExpires | localeDate) : 'none available'}}</small>
-              </div>
-            </div>
-            <div class="ldap__certificate-info" ng-if="data.ValidNotAfter='' || !ldapProperties.ServiceEnabled">
-              <span>SSL certificates must be uploaded to secure LDAP using SSL.</span>
-            </div>
-            <div class="ldap__certificate-info">
-              <a href="#/access-control/ssl-certificates">Go to SSL certificates</a>
-            </div>
+            <dl class="ldap__certificate-info" ng-if="caCertificate && ldapCertificate">
+              <dt>CA certificate valid until</dt>
+              <dd>{{caCertificate.ValidNotAfter | localeDate }}</dd>
+            </dl>
+            <dl class="ldap__certificate-info" ng-if="caCertificate && ldapCertificate">
+              <dt>LDAP certificate valid until</dt>
+              <dd>{{ldapCertificate.ValidNotAfter | localeDate }}</dd>
+            </dl>
+            <p class="ldap__certificate-info" ng-if="!ldapCertificate || !caCertificate">
+              <span>A CA certificate and LDAP certificate are required. One or more are missing.</span>
+            </p>
+            <p ng-if="!ldapCertificate || !caCertificate" class="ldap__certificate-info">
+              <a ng-class="{'disabled': !ldapProperties.ServiceEnabled}" ng-href="{{ldapProperties.ServiceEnabled ? '#/access-control/ssl-certificates' : ''}}">Go to SSL certificates</a>
+            </p>
           </div>
           <div class="large-9 columns ldap__server-info">
             <div class="column service-type-column">
               <fieldset class="ldap__server-info-service-type">
                 <legend class="content-label">Service Type</legend>
                 <label class="control-radio control__radio__label">Open LDAP
-                  <input type="radio" name="service_enabled_type" id="open-ldap" value="ldap"
+                  <input type="radio" name="service_enabled_type" id="open-ldap" value="LDAP"
                     ng-checked="ldapProperties.LDAPServiceEnabled"
                     ng-change="ldapProperties.EnabledServiceUpdated = true" ng-model="ldapProperties.EnabledServiceType"
                     required />
@@ -64,7 +66,7 @@
                 </label>
                 <label class="control-radio control__radio__label">Active directory
                   <input type="radio" name="service_enabled_type" id="active-directory"
-                    ng-change="ldapProperties.EnabledServiceUpdated = true" value="ad"
+                    ng-change="ldapProperties.EnabledServiceUpdated = true" value="ActiveDirectory"
                     ng-checked="ldapProperties.ADServiceEnabled" ng-model="ldapProperties.EnabledServiceType"
                     required />
                   <span class="control__indicator control__indicator-on control__indicator-service-type"></span>
@@ -74,11 +76,14 @@
             <div class="medium-6 large-4 columns">
               <label for="ldap__uri">Server uri</label>
               <input id="ldap__uri" name="ldap__uri" type="text"
-                ng-change="ldapProperties.ServiceAddressesUpdated = true" ng-model="ldapProperties.ServiceAddresses[0]"
+                ng-change="ldapProperties.ServiceAddressesUpdated = true"
+                ng-model="ldapProperties.ServiceAddresses[0]"
+                ng-pattern="ldapProperties.useSSL ? '^ldaps://.*' : '^ldap://.*'"
                 required />
               <div ng-messages="ldap__configuration.ldap__uri.$error" class="form-error"
-                ng-class="{'visible' : ldap__configuration.ldap__uri.$touched || submitted}">
+                ng-class="{'visible' : ldap__configuration.ldap__uri.$touched || submitted}" role="alert">
                 <p ng-message="required">Field is required</p>
+                <p ng-message="pattern">Must start with {{ldapProperties.useSSL ? 'ldaps://' : 'ldap://'}}</p>
               </div>
             </div>
             <div class="medium-6 large-4 columns">
@@ -86,7 +91,7 @@
               <input id="ldap__bind__dn" name="ldap__bind__dn" type="text"
                 ng-change="ldapProperties.UsernameUpdated = true" ng-model="ldapProperties.Username" required />
               <div ng-messages="ldap__configuration.ldap__bind__dn.$error" class="form-error"
-                ng-class="{'visible' : ldap__configuration.ldap__bind__dn.$touched || submitted}">
+                ng-class="{'visible' : ldap__configuration.ldap__bind__dn.$touched || submitted}" role="alert">
                 <p ng-message="required">Field is required</p>
               </div>
             </div>
@@ -101,7 +106,7 @@
                 <span ng-show="togglePassword">Hide</span>
               </button>
               <div ng-messages="ldap__configuration.ldap__bind_pw.$error" class="form-error"
-                ng-class="{'visible' : ldap__configuration.ldap__bind_pw.$touched || submitted}">
+                ng-class="{'visible' : ldap__configuration.ldap__bind_pw.$touched || submitted}" role="alert">
                 <p ng-message="required">Field is required</p>
               </div>
             </div>
@@ -111,7 +116,7 @@
                 ng-change="ldapProperties.BaseDistinguishedNamesUpdated = true"
                 ng-model="ldapProperties.BaseDistinguishedNames[0]" required />
               <div ng-messages="ldap__configuration.ldap__base__dn.$error" class="form-error"
-                ng-class="{'visible' : ldap__configuration.ldap__base__dn.$touched || submitted}">
+                ng-class="{'visible' : ldap__configuration.ldap__base__dn.$touched || submitted}" role="alert">
                 <p ng-message="required">Field is required</p>
               </div>
             </div>