From 0a82f669ae53754011e97c61aafe4c7015b9b7b1 Mon Sep 17 00:00:00 2001
From: Joseph Schorr <joseph.schorr@coreos.com>
Date: Thu, 8 Jan 2015 15:58:35 -0500
Subject: [PATCH] Require that all form fields marked 'required' are filled out
 before we allow config validation

---
 .../config/config-contact-field.html          |  4 ++-
 .../directives/config/config-setup-tool.html  | 30 ++++++++++++-------
 static/js/core-config-setup.js                | 14 +++++++--
 3 files changed, 33 insertions(+), 15 deletions(-)

diff --git a/static/directives/config/config-contact-field.html b/static/directives/config/config-contact-field.html
index ce79a405c..9da7dc158 100644
--- a/static/directives/config/config-contact-field.html
+++ b/static/directives/config/config-contact-field.html
@@ -37,7 +37,9 @@
     </div>
   </td>
   <td>
-    <input class="form-control" placeholder="{{ getPlaceholder(kind) }}" ng-model="value">
+    <form>
+      <input class="form-control" placeholder="{{ getPlaceholder(kind) }}" ng-model="value">
+    </form>
   </td>
   </tr>
   </table>
diff --git a/static/directives/config/config-setup-tool.html b/static/directives/config/config-setup-tool.html
index bd39b3f60..62311d78d 100644
--- a/static/directives/config/config-setup-tool.html
+++ b/static/directives/config/config-setup-tool.html
@@ -1,6 +1,8 @@
 <div class="config-setup-tool-element">
   <div class="quay-spinner" ng-if="!config"></div>
   <div ng-show="config && config['SERVER_HOSTNAME']">
+    <form id="configform" name="configform">
+
     <!-- Basic Configuration -->
     <div class="co-panel">
       <div class="co-panel-heading">
@@ -78,7 +80,7 @@
                  A valid SSL certificate and private key files are required to use this option.
               </div>
 
-              <table class="config-table"  ng-show="config.PREFERRED_URL_SCHEME == 'https'">
+              <table class="config-table"  ng-if="config.PREFERRED_URL_SCHEME == 'https'">
                 <tr>
                   <td class="non-input">Certificate:</td>
                   <td>
@@ -206,7 +208,7 @@
           <label for="ftmail">Enable E-mails</label>
         </div>
 
-        <table class="config-table" ng-show="config.FEATURE_MAILING">
+        <table class="config-table" ng-if="config.FEATURE_MAILING">
           <tr>
             <td>SMTP Server:</td>
             <td>
@@ -249,7 +251,7 @@
                 <label for="uma">Requires Authentication</label>
               </div>
 
-              <table class="config-table" ng-show="config.MAIL_USE_AUTH">
+              <table class="config-table" ng-if="config.MAIL_USE_AUTH">
                 <tr>
                   <td>Username:</td>
                   <td>
@@ -299,7 +301,7 @@
         </table>
 
 
-        <table class="config-table" ng-show="config.AUTHENTICATION_TYPE == 'LDAP'">
+        <table class="config-table" ng-if="config.AUTHENTICATION_TYPE == 'LDAP'">
           <tr>
             <td>LDAP URI:</td>
             <td><span class="config-string-field" binding="config.LDAP_URI"></span></td>
@@ -356,7 +358,7 @@
           <label for="ftghl">Enable Github Authentication</label>
         </div>
 
-        <table class="config-table" ng-show="config.FEATURE_GITHUB_LOGIN">
+        <table class="config-table" ng-if="config.FEATURE_GITHUB_LOGIN">
           <tr>
             <td>Github:</td>
             <td>
@@ -366,7 +368,7 @@
               </select>
             </td>
           </tr>
-          <tr ng-show="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
+          <tr ng-if="mapped.GITHUB_LOGIN_KIND == 'enterprise'">
             <td>Github Endpoint:</td>
             <td>
               <span class="config-string-field"
@@ -422,7 +424,7 @@
           <label for="ftgoa">Enable Google Authentication</label>
         </div>
 
-        <table class="config-table" ng-show="config.FEATURE_GOOGLE_LOGIN">
+        <table class="config-table" ng-if="config.FEATURE_GOOGLE_LOGIN">
           <tr>
             <td>OAuth Client ID:</td>
             <td>
@@ -465,7 +467,7 @@
 
 
     <!-- Github Trigger -->
-    <div class="co-panel" ng-show="config.FEATURE_BUILD_SUPPORT" style="margin-top: 20px;">
+    <div class="co-panel" ng-if="config.FEATURE_BUILD_SUPPORT" style="margin-top: 20px;">
       <div class="co-panel-heading">
         <i class="fa fa-github"></i> Github (Enterprise) Build Triggers
       </div>
@@ -488,7 +490,7 @@
           <label for="ftgb">Enable Github Triggers</label>
         </div>
 
-        <table class="config-table" ng-show="config.FEATURE_GITHUB_BUILD">
+        <table class="config-table" ng-if="config.FEATURE_GITHUB_BUILD">
           <tr>
             <td>Github:</td>
             <td>
@@ -498,7 +500,7 @@
               </select>
             </td>
           </tr>
-          <tr ng-show="mapped.GITHUB_TRIGGER_KIND == 'enterprise'">
+          <tr ng-if="mapped.GITHUB_TRIGGER_KIND == 'enterprise'">
             <td>Github Endpoint:</td>
             <td>
               <span class="config-string-field"
@@ -528,15 +530,21 @@
         </table>
       </div>
     </div> <!-- /Github Trigger -->
+    </form>
 
     <!-- Save Bar -->
     <div class="cor-floating-bottom-bar">
       <button class="btn" ng-class="mapped.$hasChanges ? 'btn-primary' : 'btn-success'"
-              ng-click="validateAndSave()">
+              ng-click="checkValidateAndSave()" ng-show="configform.$valid">
         <i class="fa fa-lg" ng-class="mapped.$hasChanges ? 'fa-dot-circle-o' : 'fa-check-circle'"></i>
         <span ng-if="mapped.$hasChanges">Save Configuration Changes</span>
         <span ng-if="!mapped.$hasChanges">Configuration Saved</span>
       </button>
+      <button class="btn btn-warning" ng-click="checkValidateAndSave()" ng-show="!configform.$valid"
+              ng-click="checkValidateAndSave()">
+        <i class="fa fa-lg fa-sort"></i>
+        {{ configform.$error['required'].length }} configuration field<span ng-show="configform.$error['required'].length != 1">s</span> remaining
+      </button>
     </div>
 
     <!-- Modal message dialog -->
diff --git a/static/js/core-config-setup.js b/static/js/core-config-setup.js
index d2669bb12..e6a79d4b6 100644
--- a/static/js/core-config-setup.js
+++ b/static/js/core-config-setup.js
@@ -127,6 +127,16 @@ angular.module("core-config-setup", ['angularFileUpload'])
           }, ApiService.errorDisplay('Could not validate configuration. Please report this error.'));
         };
 
+        $scope.checkValidateAndSave = function() {
+          if ($scope.configform.$valid) {
+            $scope.validateAndSave();
+            return;
+          }
+
+          $element.find("input.ng-invalid:first")[0].scrollIntoView();
+          $element.find("input.ng-invalid:first").focus();
+        };
+
         $scope.validateAndSave = function() {
           $scope.savingConfiguration = false;
           $scope.validating = $scope.getServices($scope.config);
@@ -593,9 +603,7 @@ angular.module("core-config-setup", ['angularFileUpload'])
         }, true);
 
         $scope.$watch('binding', function(binding) {
-          if (!binding) { return; }
-
-          var current = binding;
+          var current = binding || [];
           var items = [];
           var itemHash = '';
           for (var i = 0; i < current.length; ++i) {