Require that all form fields marked 'required' are filled out before we allow config validation

This commit is contained in:
Joseph Schorr 2015-01-08 15:58:35 -05:00
parent bfd273d16f
commit 0a82f669ae
3 changed files with 33 additions and 15 deletions

View file

@ -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>

View file

@ -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 -->

View file

@ -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) {