updates for validation of UI

static/ng/resources/css/project.css

@@ -35,13 +35,13 @@
 }
 
 .pane {
-  height: 80%;
+  min-height: 500px;
   overflow-y: auto;
 }
 
 .sub-pane {
   margin: 0 10px 0 10px;
-  height: 60%;
+  min-height: 500px;
   overflow-y: auto;
 }
 

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

@@ -43,7 +43,6 @@
 }
 
 .error-message {
-  font-size: 16pt;
   color: red;
   width: 100%;
   margin-right: auto;

static/ng/resources/js/components/optional-menu/optional-menu.directive.js

@@ -6,9 +6,9 @@
     .module('harbor.optional.menu')
     .directive('optionalMenu', optionalMenu);
 
-  OptionalMenuController.$inject = ['$scope', '$window', 'I18nService', 'LogOutService'];
+  OptionalMenuController.$inject = ['$scope', '$window', '$cookies', 'I18nService', 'LogOutService'];
 
-  function OptionalMenuController($scope, $window, I18nService, LogOutService) {
+  function OptionalMenuController($scope, $window, $cookies, I18nService, LogOutService) {
     var vm = this;
     vm.currentLanguage = I18nService().getCurrentLanguage();
     vm.setLanguage = setLanguage;
@@ -19,7 +19,6 @@
     
     function setLanguage(name) {
       I18nService().setCurrentLanguage(name);
-      $window.location.reload();
     }
         
     function logOut() {

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

@@ -1,14 +1,20 @@
 <div class="well panel-group">
   <div class="row">
     <div class="col-xs-10 col-md-10">
-      <form>  
+      <form name="form" novalidate ng-submit="form.$valid">  
-        <div class="form-group">               
+        <div class="form-group col-md-6">               
-          <input type="text" class="form-control" id="addUsername" placeholder="Username" ng-model="vm.username">
+          <input type="text" class="form-control" id="addUsername" placeholder="// 'username' | tr //" ng-model="pm.username" name="uUsername" 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>
+            </div>
+            <span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
+          </div>
         </div>
       </form>
       <form class="form-inline clearfix">
         <div class="form-group">
-          <label for="roleIdList">Role:</label>&nbsp;&nbsp;
+          <label for="roleIdList">// 'role' | tr //:</label>&nbsp;&nbsp;
           <span ng-repeat="role in vm.roles">
             <input type="radio" name="role" ng-model="vm.optRole" value="//role.id//">&nbsp;//role.name//&nbsp;&nbsp;
           </span>
@@ -17,9 +23,9 @@
     </div>
     <div class="col-xs-2 col-md-2"> 
       <form>                        
-        <div class="form-group" style="margin-top: 20%;">               
+        <div class="form-group">               
-          <button type="button" class="btn btn-default" id="btnCancel" ng-click="vm.cancel()">Cancel</button>
+          <button type="button" class="btn btn-default" id="btnCancel" ng-click="vm.cancel(form)">// 'cancel' | tr //</button>
-          <button type="button" class="btn btn-primary" id="btnSave" ng-click="vm.save()">Save</button>     
+          <button type="button" class="btn btn-primary" id="btnSave" ng-click="vm.save(pm)">// 'save' | tr //</button>     
         </div>
       </form>
     </div>

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

@@ -13,10 +13,21 @@
     vm.username = "";
     vm.roles = roles();
     vm.optRole = 1;
+    
+    vm.reset = reset;
     vm.save = save;
     vm.cancel = cancel;
 
-    function save() {     
+    vm.hasError = false;
+    vm.errorMessage = '';
+    
+    function reset() {
+      vm.hasError = false;
+      vm.errorMessage = '';
+    }
+    
+    function save(pm) {     
+      if(pm && angular.isDefined(pm.username)) {
         AddProjectMemberService(vm.projectId, vm.optRole, vm.username)
           .success(addProjectMemberComplete)
           .error(addProjectMemberFailed);
@@ -24,8 +35,12 @@
         vm.optRole = 1;
         vm.reload();
       }
+    }    
    
-    function cancel() {
+    function cancel(form) {
+      if(form) {
+        form.$setPristine();
+      }
       vm.isOpen = false;  
       vm.username = "";
       vm.optRole = 1;
@@ -36,6 +51,14 @@
     }
     
     function addProjectMemberFailed(data, status, headers) {
+      if(status === 409) {
+        vm.hasError = true;
+        vm.errorMessage = 'username_already_exist';
+      }
+      if(status == 404) {
+        vm.hasError = true;
+        vm.errorMessage = 'username_does_not_exist';
+      }
       console.log('addProjectMemberFailed: status:' + status + ', data:' + data);
     }
     

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

@@ -1,9 +1,15 @@
 <div class="well panel-group">
   <div class="row">
     <div class="col-xs-10 col-md-10">
-      <form>  
+      <form name="form" ng-submit="form.$valid">  
-        <div class="form-group">               
+        <div class="form-group col-md-6">               
-          <input type="text" class="form-control" placeholder="// 'project_name' | tr //" ng-model="vm.projectName">
+          <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">
+              <span ng-message="required">Project name is required.</span>
+            </div>
+            <span ng-show="vm.hasError">// vm.errorMessage //</span>
+          </div>
         </div>
         <div class="form-group">
           <input type="checkbox" ng-model="vm.isPublic">&nbsp;// 'public_projects' | tr //                     
@@ -12,9 +18,9 @@
     </div>
     <div class="col-xs-2 col-md-2"> 
       <form>                        
-        <div class="form-group" style="margin-top: 20%;">               
+        <div class="form-group">               
-          <button type="button" class="btn btn-default" ng-click="vm.cancel()">// 'cancel' | tr //</button>
+          <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()">// 'save' | tr //</button>     
+          <button type="button" class="btn btn-primary" ng-click="vm.addProject(p)">// 'save' | tr //</button>     
         </div>
       </form>
     </div>

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

@@ -13,20 +13,25 @@
     vm.projectName = "";
     vm.isPublic = false;
     
+    vm.reset = reset;
     vm.addProject = addProject;
     vm.cancel = cancel;
     
-    function addProject() {
+    vm.hasError = false;
+    vm.errorMessage = '';
     
-      if(vm.projectName == "") {
+    function reset() {
-        alert("Please input the project name.");
+      vm.hasError = false;
-        return;
+      vm.errorMessage = '';
     }
     
-      AddProjectService(vm.projectName, vm.isPublic)
+    function addProject(p) {
+      if(p && angular.isDefined(p.projectName)) {
+        AddProjectService(p.projectName, vm.isPublic)
           .success(addProjectSuccess)
           .error(addProjectFailed);
       }
+    }
     
     function addProjectSuccess(data, status) {
       vm.isOpen = false;
@@ -36,12 +41,19 @@
     }
     
     function addProjectFailed(data, status) {
+      if(status === 409) {
+        vm.hasError = true;
+        vm.errorMessage = 'Project already exists.';
+      }
       console.log('Failed to add project:' + status);
     }
     
-    function cancel(){
+    function cancel(form){
+      if(form) {
+        form.$setPristine();
+      }
       vm.isOpen = false;
-      vm.projectName = "";
+      vm.projectName = '';
       vm.isPublic = false;
     }
   }
@@ -54,10 +66,15 @@
       'scope' : {
         'isOpen': '='
       },
+      'link': link,
       'controllerAs': 'vm',
       'bindToController': true
     };
     return directive;
+
+    function link(scope, element, attrs, ctrl) {
+      
+    }
   }
    
 })();

static/ng/resources/js/components/search/search.directive.js

@@ -26,11 +26,10 @@
     function searchSuccess(data, status) {
       console.log('filterBy:' + vm.filterBy + ", data:" + data);
       vm.searchResult = data[vm.filterBy];
-      
     }
     
     function searchFailed(data, status) {
-      
+      console.log('Failed search:' + data);
     }
     
   }

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

@@ -1,18 +1,29 @@
-<form class="form-horizontal">
+<form name="form" class="form-horizontal" ng-submit="form.$valid" novalidate>
   <div class="form-group"> 
     <div class="col-sm-offset-1 col-sm-10">
-      <input type="text" class="form-control" placeholder="Username/Email" ng-model="vm.principal">
+      <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>
+      <div class="error-message">
+        <div ng-messages="form.$submitted && form.uPrincipal.$error && form.uPrincipal.$error">
+          <span ng-message="required">// 'username_is_required' | tr //</span>
+        </div>
+      </div>
     </div>
   </div>
   <div class="form-group">
     <div class="col-sm-offset-1 col-sm-10">
-      <input type="password" class="form-control" placeholder="Password" ng-model="vm.password">
+      <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>
+      <div class="error-message">
+        <div ng-messages="form.$submitted && form.uPrincipal.$error && form.uPassword.$error">
+          <span ng-message="required">// 'password_is_required' | tr //</span>
+        </div>
+        <span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
+      </div>
     </div>
   </div>
   <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()">// 'sign_in' | tr //</button>
+        <button class="btn btn-default" 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/components/sign-in/sign-in.directive.js

@@ -6,32 +6,41 @@
     .module('harbor.sign.in')
     .directive('signIn', signIn);
     
-  SignInController.$inject = ['SignInService', '$window'];
+  SignInController.$inject = ['SignInService', '$window', '$scope'];
-  function SignInController(SignInService, $window) {
+  function SignInController(SignInService, $window, $scope) {
     var vm = this;
-    vm.principal = "";
+
-    vm.password = "";
+    vm.hasError = false;
+    vm.errorMessage = '';
+    
+    vm.reset = reset;
     vm.doSignIn = doSignIn;
     vm.doSignUp = doSignUp;
     vm.doForgotPassword = doForgotPassword;
        
-    function doSignIn() {
+    function reset() {
-      if(vm.principal != "" && vm.password != "") {
+      vm.hasError = false;
-        SignInService(vm.principal, vm.password)
+      vm.errorMessage = '';
+    } 
+      
+    function doSignIn(user) {  
+      if(user && angular.isDefined(user.principal) && angular.isDefined(user.password)) {
+        SignInService(user.principal, user.password)
           .success(signedInSuccess)
           .error(signedInFailed);
-      }else{
-        $window.alert('Please input your username or password!');
       }
     }
     
     function signedInSuccess(data, status) {
-      console.log(status);
       $window.location.href = "/ng/project";
     }
     
     function signedInFailed(data, status) {
-      console.log(status);
+      if(status === 401) {
+        vm.hasError = true;
+        vm.errorMessage = 'username_or_password_is_incorrect';
+      }
+      console.log('Failed sign in:' + data + ', status:' + status);     
     }
     
     function doSignUp() {
@@ -53,6 +62,7 @@
       'bindToController': true
     }
     return directive;
+
   }
   
 })();

static/ng/resources/js/layout/account-setting/account-setting.controller.js

@@ -12,8 +12,12 @@
     var vm = this;
     vm.isOpen = false;
     vm.user = {};
-    vm.toggleChangePassword = toggleChangePassword;
     
+    vm.hasError = false;
+    vm.errorMessage = '';
+    
+    vm.reset = reset;    
+    vm.toggleChangePassword = toggleChangePassword;
     vm.changeProfile = changeProfile;
     vm.changePassword= changePassword;
     vm.cancel = cancel;
@@ -22,13 +26,17 @@
       vm.user = val;
     });
     
+    function reset() {
+      vm.hasError = false;
+      vm.errorMessage = '';
+    }
+     
     function toggleChangePassword() {
       if(vm.isOpen) {
         vm.isOpen = false;
       }else{
         vm.isOpen = true;
       }     
-      console.log('vm.isOpen:' + vm.isOpen);
     }
         
     function getCurrentUserFailed(data) {
@@ -40,25 +48,29 @@
     }
     
     function changePassword(user) {
-      console.log(user);
+      if(user && angular.isDefined(user.oldPassword) && angular.isDefined(user.password)) {
         ChangePasswordService(vm.user.UserId, user.oldPassword, user.password)
           .success(changePasswordSuccess)
           .error(changePasswordFailed);
       }
+    }
     
     function changePasswordSuccess(data, status) {
-      console.log('Successful changed password:' + data);
       $window.location.href = '/ng/project';
     }
     
     function changePasswordFailed(data, status) {
       console.log('Failed changed password:' + data);
       if(data === 'old_password_is_not_correct') {
-        vm.oldPasswordIncorrect = true;
+        vm.hasError = true;
+        vm.errorMessage = 'old_password_is_incorrect';
       }
     }
     
-    function cancel() {
+    function cancel(form) {
+      if(form) {
+        form.$setPristine();
+      }
       $window.location.href = '/ng/project';
     }
     

static/ng/resources/js/layout/forgot-password/forgot-password.controller.js

@@ -10,20 +10,27 @@
   
   function ForgotPasswordController(SendMailService, $window) {
     var vm = this;
+    
     vm.hasError = false;
     vm.errorMessage = '';
+    
+    vm.reset = reset;
     vm.sendMail = sendMail;
     
-    function sendMail(user) {
+    function reset(){
       vm.hasError = false;
-      console.log('Email address:' + user.email);
+      vm.errorMessage = '';
+    }
+    
+    function sendMail(user) {
+      if(user && angular.isDefined(user.email)) { 
         SendMailService(user.email)
           .success(sendMailSuccess)
           .error(sendMailFailed);
       }
+    }
     
     function sendMailSuccess(data, status) {
-      console.log('Successful send mail:' + data);
       $window.location.href = '/ng';
     }
     

static/ng/resources/js/layout/project/project.controller.js

@@ -68,6 +68,7 @@
     
     function togglePublicity(e) {
       vm.publicity = e.publicity;
+      vm.isOpen = false;
       vm.retrieve();
       console.log('vm.publicity:' + vm.publicity);
     }

static/ng/resources/js/layout/reset-password/reset-password.controller.js

@@ -20,26 +20,43 @@
   function ResetPasswordController($location, ResetPasswordService, $window) {
     var vm = this;
     vm.resetUuid = getParameterByName('reset_uuid', $location.absUrl());
+    
+    vm.reset = reset;
     vm.resetPassword = resetPassword;
-    console.log(vm.resetUuid);
+    vm.cancel = cancel;
+    
+    vm.hasError = false;
+    vm.errorMessage = '';
+    
+    function reset() {
+      vm.hasError = false;
+      vm.errorMessage = '';
+    }    
+        
     function resetPassword(user) {
+      if(user && angular.isDefined(user.resetUuid) && angular.isDefined(user.password)) {
         console.log('rececived password:' + user.password + ', reset_uuid:' + vm.resetUuid);
         ResetPasswordService(vm.resetUuid, user.password)
           .success(resetPasswordSuccess)
           .error(resetPasswordFailed);
       }
+    }
     
     function resetPasswordSuccess(data, status) {
-      console.log('Successful reset password:' + data);
       $window.location.href = '/ng';
     }
     
     function resetPasswordFailed(data) {
+      vm.hasError = true;
+      vm.errorMessage = data;
       console.log('Failed reset password:' + data);
     }
     
-    
+    function cancel(form) {
-    
+      if(form) {
+        form.$setPristine();
+      }
+    }
   }
   
 })();

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

@@ -179,7 +179,7 @@ var global_messages = {
     'en-US': 'Please input the Email used when you signed up, a reset password Email will be sent to you.',
     'zh-CN': '重置邮件将发送到此邮箱。'
   },
-  'emaTimestampil_does_not_exist': {
+  'email_does_not_exist': {
     'en-US': 'Email does not exist',
     'zh-CN': '邮箱不存在。'
   },
@@ -382,5 +382,21 @@ var global_messages = {
   'new_password': {
     'en-US': 'New Password',
     'zh-CN': '新密码'
+  },
+  'username_already_exist': {
+    'en-US': 'Username already exist.',
+    'zh-CN': '用户名已存在。'
+  },
+  'username_does_not_exist': {
+    'en-US': 'Username does not exist.',
+    'zh-CN': '用户名不存在。'
+  },
+  'username_or_password_is_incorrect': {
+    'en-US': 'Username or password is incorrect',
+    'zh-CN': '用户名或密码不正确。'
+  },
+  'username_email': {
+    'en-US': 'Username/Email',
+    'zh-CN': '用户名/邮箱'
   }
 };

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

@@ -6,9 +6,9 @@
     .module('harbor.services.i18n')
     .factory('I18nService', I18nService);
   
-  I18nService.$inject = ['$cookies'];
+  I18nService.$inject = ['$cookies', '$window'];
   
-  function I18nService($cookies) {
+  function I18nService($cookies, $window) {
     var languages = $.extend(true, {}, global_messages);
     var defaultLanguage = navigator.language || 'en-US';
     var languageNames = {
@@ -23,6 +23,7 @@
             language = defaultLanguage;
           }
           $cookies.put('language', language);
+          $window.location.reload();
         },
         'getCurrentLanguage': function() {
           return $cookies.get('language') || defaultLanguage;

views/ng/account-settings.htm

@@ -57,7 +57,7 @@
                 </div>
               </div>              
             </form>
-            <form name="form" class="form-horizontal css-form" ng-submit="form.$valid && vm.changePassword(user)" novalidate>
+            <form name="form" class="form-horizontal css-form" ng-submit="form.$valid" 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-model-options="{ updateOn: 'blur' }" name="uOldPassword" required>
+                    <input type="password" class="form-control" id="oldPassword" ng-model="user.oldPassword" ng-change="vm.reset()" ng-model-options="{ updateOn: 'blur' }" 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-model-options="{ updateOn: 'blur' }" name="uPassword" required password>
+                    <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>
                     <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-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()" ng-model-options="{ updateOn: 'blur' }" name="uConfirmPassword" compare-to="user.password">
                   </div>
                   <div class="col-sm-2">
                     <span class="asterisk">*</span>
@@ -94,8 +94,8 @@
               </div>
               <div class="form-group">
                 <div class="col-md-offset-7 col-md-10">
-                  <input type="submit" class="btn btn-default" ng-click="vm.cancel()" value="// 'cancel' | tr //">
+                  <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" value="// 'save' | tr //">                    
+                  <input type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="vm.changePassword(user)" value="// 'save' | tr //">                    
                 </div>
               </div>  
               <div class="error-message">
@@ -106,12 +106,10 @@
                   <span ng-message="required">// 'new_password_is_required' | tr //</span>
                   <span ng-message="password">// 'new_password_is_invalid' | tr //</span>
                 </div>
-                <div class="error-message" ng-messages="form.$dirty && form.uConfirmPassword.$error">
+                <div ng-messages="form.$dirty && form.uConfirmPassword.$error">
                   <span ng-message="compareTo">// 'password_does_not_match' | tr //</span>
                 </div>
-                <div class="error-message" ng-show="form.$dirty && vm.oldPasswordIncorrect">
+                <span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
-                  <span>// 'old_password_is_incorrect' | tr //</span>
-                </div>
               </div>
             </form>
           </div>

views/ng/forgot-password.htm

@@ -5,11 +5,11 @@
 		    <h1 class="col-md-12 col-md-offset-2 main-title title-color">// 'forgot_password' | 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 && vm.sendMail(user)" >                     
+            <form name="form" class="form-horizontal" ng-submit="form.$valid " >                     
               <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 >
+                  <input type="email" class="form-control" id="email" ng-model="user.email"  ng-model-options="{ updateOn: 'blur' }" ng-change="vm.reset()" name="uEmail" required >
                   <p class="help-block small-size-fonts">// 'forgot_password_description' | tr //</p>
                 </div>
                 <div class="col-sm-2">
@@ -20,13 +20,11 @@
                 <div ng-messages="form.uEmail.$error">
                   <span ng-message="required">// 'email_is_required' | tr //</span>
                 </div>
-                <div ng-show="vm.hasError">
+                <span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
-                  <span>// vm.errorMessage | tr //</span>
-                </div>
               </div>
               <div class="form-group">
                 <div class="col-md-offset-8 col-md-10">
-                  <input type="submit" class="btn btn-success" ng-disabled="form.$invalid" value="Send">                    
+                  <input type="submit" class="btn btn-success" ng-disabled="form.$invalid" ng-click="vm.sendMail(user)" value="Send">                    
                 </div>
               </div>  
             </form>

views/ng/index.htm

@@ -1,4 +1,4 @@
-<div class="container-fluid container-fluid-custom" ng-controller="IndexController as vm">
+<div class="container-fluid container-fluid-custom">
   <div class="container">
     <div class="row">
       <div class="col-md-4">
@@ -43,7 +43,7 @@
     	    <div class="row">
     	      <div class="down-section">
     	      		<h4 class="page-header underlined">// 'why_use_harbor' | tr //</h4>
-        			<p class="page-content text-justify" style="margin-bottom: 20px;">
+        			<p class="page-content text-justify">
       			  // 'index_desc' | tr //
         			</p>
     		      <ul>

views/ng/layout.htm

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    
+    {{.HeaderInclude}}
 	  <title>{{.Title}}</title>  
   </head>
   <body ng-app="harbor.app" ng-controller="CurrentUserController as vm">
@@ -9,6 +9,5 @@
     {{.LayoutContent}}
 	  {{.FooterContent}}
 	  {{.FooterInclude}}
-    {{.HeaderInclude}}
   </body>
 </html>

views/ng/reset-password.htm

@@ -5,11 +5,11 @@
 		    <h1 class="col-md-12 col-md-offset-2 main-title title-color">// 'reset_password' | tr //</h1>
         <div class="row">
           <div class="col-md-12 col-md-offset-2 main-content">
-            <form name="form" class="form-horizontal css-form" ng-submit="form.$valid && vm.resetPassword(user)" novalidate>
+            <form name="form" class="form-horizontal css-form" ng-submit="form.$valid" novalidate>
               <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" ng-model-options="{ updateOn: 'blur' }" 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">
@@ -19,7 +19,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-model-options="{ updateOn: 'blur' }" name="uConfirmPassword" compare-to="user.password">
+                  <input type="password" class="form-control" id="confirmPassword" ng-model="user.confirmPassword" ng-model-options="{ updateOn: 'blur' }" ng-change="vm.reset()" name="uConfirmPassword" compare-to="user.password">
                 </div>
                 <div class="col-sm-2">
                   <span class="asterisk">*</span>
@@ -27,8 +27,8 @@
               </div>
               <div class="form-group">
                 <div class="col-md-offset-7 col-md-10">
-                  <input type="submit" class="btn btn-default" ng-click="vm.cancel()" value="Cancel">
+                  <input type="submit" class="btn btn-default" ng-click="vm.cancel(form)" value="Cancel">
-                  <input type="submit" class="btn btn-primary" ng-disabled="form.$invalid" value="Save">                    
+                  <input type="submit" class="btn btn-primary" ng-disabled="form.$invalid" ng-click="vm.resetPassword(user)" value="Save">                    
                 </div>
               </div>  
               <div class="error-message">
@@ -36,9 +36,10 @@
                   <span ng-message="required">// 'password_is_required' | tr //</span>
                   <span ng-message="password">// 'password_is_invalid' | tr //</span>
                 </div>
-                <div class="error-message" ng-messages="form.$dirty && form.uConfirmPassword.$error">
+                <div ng-messages="form.$dirty && form.uConfirmPassword.$error">
                   <span ng-message="compareTo">// 'password_does_not_match' | tr //</span>
                 </div>
+                <span ng-show="vm.hasError">// vm.errorMessage //</span>
               </div>
             </form>
          </div>            

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 && vm.signUp(user)" >              
+            <form name="form" class="form-horizontal" 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 ng-messages="form.uUsername.$error">
+                  <div class="error-message" ng-messages="form.uUsername.$error">
                     <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>
@@ -25,7 +25,7 @@
                 <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 ng-messages="form.uEmail.$error">
+                  <div class="error-message" ng-messages="form.uEmail.$error">
                     <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>
@@ -40,7 +40,7 @@
                 <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 ng-messages="form.uFullName.$error">
+                  <div class="error-message" ng-messages="form.uFullName.$error">
                     <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>
@@ -55,7 +55,7 @@
                 <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 ng-messages="form.uPassword.$error">
+                  <div class="error-message" ng-messages="form.uPassword.$error">
                     <span ng-message="required">// 'password_is_required' | tr //</span>
                     <span ng-message="password">// 'password_is_invalid' | tr //</span>
                   </div>
@@ -69,7 +69,7 @@
                 <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 ng-messages="form.uConfirmPassword.$error">
+                  <div class="error-message" ng-messages="form.uConfirmPassword.$error">
                     <span ng-message="compareTo">// 'password_does_not_match' | tr //</span>
                   </div>
                 </div>
@@ -81,14 +81,14 @@
                 <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 ng-messages="form.uComments.$error">
+                  <div class="error-message" ng-messages="form.uComments.$error">
                     <span ng-show="maxlength">// 'comment_is_too_long' | tr //</span>
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="col-md-offset-8 col-md-10">
-                  <input type="submit" class="btn btn-success" ng-disabled="form.$invalid" value="Sign Up">                    
+                  <input type="submit" class="btn btn-success" ng-disabled="form.$invalid" ng-click="vm.signUp(user)" value="Sign Up">                    
                 </div>
               </div>  
             </form>