Portainer
/
portainer
mirror of https://github.com/portainer/portainer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ux): update form input validation (#2035)

pull/2036/head
Anthony Lapenna 2018-07-11 16:22:02 +02:00 committed by GitHub
parent cdf79c731b
commit e156aa202e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 57 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/docker/components/imageRegistry/porImageRegistry.html
View File

@ -13,7 +13,7 @@
</div>
</div>
<div class="form-group" ng-show="$ctrl.form.image_name.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="$ctrl.form.image_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Image name is required.</p>
</div>

14
app/extensions/storidge/views/profiles/create/createprofile.html
View File

@ -18,7 +18,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeCreateProfileForm.profile_name.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeCreateProfileForm.profile_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -36,7 +36,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeCreateProfileForm.profile_directory.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeCreateProfileForm.profile_directory.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -51,7 +51,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeCreateProfileForm.profile_capacity.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeCreateProfileForm.profile_capacity.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for capacity: 1.</p>
@ -117,7 +117,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeCreateProfileForm.min_iops.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeCreateProfileForm.min_iops.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Min IOPS.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Min IOPS: 30.</p>
@ -126,7 +126,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeCreateProfileForm.max_iops.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeCreateProfileForm.max_iops.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Max IOPS.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Max IOPS: 30.</p>
@ -162,7 +162,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeCreateProfileForm.min_bandwidth.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeCreateProfileForm.min_bandwidth.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Min bandwidth.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Min bandwidth: 1.</p>
@ -171,7 +171,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeCreateProfileForm.max_bandwidth.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeCreateProfileForm.max_bandwidth.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Max bandwidth.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Max bandwidth: 1.</p>

12
app/extensions/storidge/views/profiles/edit/profile.html
View File

@ -29,7 +29,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeUpdateProfileForm.profile_directory.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeUpdateProfileForm.profile_directory.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -44,7 +44,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeUpdateProfileForm.profile_capacity.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeUpdateProfileForm.profile_capacity.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for capacity: 1.</p>
@ -110,7 +110,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeUpdateProfileForm.min_iops.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeUpdateProfileForm.min_iops.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Min IOPS.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Min IOPS: 30.</p>
@ -119,7 +119,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeUpdateProfileForm.max_iops.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeUpdateProfileForm.max_iops.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Max IOPS.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Max IOPS: 30.</p>
@ -155,7 +155,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeUpdateProfileForm.min_bandwidth.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeUpdateProfileForm.min_bandwidth.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Min bandwidth.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Min bandwidth: 1.</p>
@ -164,7 +164,7 @@
</div>
</div>
<div class="form-group" ng-show="storidgeUpdateProfileForm.max_bandwidth.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="storidgeUpdateProfileForm.max_bandwidth.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> A value is required for Max bandwidth.</p>
<p ng-message="min"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Minimum value for Max bandwidth: 1.</p>

2
app/portainer/components/forms/group-form/groupForm.html
View File

@ -7,7 +7,7 @@
</div>
</div>
<div class="form-group" ng-show="endpointGroupForm.group_name.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="endpointGroupForm.group_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>

6
app/portainer/components/forms/template-form/templateForm.html
View File

@ -7,7 +7,7 @@
</div>
</div>
<div class="form-group" ng-show="templateForm.template_title.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="templateForm.template_title.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -22,7 +22,7 @@
</div>
</div>
<div class="form-group" ng-show="templateForm.template_description.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="templateForm.template_description.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -172,7 +172,7 @@
</div>
</div>
<div class="form-group" ng-show="templateForm.template_repository_url.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="templateForm.template_repository_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>

10
app/portainer/views/endpoints/create/createendpoint.html
View File

@ -102,7 +102,7 @@
</div>
</div>
<div class="form-group" ng-show="endpointCreationForm.container_name.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="endpointCreationForm.container_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -122,7 +122,7 @@
</div>
</div>
<div class="form-group" ng-show="endpointCreationForm.endpoint_url.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="endpointCreationForm.endpoint_url.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -153,7 +153,7 @@
</div>
</div>
<div class="form-group" ng-show="endpointCreationForm.azure_credential_appid.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="endpointCreationForm.azure_credential_appid.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -168,7 +168,7 @@
</div>
</div>
<div class="form-group" ng-show="endpointCreationForm.azure_credential_tenantid.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="endpointCreationForm.azure_credential_tenantid.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>
@ -183,7 +183,7 @@
</div>
</div>
<div class="form-group" ng-show="endpointCreationForm.azure_credential_authkey.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="endpointCreationForm.azure_credential_authkey.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
</div>

7
app/portainer/views/tags/tags.html
View File

@ -19,14 +19,15 @@
<label for="name" class="col-sm-2 control-label text-left">
Name
</label>
<div class="col-sm-8">
<input type="text" class="form-control" name="name" ng-model="formValues.Name" placeholder="org/acme" required auto-focus />
<div class="col-sm-10">
<input type="text" class="form-control" name="name" ng-model="formValues.Name" ng-change="checkNameValidity(tagCreationForm)" placeholder="org/acme" required auto-focus />
</div>
</div>
<div class="form-group" ng-show="tagCreationForm.name.$invalid">
<div class="col-sm-12 small text-danger">
<div class="col-sm-12 small text-warning">
<div ng-messages="tagCreationForm.name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="validName"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This tag already exists.</p>
</div>
</div>
</div>

11
app/portainer/views/tags/tagsController.js
View File

@ -10,6 +10,17 @@ function ($scope, $state, TagService, Notifications) {
Name: ''
};
$scope.checkNameValidity = function(form) {
var valid = true;
for (var i = 0; i < $scope.tags.length; i++) {
if ($scope.formValues.Name === $scope.tags[i].Name) {
valid = false;
break;
}
}
form.name.$setValidity('validName', valid);
};
$scope.removeAction = function (selectedItems) {
var actionCount = selectedItems.length;
angular.forEach(selectedItems, function (tag) {

22
app/portainer/views/teams/teams.html
View File

@ -13,14 +13,19 @@
<rd-widget-header icon="fa-plus" title-text="Add a new team">
</rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<form class="form-horizontal" name="teamCreationForm" ng-submit="addTeam()">
<!-- name-input -->
<div class="form-group">
<label for="teamname" class="col-sm-1 control-label text-left">Name</label>
<div class="col-sm-9">
<div class="input-group">
<input type="text" class="form-control" id="teamname" ng-model="formValues.Name" ng-change="checkNameValidity()" placeholder="e.g. development" auto-focus>
<span class="input-group-addon"><i ng-class="{true: 'fa fa-check green-icon', false: 'fa fa-times red-icon'}[state.validName]" aria-hidden="true"></i></span>
<label for="team_name" class="col-sm-2 control-label text-left">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="team_name" name="team_name" ng-model="formValues.Name" ng-change="checkNameValidity(teamCreationForm)" placeholder="e.g. development" auto-focus required>
</div>
</div>
<div class="form-group" ng-show="teamCreationForm.team_name.$invalid">
<div class="col-sm-12 small text-warning">
<div ng-messages="teamCreationForm.team_name.$error">
<p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
<p ng-message="validName"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This team already exists.</p>
</div>
</div>
</div>
@ -49,13 +54,10 @@
<!-- !team-leaders -->
<div class="form-group">
<div class="col-sm-12">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !state.validName || formValues.Name === ''" ng-click="addTeam()" button-spinner="state.actionInProgress">
<button type="button" class="btn btn-primary btn-sm" ng-disabled="state.actionInProgress || !teamCreationForm.$valid" ng-click="addTeam()" button-spinner="state.actionInProgress">
<span ng-hide="state.actionInProgress"><i class="fa fa-plus" aria-hidden="true"></i> Create team</span>
<span ng-show="state.actionInProgress">Creating team...</span>
</button>
<span class="text-danger" ng-if="state.teamCreationError" style="margin: 5px;">
<i class="fa fa-exclamation-circle" aria-hidden="true"></i> {{ state.teamCreationError }}
</span>
</div>
</div>
</form>

10
app/portainer/views/teams/teamsController.js
View File

@ -2,8 +2,6 @@ angular.module('portainer.app')
.controller('TeamsController', ['$q', '$scope', '$state', 'TeamService', 'UserService', 'ModalService', 'Notifications', 'Authentication',
function ($q, $scope, $state, TeamService, UserService, ModalService, Notifications, Authentication) {
$scope.state = {
userGroupGroupCreationError: '',
validName: false,
actionInProgress: false
};
@ -12,7 +10,7 @@ function ($q, $scope, $state, TeamService, UserService, ModalService, Notificati
Leaders: []
};
$scope.checkNameValidity = function() {
$scope.checkNameValidity = function(form) {
var valid = true;
for (var i = 0; i < $scope.teams.length; i++) {
if ($scope.formValues.Name === $scope.teams[i].Name) {
@ -20,19 +18,17 @@ function ($q, $scope, $state, TeamService, UserService, ModalService, Notificati
break;
}
}
$scope.state.validName = valid;
$scope.state.teamCreationError = valid ? '' : 'Team name already existing';
form.team_name.$setValidity('validName', valid);
};
$scope.addTeam = function() {
$scope.state.actionInProgress = true;
$scope.state.teamCreationError = '';
var teamName = $scope.formValues.Name;
var leaderIds = [];
angular.forEach($scope.formValues.Leaders, function(user) {
leaderIds.push(user.Id);
});
$scope.state.actionInProgress = true;
TeamService.createTeam(teamName, leaderIds)
.then(function success(data) {
Notifications.success('Team successfully created', teamName);

4
assets/css/app.css
View File

@ -123,6 +123,10 @@ a[ng-click]{
color: #337ab7;
}
.text-warning {
color: #f0ad4e;
}
.widget .widget-body table tbody .image-tag {
font-size: 90% !important;
margin-right: 5px;