From ba6be0a359404c8414936eca9df7fc697d72785a Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Mon, 16 May 2016 13:44:35 +0800
Subject: [PATCH] update validation interation of UI.

---
 .../add-project-member.directive.html              |  2 +-
 .../components/project/add-project.directive.html  |  2 +-
 .../js/components/sign-in/sign-in.directive.html   |  4 ++--
 .../resources/js/services/i18n/locale_messages.js  |  4 ++++
 views/ng/account-settings.htm                      | 14 +++++++-------
 views/ng/reset-password.htm                        |  4 ++--
 views/ng/sign-up.htm                               | 13 +++++++------
 7 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/static/ng/resources/js/components/project-member/add-project-member.directive.html b/static/ng/resources/js/components/project-member/add-project-member.directive.html
index 0e23f29ae..a85ee5695 100644
--- a/static/ng/resources/js/components/project-member/add-project-member.directive.html
+++ b/static/ng/resources/js/components/project-member/add-project-member.directive.html
@@ -3,7 +3,7 @@
     <div class="col-xs-10 col-md-10">
       <form name="form" novalidate ng-submit="form.$valid">  
         <div class="form-group col-md-6">               
-          <input type="text" class="form-control" id="addUsername" placeholder="// 'username' | tr //" ng-model="pm.username" name="uUsername" ng-change="vm.reset()" required>
+          <input type="text" class="form-control" id="addUsername" placeholder="// 'username' | tr //" ng-model="pm.username"  name="uUsername" ng-model-options="{ updateOn: 'blur' }" ng-change="vm.reset()" required>
           <div class="error-message">
             <div ng-messages="form.$dirty && form.uUsername.$error">
               <span ng-message="required">// 'username_is_required' | tr //</span>
diff --git a/static/ng/resources/js/components/project/add-project.directive.html b/static/ng/resources/js/components/project/add-project.directive.html
index 16b8c509a..ce1238565 100644
--- a/static/ng/resources/js/components/project/add-project.directive.html
+++ b/static/ng/resources/js/components/project/add-project.directive.html
@@ -3,7 +3,7 @@
     <div class="col-xs-10 col-md-10">
       <form name="form" ng-submit="form.$valid">  
         <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>
+          <input type="text" class="form-control" placeholder="// 'project_name' | tr //" ng-model="p.projectName" name="uProjectName" ng-model-options="{ updateOn: 'blur' }" ng-change="vm.reset()" required>
           <div class="error-message">
             <div ng-messages="form.$dirty && form.uProjectName.$error" ng-if="form.uProjectName.$touched">
               <span ng-message="required">// 'project_name_is_required' | tr //</span>
diff --git a/static/ng/resources/js/components/sign-in/sign-in.directive.html b/static/ng/resources/js/components/sign-in/sign-in.directive.html
index 06f4d3c82..bf78635f2 100644
--- a/static/ng/resources/js/components/sign-in/sign-in.directive.html
+++ b/static/ng/resources/js/components/sign-in/sign-in.directive.html
@@ -1,7 +1,7 @@
 <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="user.principal" required>
+      <input id="username"  type="text" class="form-control" placeholder="// 'username_email' | tr //" name="uPrincipal" ng-model-options="{ updateOn: 'blur' }" ng-change="vm.reset()" ng-model="user.principal" required>
       <div class="error-message">
         <div ng-messages="form.uPrincipal.$error" ng-if="form.uPrincipal.$touched">
           <span ng-message="required">// 'username_is_required' | tr //</span>
@@ -11,7 +11,7 @@
   </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="user.password" required>
+      <input type="password" class="form-control" placeholder="// 'password' | tr //" name="uPassword" ng-model-options="{ updateOn: 'blur' }" ng-change="vm.reset()" ng-model="user.password" required>
       <div class="error-message">
         <div ng-messages="form.uPassword.$error" ng-if="form.uPassword.$touched">
           <span ng-message="required">// 'password_is_required' | tr //</span>
diff --git a/static/ng/resources/js/services/i18n/locale_messages.js b/static/ng/resources/js/services/i18n/locale_messages.js
index 1d7d2546b..a14b330ad 100644
--- a/static/ng/resources/js/services/i18n/locale_messages.js
+++ b/static/ng/resources/js/services/i18n/locale_messages.js
@@ -123,6 +123,10 @@ var global_messages = {
 	  'en-US': 'Email does not exist.',
 	  'zh-CN': '邮箱不存在。'
   },
+  'email_is_too_long': {
+    'en-US': 'Email is to long. (maximum 50 characters)',
+    'zh-CN': '邮箱名称长度超出限制。（最长为50个字符）'
+  },
   'full_name': {
     'en-US': 'Full Name',
     'zh-CN': '全名'
diff --git a/views/ng/account-settings.htm b/views/ng/account-settings.htm
index 12473d771..22111bec3 100644
--- a/views/ng/account-settings.htm
+++ b/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-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" ng-model-options="{ updateOn: 'blur' }" 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-value="vm.user.email" name="uEmail" required>
+                  <input type="email" class="form-control" id="email" ng-model="user.email" ng-value="vm.user.email" ng-model-options="{ updateOn: 'blur' }"  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" 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-model-options="{ updateOn: 'blur' }" 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>
@@ -50,7 +50,7 @@
               <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-value="vm.user.comment" ng-model-options="{ updateOn: 'blur' }" maxlength="20">
+                  <input type="text" class="form-control" id="comments" ng-model="user.comment" name="uComments" ng-model-options="{ updateOn: 'blur' }" ng-value="vm.user.comment" ng-model-options="{ updateOn: 'blur' }" maxlength="20">
                   <div ng-messages="form.$submitted && form.uComments.$error">
                     <span ng-show="maxlength">// 'comment_is_too_long' | tr //</span>
                   </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()" name="uOldPassword" required>
+                    <input type="password" class="form-control" id="oldPassword" ng-model="user.oldPassword" ng-change="vm.reset()" name="uOldPassword" ng-model-options="{ updateOn: 'blur' }" required>
                     <div class="error-message" ng-messages="form.uOldPassword.$error" ng-if="form.uOldPassword.$touched">
                       <span ng-message="required">// 'old_password_is_required' | tr //</span>
                     </div> 
@@ -78,7 +78,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()" name="uPassword" required password>
+                    <input type="password" class="form-control" id="password" ng-model="user.password" ng-change="vm.reset()" name="uPassword" ng-model-options="{ updateOn: 'blur' }" 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>
@@ -92,7 +92,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()" name="uConfirmPassword" compare-to="user.password">
+                    <input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-change="vm.reset()" name="uConfirmPassword" ng-model-options="{ updateOn: 'blur' }" 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>
diff --git a/views/ng/reset-password.htm b/views/ng/reset-password.htm
index bd07e7b67..209a4f412 100644
--- a/views/ng/reset-password.htm
+++ b/views/ng/reset-password.htm
@@ -9,7 +9,7 @@
               <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-change="vm.reset()" name="uPassword" required password>
+                  <input type="password" class="form-control" id="password" ng-model="user.password" ng-change="vm.reset()" name="uPassword" ng-model-options="{ updateOn: 'blur' }" 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>
@@ -23,7 +23,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()" name="uConfirmPassword" compare-to="user.password">
+                  <input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-change="vm.reset()" name="uConfirmPassword" ng-model-options="{ updateOn: 'blur' }" 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>
diff --git a/views/ng/sign-up.htm b/views/ng/sign-up.htm
index b1fd83e75..d2955baf5 100644
--- a/views/ng/sign-up.htm
+++ b/views/ng/sign-up.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" 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" ng-model-options="{ updateOn: 'blur' }" 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>
@@ -24,11 +24,12 @@
               <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" name="uEmail" required user-exists data-target="email" >
+                  <input type="email" class="form-control" id="email" ng-model="user.email" name="uEmail" ng-model-options="{ updateOn: 'blur' }" required user-exists data-target="email" maxlength="50">
                   <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>
+                    <span ng-message="maxlength">// 'email_is_too_long' | tr //</span>
                   </div>
                   <p class="help-block small-size-fonts">// 'email_desc' | tr //</p>
                 </div>
@@ -39,7 +40,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" name="uFullName" required maxlength="20" invalid-chars>
+                  <input type="text" class="form-control" id="fullName" ng-model="user.fullName" name="uFullName" ng-model-options="{ updateOn: 'blur' }" 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>
@@ -54,7 +55,7 @@
               <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" name="uPassword" required password>
+                  <input type="password" class="form-control" id="password" ng-model="user.password" name="uPassword" ng-model-options="{ updateOn: 'blur' }" 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>
@@ -68,7 +69,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" name="uConfirmPassword" compare-to="user.password">
+                  <input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" name="uConfirmPassword" ng-model-options="{ updateOn: 'blur' }" 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>
@@ -80,7 +81,7 @@
               <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" maxlength="20">
+                  <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" ng-if="form.uComments.$touched">
                     <span ng-show="maxlength">// 'comment_is_too_long' | tr //</span>
                   </div>