updates on optional-menu and account-settings of UI

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

@@ -32,4 +32,20 @@
   padding-top: 8px;
   color: red;
   font-size: 14pt;
+}
+
+.css-form input .ng-valid .ng-submitted {
+  border-color: black;
+}
+
+.css-form input .ng-invalid .ng-submitted {
+  border-color: red;
+}
+
+.error-message {
+  font-size: 16pt;
+  color: red;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
 }

static/ng/resources/js/components/header/header.module.js

@@ -1,7 +0,0 @@
-(function() {
-
-  'use strict';
-  
-  angular
-    .module('harbor.header', []);
-})();

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

@@ -0,0 +1,22 @@
+<ul class="nav navbar-nav navbar-left">
+  <li ng-show="//!vm.isLoggedIn//" class="dropdown">
+  	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+      <span class="glyphicon glyphicon-globe"></span>Language<span class="caret"></span>
+    </a>
+	  <ul class="dropdown-menu">
+      <li><a href="#">//vm.isLoggedIn ? 'Logged In' : 'Not Logged In'//</a></li>
+	    <li><a href="#">English</a></li>						
+		  <li><a href="#">中文</a></li>
+	  </ul>
+	</li>
+  <li ng-show="//vm.isLoggedIn//" class="dropdown">
+  	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+      <span class="glyphicon glyphicon-user"></span>//vm.username//<span class="caret"></span>
+    </a>
+	  <ul class="dropdown-menu">
+      <li><a href="#">//vm.username//</a></li>
+	    <li><a href="/ng/account_setting">Account Setting</a></li>						
+		  <li><a href="#">Log Out</a></li>
+	  </ul>
+	</li>
+</ul>

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

@@ -0,0 +1,49 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.optional.menu')
+    .directive('optionalMenu', optionalMenu);
+  
+  OptionalMenuController.$inject = ['$scope'];
+  
+  function OptionalMenuController($scope, CurrentUserService) {
+    var vm = this;
+    vm.username = 'abcde';
+    $scope.$watch('vm.username', function(current) {
+      if(current) {
+        vm.username = current;
+        console.log('vm.username:' + current);
+      }
+    });
+  }
+  
+  function optionalMenu() {
+    var directive = {
+      'restrict': 'E',
+      'templateUrl': '/static/ng/resources/js/components/optional-menu/optional-menu.directive.html',
+      'scope': {
+        'isLoggedIn': '=',
+        'username': '='
+      },
+      'link': link,
+      'controller': OptionalMenuController,
+      'controllerAs': 'vm',
+      'bindToController': true
+    };
+    return directive;
+    
+    function link(scope, element, attrs, ctrl) {
+      scope.$watch('vm.isLoggedIn', function(current) {
+        if(current) {
+          ctrl.isLoggedIn = current;
+          console.log('vm.isLoggedIn:' + current);
+        }
+      });
+      
+      
+    }
+  }
+  
+})();

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

@@ -0,0 +1,10 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.optional.menu', [
+    'harbor.services.user'
+  ]);
+  
+})();

static/ng/resources/js/harbor.module.js

@@ -4,6 +4,7 @@
     .module('harbor.app', [
       'ngRoute',
       'ngMessages',
+      'harbor.layout.header',
       'harbor.layout.navigation',
       'harbor.layout.sign.up',
       'harbor.layout.account.setting',
@@ -18,7 +19,7 @@
       'harbor.services.repository',
       'harbor.services.project.member',
       'harbor.session',
-      'harbor.header',
+      'harbor.optional.menu',
       'harbor.sign.in',
       'harbor.search',
       'harbor.project',

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

@@ -6,19 +6,21 @@
     .module('harbor.layout.account.setting')
     .controller('AccountSettingController', AccountSettingController);
   
-  AccountSettingController.$inject = ['CurrentUserService'];
+  AccountSettingController.$inject = ['CurrentUserService', 'ChangePasswordService', '$window'];
   
-  function AccountSettingController(CurrentUserService) {
+  function AccountSettingController(CurrentUserService, ChangePasswordService, $window) {
     var vm = this;
     vm.isOpen = false;
     vm.user = {};
     vm.toggleChangePassword = toggleChangePassword;
     
+    vm.changeProfile = changeProfile;
+    vm.changePassword= changePassword;
+    vm.cancel = cancel;
+    
     CurrentUserService()
       .success(getCurrentUserSuccess)
       .error(getCurrentUserFailed);
-  
-    vm.update = update;
 
     function toggleChangePassword() {
       if(vm.isOpen) {
@@ -38,10 +40,32 @@
       console.log('Failed get current user:' + data);
     }
     
-    function update(user) {
+    function changeProfile(user) {
       console.log(user);
     }
     
+    function changePassword(user) {
+      console.log(user);
+      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;
+      }
+    }
+    
+    function cancel() {
+      $window.location.href = '/ng/project';
+    }
     
   }
   

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

@@ -0,0 +1,32 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.header')
+    .controller('HeaderController', HeaderController);
+  
+  HeaderController.$inject = ['CurrentUserService', '$scope'];
+  
+  function HeaderController(CurrentUserService, $scope) {
+    var vm = this;
+    
+    vm.isLoggedIn = true;
+    vm.currentUser = {};
+
+    CurrentUserService()
+      .then(currentUserSucess)
+      .catch(currentUserFailed);      
+    
+    function currentUserSucess(response) {
+      vm.isLoggedIn = true;
+      vm.currentUser.username = response.data.username;
+      console.log('vm.currentUser.username:' + vm.currentUser.username);
+    }
+    
+    function currentUserFailed(e) {
+//      vm.isLoggedIn = false;
+    }
+  }
+  
+})();

static/ng/resources/js/layout/header/header.module.js

@@ -0,0 +1,9 @@
+(function() {
+
+  'use strict';
+  
+  angular
+    .module('harbor.layout.header', [
+    'harbor.services.user'
+    ]);
+})();

static/ng/resources/js/services/user/services.change-password.js

@@ -12,8 +12,12 @@
     
     return ChangePassword;
     
-    function ChangePassword(user) {
+    function ChangePassword(userId, oldPassword, newPassword) {
-      
+      return $http
+        .put('/api/users/' + userId + '/password', {
+          'old_password': oldPassword,
+          'new_password': newPassword
+        });
     }
     
   }

views/ng/account-settings.htm

@@ -5,7 +5,7 @@
 		    <h1 class="col-md-12 col-md-offset-2 main-title title-color">Account Settings</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.update(user)" >              
+            <form name="form" class="form-horizontal" ng-submit="form.$valid && vm.changeProile(user)" >              
               <div class="form-group">
                 <label for="username" class="col-sm-3 control-label">Username:</label>
                 <div class="col-sm-7">
@@ -55,10 +55,11 @@
                     <span ng-show="maxlength">Comments maximum length is 20.</span>
                   </div>
                 </div>
-              </div>
+              </div>              
-              
+            </form>
+            <form name="form" class="form-horizontal css-form" ng-submit="form.$valid && vm.changePassword(user)" novalidate>
               <div class="form-group">
-                <a href="#" ng-click="vm.toggleChangePassword()">Change Password</a>
+                <label for="toggleChangePassword" class="col-sm-3 control-label"><a id="toggleChangePassword" href="#" ng-click="vm.toggleChangePassword()">Change Password</a></label>
               </div>
               <div ng-show="vm.isOpen">
                 <hr/>
@@ -66,9 +67,6 @@
                   <label for="oldPassword" class="col-sm-3 control-label">Old Password:</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>
-                    <div ng-messages="form.$submitted && form.uOldPassword.$error">
-                      <span ng-message="required">Password is required.</span>
-                    </div>
                   </div>
                   <div class="col-sm-2">
                     <span class="asterisk">*</span>
@@ -78,10 +76,6 @@
                   <label for="password" class="col-sm-3 control-label">Password:</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.$submitted && form.uPassword.$error">
-                      <span ng-message="required">Password is required.</span>
-                      <span ng-message="password">Password is not valid.</span>
-                    </div>
                     <p class="help-block small-size-fonts">At least 7 characters with 1 lowercase letter, 1 capital letter and 1 numeric character.</p>
                   </div>
                   <div class="col-sm-2">
@@ -92,9 +86,6 @@
                   <label for="confirmPassword" class="col-sm-3 control-label">Confirm Password:</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.$submitted && form.uConfirmPassword.$error">
-                      <span ng-message="compareTo">Confirm password mismatch.</span>
-                    </div>
                   </div>
                   <div class="col-sm-2">
                     <span class="asterisk">*</span>
@@ -103,10 +94,25 @@
               </div>
               <div class="form-group">
                 <div class="col-md-offset-7 col-md-10">
-                  <input type="submit" class="btn btn-default" value="Cancel">
+                  <input type="submit" class="btn btn-default" ng-click="vm.cancel()" value="Cancel">
-                  <input type="submit" class="btn btn-primary" value="Save">                    
+                  <input type="submit" class="btn btn-primary" ng-disabled="form.$invalid" value="Save">                    
                 </div>
               </div>  
+              <div class="error-message">
+                <div ng-messages="form.$dirty && form.uOldPassword.$error">
+                  <span ng-message="required">Old password is required.</span>
+                </div>
+                <div ng-messages="form.$dirty && form.uPassword.$error">
+                  <span ng-message="required">New password is required.</span>
+                  <span ng-message="password">New password is invalid.</span>
+                </div>
+                <div class="error-message" ng-messages="form.$dirty && form.uConfirmPassword.$error">
+                  <span ng-message="compareTo">Confirm password mismatch.</span>
+                </div>
+                <div class="error-message" ng-show="form.$dirty && vm.oldPasswordIncorrect">
+                  <span>Old password is incorrect.</span>
+                </div>
+              </div>
             </form>
           </div>
         </div>            

views/ng/sections/header-content.htm

@@ -1,4 +1,4 @@
-<nav class="navbar navbar-default navbar-custom">
+<nav class="navbar navbar-default navbar-custom" >
  <div class="container container-custom">
     <!-- Brand and toggle get grouped for better mobile display -->
     <div class="navbar-header">
@@ -8,42 +8,20 @@
       </button>
       <a class="navbar-brand" href="#"><img class="img-responsive" src="/static/ng/resources/img/Harbor_Logo_rec.png" alt="Harbor's Logo"/></a>
     </div>
-
     <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="bs-harbor-navbar-collapse-1">
+    <div class="collapse navbar-collapse" id="bs-harbor-navbar-collapse-1" ng-controller="HeaderController as vm">
-		<ul class="nav navbar-nav navbar-left">
+		  <optional-menu is-logged-in="vm.isLoggedIn" username="vm.currentUser.username"></optional-menu>
-		  <li class="dropdown">
+	    <ul class="nav navbar-nav navbar-right">
-		  	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
+		    <li>
-		      <span class="glyphicon glyphicon-globe"></span>
+		      <navigation-header></navigation-header>
-			  Language<span class="caret"></span></a>
+		    </li>
-			  <ul class="dropdown-menu">
-			    <li><a href="#">English</a></li>						
-				<li><a href="#">中文</a></li>
-			  </ul>
-	 	  </li>
-        </ul>
-		  <!--ul class="nav navbar-nav navbar-left">
-		  <li class="dropdown">
-		  	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
-		      <span class="glyphicon glyphicon-user"></span>
-			  admin<span class="caret"></span></a>
-			  <ul class="dropdown-menu">
-			    <li><a href="#">Change Password</a></li>						
-				<li><a href="#">Log Out</a></li>
-			  </ul>
-	 	  </li>
-    </ul-->
-	  <ul class="nav navbar-nav navbar-right">
-		  <li>
-		    <navigation-header></navigation-header>
-		  </li>
 	      <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">
 	          </div>           
 	        </form>
-		  </li>
+		    </li>
 	    </ul>
     </div><!-- /.navbar-collapse -->
   </div><!-- /.container-fluid -->

views/ng/sections/header-include.htm

@@ -41,6 +41,9 @@
 <script src="/static/ng/resources/js/harbor.initialize.js"></script>
 <script src="/static/ng/resources/js/harbor.constants.js"></script>
 
+<script src="/static/ng/resources/js/layout/header/header.module.js"></script>
+<script src="/static/ng/resources/js/layout/header/header.controller.js"></script>
+
 <script src="/static/ng/resources/js/layout/navigation/navigation.module.js"></script>
 <script src="/static/ng/resources/js/layout/navigation/navigation-header.directive.js"></script>
 <script src="/static/ng/resources/js/layout/navigation/navigation-details.directive.js"></script>
@@ -86,6 +89,7 @@
 <script src="/static/ng/resources/js/services/user/services.sign-in.js"></script>
 <script src="/static/ng/resources/js/services/user/services.sign-up.js"></script>
 <script src="/static/ng/resources/js/services/user/services.user-exist.js"></script>
+<script src="/static/ng/resources/js/services/user/services.change-password.js"></script>
 
 <script src="/static/ng/resources/js/services/repository/services.repository.module.js"></script>
 <script src="/static/ng/resources/js/services/repository/services.list-repository.js"></script>
@@ -105,7 +109,8 @@
 <script src="/static/ng/resources/js/session/session.module.js"></script>
 <script src="/static/ng/resources/js/session/session.current-user.js"></script>
 
-<script src="/static/ng/resources/js/components/header/header.module.js"></script>
+<script src="/static/ng/resources/js/components/optional-menu/optional-menu.module.js"></script>
+<script src="/static/ng/resources/js/components/optional-menu/optional-menu.directive.js"></script>
 
 <script src="/static/ng/resources/js/components/validator/validator.module.js"></script>
 <script src="/static/ng/resources/js/components/validator/validator.config.js"></script>