updates for validation logicals and i18n modules.

This commit is contained in:
kunw 2016-05-14 19:28:15 +08:00
parent e65b08b86f
commit d5eb08dc81
14 changed files with 115 additions and 62 deletions

View File

@ -16,7 +16,7 @@ body {
padding: 15px 15px 15px;
margin: 20px 0 20px 0;
background-color: #FFFFFF;
height: 257px;
height: 277px;
}
.up-section h4 label {

View File

@ -34,11 +34,9 @@
font-size: 14pt;
}
.css-form input .ng-valid .ng-submitted {
border-color: black;
}
.css-form input .ng-invalid .ng-submitted {
.css-form input.ng-invalid.ng-dirty {
border-color: red;
}

View File

@ -28,7 +28,7 @@
function save(pm) {
if(pm && angular.isDefined(pm.username)) {
AddProjectMemberService(vm.projectId, vm.optRole, vm.username)
AddProjectMemberService(vm.projectId, vm.optRole, pm.username)
.success(addProjectMemberComplete)
.error(addProjectMemberFailed);
vm.username = "";

View File

@ -5,10 +5,10 @@
<div class="form-group col-md-6">
<input type="text" class="form-control" placeholder="// 'project_name' | tr //" ng-model="p.projectName" name="uProjectName" ng-change="vm.reset()" required>
<div class="error-message">
<div ng-messages="form.$dirty && form.uProjectName.$error">
<div ng-messages="form.$dirty && form.uProjectName.$error" ng-if="form.uProjectName.$touched">
<span ng-message="required">Project name is required.</span>
</div>
<span ng-show="vm.hasError">// vm.errorMessage //</span>
<span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
</div>
</div>
<div class="form-group">
@ -20,7 +20,7 @@
<form>
<div class="form-group">
<button type="button" class="btn btn-default" ng-click="vm.cancel(form)">// 'cancel' | tr //</button>
<button type="button" class="btn btn-primary" ng-click="vm.addProject(p)">// 'save' | tr //</button>
<button type="button" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="vm.addProject(p)">// 'save' | tr //</button>
</div>
</form>
</div>

View File

@ -34,7 +34,6 @@
}
function addProjectSuccess(data, status) {
vm.isOpen = false;
vm.projectName = "";
vm.isPublic = false;
$scope.$emit('addedSuccess', true);
@ -43,7 +42,11 @@
function addProjectFailed(data, status) {
if(status === 409) {
vm.hasError = true;
vm.errorMessage = 'Project already exists.';
vm.errorMessage = 'project_already_exist';
}
if(status == 500) {
vm.hasError = true;
vm.errorMessage = 'project_name_is_invalid';
}
console.log('Failed to add project:' + status);
}

View File

@ -5,9 +5,9 @@
.module('harbor.repository')
.directive('listRepository', listRepository);
ListRepositoryController.$inject = ['$scope', 'ListRepositoryService', 'DeleteRepositoryService', 'nameFilter', '$routeParams'];
ListRepositoryController.$inject = ['$scope', 'ListRepositoryService', 'DeleteRepositoryService', '$routeParams', '$filter', 'trFilter'];
function ListRepositoryController($scope, ListRepositoryService, DeleteRepositoryService, nameFilter, $routeParams) {
function ListRepositoryController($scope, ListRepositoryService, DeleteRepositoryService, $routeParams, $filter, trFilter) {
var vm = this;
vm.filterInput = "";
@ -58,10 +58,8 @@
function deleteByRepo(repoName) {
vm.repoName = repoName;
vm.tag = '';
vm.modalTitle = 'Delete repository - ' + repoName;
vm.modalMessage = 'After deleting the associated tags with the repository will be deleted together.<br/>' +
'And the corresponding image will be removed from the system.<br/>' +
'<br/>Delete this "' + repoName + '" repository now?';
vm.modalTitle = $filter('tr')('alert_delete_repo_title', [repoName]);
vm.modalMessage = $filter('tr')('alert_delete_repo', [repoName]);
}
function deleteImage() {

View File

@ -2,10 +2,10 @@
<div class="panel-body">
<table class="repository-table">
<thead>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> Tag</th>
<th width="30%">Image Details</th>
<th width="40%">Pull Command</th>
<th width="10%">Operation</th>
<th width="20%"><span class="glyphicon glyphicon-tags"></span> // 'tag' | tr //</th>
<th width="30%">// 'image_details' | tr //</th>
<th width="40%">// 'pull_command' | tr //</th>
<th width="10%">// 'operation' | tr //</th>
</thead>
<tbody>
<tr ng-repeat="tag in vm.tags">

View File

@ -6,9 +6,9 @@
.module('harbor.repository')
.directive('listTag', listTag);
ListTagController.$inject = ['$scope', 'ListTagService'];
ListTagController.$inject = ['$scope', 'ListTagService', '$filter', 'trFilter'];
function ListTagController($scope, ListTagService) {
function ListTagController($scope, ListTagService, $filter, trFilter) {
var vm = this;
vm.tags = [];
@ -37,15 +37,13 @@
function deleteByTag(e) {
$scope.$emit('tag', e.tag);
$scope.$emit('repoName', e.repoName);
$scope.$emit('modalTitle', 'Delete tag - ' + e.tag);
$scope.$emit('modalTitle', $filter('tr')('alert_delete_tag_title', [e.tag]));
var message;
if(vm.tags.length == 1) {
message = 'After deleting the associated repository with the tag will be deleted together,<br/>' +
'because a repository contains at least one tag. And the corresponding image will be removed from the system.<br/>' +
'<br/>Delete this "' + e.tag + '" tag now?';
message = $filter('tr')('alert_delete_last_tag', [e.tag]);
}else {
message = 'Delete this "' + e.tag + '" tag now?';
message = $filter('tr')('alert_delete_tag', [e.tag]);
}
$scope.$emit('modalMessage', message);

View File

@ -1,9 +1,9 @@
<form name="form" class="form-horizontal" ng-submit="form.$valid" novalidate>
<form name="form" class="form-horizontal css-form" ng-submit="form.$valid" novalidate>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input id="username" type="text" class="form-control" placeholder="// 'username_email' | tr //" name="uPrincipal" ng-change="vm.reset()" ng-model-options="{ updateOn: 'blur' }" ng-model="user.principal" required>
<input id="username" type="text" class="form-control" placeholder="// 'username_email' | tr //" name="uPrincipal" ng-change="vm.reset()" ng-model="user.principal" required>
<div class="error-message">
<div ng-messages="form.$submitted && form.uPrincipal.$error && form.uPrincipal.$error">
<div ng-messages="form.uPrincipal.$error" ng-if="form.uPrincipal.$touched">
<span ng-message="required">// 'username_is_required' | tr //</span>
</div>
</div>
@ -11,9 +11,9 @@
</div>
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<input type="password" class="form-control" placeholder="// 'password' | tr //" name="uPassword" ng-change="vm.reset()" ng-model-options="{ updateOn: 'blur' }" ng-model="user.password" required>
<input type="password" class="form-control" placeholder="// 'password' | tr //" name="uPassword" ng-change="vm.reset()" ng-model="user.password" required>
<div class="error-message">
<div ng-messages="form.$submitted && form.uPrincipal.$error && form.uPassword.$error">
<div ng-messages="form.uPassword.$error" ng-if="form.uPassword.$touched">
<span ng-message="required">// 'password_is_required' | tr //</span>
</div>
<span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
@ -23,7 +23,7 @@
<div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<div class="pull-right">
<button class="btn btn-default" ng-click="vm.doSignIn(user)">// 'sign_in' | tr //</button>
<button class="btn btn-default" ng-disabled="form.$invalid" ng-click="vm.doSignIn(user)">// 'sign_in' | tr //</button>
<button class="btn btn-success" ng-click="vm.doSignUp()">// 'sign_up' | tr //</button>
</div>
</div>

View File

@ -24,12 +24,18 @@
function tr(I18nService) {
return tr;
function tr(label) {
function tr(label, params) {
var currentLanguage = I18nService().getCurrentLanguage();
var result = '';
if(label && label.length > 0){
return I18nService().getValue(label, currentLanguage);
result = I18nService().getValue(label, currentLanguage);
}
return '';
if(angular.isArray(params)) {
angular.forEach(params, function(value, index) {
result = result.replace('$' + index, params[index]);
});
}
return result;
}
}

View File

@ -398,5 +398,55 @@ var global_messages = {
'username_email': {
'en-US': 'Username/Email',
'zh-CN': '用户名/邮箱'
},
'project_already_exist': {
'en-US': 'Project already exist',
'zh-CN': '项目已存在。'
},
'project_name_is_invalid': {
'en-US': 'Project name is invalid',
'zh-CN': '项目名称无效。'
},
'projects_or_repositories': {
'en-US': 'Projects or repositories',
'zh-CN': '项目和镜像资源'
},
'tag': {
'en-US': 'Tag',
'zh-CN': '标签'
},
'image_details': {
'en-US': 'Image Details',
'zh-CN': '镜像明细'
},
'pull_command': {
'en-US': 'Pull Command',
'zh-CN': 'Pull 命令'
},
'alert_delete_repo_title': {
'en-US': 'Delete repository - $0',
'zh-CN': '删除镜像仓库 - $0'
},
'alert_delete_repo': {
'en-US': 'After deleting the associated tags with the repository will be deleted together.<br/>' +
'And the corresponding image will be removed from the system.<br/>' +
'<br/>Delete this "$0" repository now?',
'zh-CN': '删除镜像仓库也会删除其所有相关联的镜像标签,<br/>并且其对应镜像资源文件也会被从系统删除。<br/>' +
'<br/>是否删除镜像仓库 "$0" ?'
},
'alert_delete_last_tag': {
'en-US': 'After deleting the associated repository with the tag will be deleted together,<br/>' +
'because a repository contains at least one tag. And the corresponding image will be removed from the system.<br/>' +
'<br/>Delete this "$0" tag now?',
'zh-CN': '当删除只包含一个镜像标签的镜像仓库时,其对应的镜像仓库也会被从系统中删除。<br/>' +
'<br/>删除镜像标签 "$0" ?'
},
'alert_delete_tag_title': {
'en-US': 'Delete tag - $0',
'zh-CN': '删除镜像标签 - $0'
},
'alert_delete_tag': {
'en-US': 'Delete this "$0" tag now?',
'zh-CN': '删除镜像标签 "$0" ?'
}
};

View File

@ -9,7 +9,7 @@
<div class="form-group">
<label for="username" class="col-sm-3 control-label">// 'username' | tr //:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="username" ng-model="user.username" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.user.username" name="uUsername" required maxlength="20" invalid-chars>
<input type="text" class="form-control" id="username" ng-model="user.username" ng-value="vm.user.username" name="uUsername" required maxlength="20" invalid-chars>
<div ng-messages="form.$submitted && form.uUsername.$error">
<span ng-message="required">// 'username_is_required' | tr //</span>
<span ng-message="maxlength">// 'username_is_too_long' | tr //</span>
@ -23,7 +23,7 @@
<div class="form-group">
<label for="email" class="col-sm-3 control-label">// 'email' | tr //:</label>
<div class="col-sm-7">
<input type="email" class="form-control" id="email" ng-model="user.email" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.user.email" name="uEmail" required>
<input type="email" class="form-control" id="email" ng-model="user.email" ng-value="vm.user.email" name="uEmail" required>
<div ng-messages="form.$submitted && form.uEmail.$error">
<span ng-message="required">// 'email_is_required' | tr //</span>
<span ng-message="email">// 'email_content_illegal' | tr //</span>
@ -36,7 +36,7 @@
<div class="form-group">
<label for="fullName" class="col-sm-3 control-label">// 'full_name' | tr //:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="fullName" ng-model="user.fullName" ng-model-options="{ updateOn: 'blur' }" name="uFullName" ng-value="vm.user.realname" required maxlength="20" invalid-chars>
<input type="text" class="form-control" id="fullName" ng-model="user.fullName" name="uFullName" ng-value="vm.user.realname" required maxlength="20" invalid-chars>
<div ng-messages="form.$submitted && form.uFullName.$error">
<span ng-message="required">// 'full_name_is_required' | tr //</span>
<span ng-message="invalidChars">// 'full_name_contains_illegal_chars' | tr //</span>
@ -57,7 +57,7 @@
</div>
</div>
</form>
<form name="form" class="form-horizontal css-form" ng-submit="form.$valid" novalidate>
<form name="form" class="form-horizontal css-form" ng-submit="form.$valid && vm.changePassword(user)" novalidate>
<div class="form-group">
<label for="toggleChangePassword" class="col-sm-3 control-label"><a id="toggleChangePassword" href="#" ng-click="vm.toggleChangePassword()">// 'change_password' | tr //</a></label>
</div>
@ -66,7 +66,7 @@
<div class="form-group">
<label for="oldPassword" class="col-sm-3 control-label">// 'old_password' | tr //:</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="oldPassword" ng-model="user.oldPassword" ng-change="vm.reset()" ng-model-options="{ updateOn: 'blur' }" name="uOldPassword" required>
<input type="password" class="form-control" id="oldPassword" ng-model="user.oldPassword" ng-change="vm.reset()" name="uOldPassword" required>
</div>
<div class="col-sm-2">
<span class="asterisk">*</span>
@ -75,7 +75,7 @@
<div class="form-group">
<label for="password" class="col-sm-3 control-label">// 'new_password' | tr //:</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="password" ng-model="user.password" ng-change="vm.reset()" ng-model-options="{ updateOn: 'blur' }" name="uPassword" required password>
<input type="password" class="form-control" id="password" ng-model="user.password" ng-change="vm.reset()" name="uPassword" required password>
<p class="help-block small-size-fonts">// 'password_desc' | tr //</p>
</div>
<div class="col-sm-2">
@ -85,7 +85,7 @@
<div class="form-group">
<label for="confirmPassword" class="col-sm-3 control-label">// 'confirm_password' | tr //:</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-change="vm.reset()" ng-model-options="{ updateOn: 'blur' }" name="uConfirmPassword" compare-to="user.password">
<input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-change="vm.reset()" name="uConfirmPassword" compare-to="user.password">
</div>
<div class="col-sm-2">
<span class="asterisk">*</span>
@ -95,18 +95,18 @@
<div class="form-group">
<div class="col-md-offset-7 col-md-10">
<input type="submit" class="btn btn-default" ng-click="vm.cancel(form)" value="// 'cancel' | tr //">
<input type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="vm.changePassword(user)" value="// 'save' | tr //">
<input type="submit" class="btn btn-primary" ng-disabled="form.$invalid" value="// 'save' | tr //">
</div>
</div>
<div class="error-message">
<div ng-messages="form.$dirty && form.uOldPassword.$error">
<div ng-messages="form.uOldPassword.$error" ng-if="form.uOldPassword.$touched">
<span ng-message="required">// 'old_password_is_required' | tr //</span>
</div>
<div ng-messages="form.$dirty && form.uPassword.$error">
<div ng-messages="form.uPassword.$error" ng-if="form.uPassword.$touched">
<span ng-message="required">// 'new_password_is_required' | tr //</span>
<span ng-message="password">// 'new_password_is_invalid' | tr //</span>
</div>
<div ng-messages="form.$dirty && form.uConfirmPassword.$error">
<div ng-messages="form.uConfirmPassword.$error" ng-if="form.uConfirmPassword.$touched">
<span ng-message="compareTo">// 'password_does_not_match' | tr //</span>
</div>
<span ng-show="vm.hasError">// vm.errorMessage | tr //</span>

View File

@ -18,7 +18,7 @@
<li>
<form class="navbar-form pull-right" role="search">
<div class="form-group">
<input type="text" class="form-control search-icon" placeholder="projects or repositories" size="35">
<input type="text" class="form-control search-icon" placeholder="// 'projects_or_repositories' | tr //" size="35">
</div>
</form>
</li>

View File

@ -5,12 +5,12 @@
<h1 class="col-md-12 col-md-offset-2 main-title title-color">// 'sign_up' | tr //</h1>
<div class="row">
<div class="col-md-12 col-md-offset-2 main-content">
<form name="form" class="form-horizontal" ng-submit="form.$valid" novalidate>
<form name="form" class="form-horizontal css-form" ng-submit="form.$valid" novalidate>
<div class="form-group">
<label for="username" class="col-sm-3 control-label">// 'username' | tr //:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="username" ng-model="user.username" ng-model-options="{ updateOn: 'blur' }" name="uUsername" required maxlength="20" invalid-chars user-exists data-target="username">
<div class="error-message" ng-messages="form.uUsername.$error">
<input type="text" class="form-control" id="username" ng-model="user.username" name="uUsername" required maxlength="20" invalid-chars user-exists data-target="username">
<div class="error-message" ng-messages="form.uUsername.$error" ng-if="form.uUsername.$touched">
<span ng-message="required">// 'username_is_required' | tr //</span>
<span ng-message="maxlength">// 'username_is_too_long' | tr //</span>
<span ng-message="invalidChars">// 'username_contains_illegal_chars' | tr //</span>
@ -24,8 +24,8 @@
<div class="form-group">
<label for="email" class="col-sm-3 control-label">// 'email' | tr //:</label>
<div class="col-sm-7">
<input type="email" class="form-control" id="email" ng-model="user.email" ng-model-options="{ updateOn: 'blur' }" name="uEmail" required user-exists data-target="email" >
<div class="error-message" ng-messages="form.uEmail.$error">
<input type="email" class="form-control" id="email" ng-model="user.email" name="uEmail" required user-exists data-target="email" >
<div class="error-message" ng-messages="form.uEmail.$error" ng-if="form.uEmail.$touched">
<span ng-message="required">// 'email_is_required' | tr //</span>
<span ng-message="email">// 'email_content_illegal' | tr //</span>
<span ng-message="userExists">// 'email_has_been_taken' | tr //</span>
@ -39,8 +39,8 @@
<div class="form-group">
<label for="fullName" class="col-sm-3 control-label">// 'full_name' | tr //:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="fullName" ng-model="user.fullName" ng-model-options="{ updateOn: 'blur' }" name="uFullName" required maxlength="20" invalid-chars>
<div class="error-message" ng-messages="form.uFullName.$error">
<input type="text" class="form-control" id="fullName" ng-model="user.fullName" name="uFullName" required maxlength="20" invalid-chars>
<div class="error-message" ng-messages="form.uFullName.$error" ng-if="form.uFullName.$touched">
<span ng-message="required">// 'full_name_is_required' | tr //</span>
<span ng-message="invalidChars">// 'full_name_contains_illegal_chars' | tr //</span>
<span ng-message="maxlength">// 'full_name_is_too_long' | tr //</span>
@ -54,8 +54,8 @@
<div class="form-group">
<label for="password" class="col-sm-3 control-label">// 'password' | tr //:</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="password" ng-model="user.password" ng-model-options="{ updateOn: 'blur' }" name="uPassword" required password>
<div class="error-message" ng-messages="form.uPassword.$error">
<input type="password" class="form-control" id="password" ng-model="user.password" name="uPassword" required password>
<div class="error-message" ng-messages="form.uPassword.$error" ng-if="form.uPassword.$touched">
<span ng-message="required">// 'password_is_required' | tr //</span>
<span ng-message="password">// 'password_is_invalid' | tr //</span>
</div>
@ -68,8 +68,8 @@
<div class="form-group">
<label for="confirmPassword" class="col-sm-3 control-label">// 'confirm_password' | tr //:</label>
<div class="col-sm-7">
<input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-model-options="{ updateOn: 'blur' }" name="uConfirmPassword" compare-to="user.password">
<div class="error-message" ng-messages="form.uConfirmPassword.$error">
<input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" name="uConfirmPassword" compare-to="user.password">
<div class="error-message" ng-messages="form.uConfirmPassword.$error" ng-if="form.uConfirmPassword.$touched">
<span ng-message="compareTo">// 'password_does_not_match' | tr //</span>
</div>
</div>
@ -80,8 +80,8 @@
<div class="form-group">
<label for="comments" class="col-sm-3 control-label">// 'comments' | tr //:</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="comments" ng-model="user.comment" name="uComments" ng-model-options="{ updateOn: 'blur' }" maxlength="20">
<div class="error-message" ng-messages="form.uComments.$error">
<input type="text" class="form-control" id="comments" ng-model="user.comment" name="uComments" maxlength="20">
<div class="error-message" ng-messages="form.uComments.$error" ng-if="form.uComments.$touched">
<span ng-show="maxlength">// 'comment_is_too_long' | tr //</span>
</div>
</div>