updates for validation logicals and i18n modules.

static/ng/resources/css/index.css

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

static/ng/resources/css/sign-up.css

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

static/ng/resources/js/components/project-member/add-project-member.directive.js

@@ -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 = "";

static/ng/resources/js/components/project/add-project.directive.html

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

static/ng/resources/js/components/project/add-project.directive.js

@@ -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);
     }

static/ng/resources/js/components/repository/list-repository.directive.js

@@ -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.modalTitle = $filter('tr')('alert_delete_repo_title', [repoName]);
-      vm.modalMessage = 'After deleting the associated tags with the repository will be deleted together.<br/>' +
+      vm.modalMessage = $filter('tr')('alert_delete_repo', [repoName]);
-      'And the corresponding image will be removed from the system.<br/>' +
-      '<br/>Delete this "' + repoName + '" repository now?';
     }
   
     function deleteImage() {

static/ng/resources/js/components/repository/list-tag.directive.html

@@ -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="20%"><span class="glyphicon glyphicon-tags"></span> // 'tag' | tr //</th>
-        <th width="30%">Image Details</th>
+        <th width="30%">// 'image_details' | tr //</th>
-        <th width="40%">Pull Command</th>
+        <th width="40%">// 'pull_command' | tr //</th>
-        <th width="10%">Operation</th>
+        <th width="10%">// 'operation' | tr //</th>
       </thead>
       <tbody>
         <tr ng-repeat="tag in vm.tags">

static/ng/resources/js/components/repository/list-tag.directive.js

@@ -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/>' +
+        message = $filter('tr')('alert_delete_last_tag', [e.tag]);
-        '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?';
       }else {
-        message = 'Delete this "' + e.tag + '" tag now?';
+        message = $filter('tr')('alert_delete_tag', [e.tag]);
       }
       
       $scope.$emit('modalMessage', message);

static/ng/resources/js/components/sign-in/sign-in.directive.html

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

static/ng/resources/js/harbor.config.js

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

static/ng/resources/js/services/i18n/locale_messages.js

@@ -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" ?'
   }
 };

views/ng/account-settings.htm

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

views/ng/sections/header-content.htm

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

views/ng/sign-up.htm

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