Upstream/harbor
1
0
Fork 0
mirror of https://github.com/goharbor/harbor.git synced 2024-07-11 06:14:51 +02:00
Code Issues Projects Releases Wiki Activity

updates on optional-menu and account-settings of UI

Browse Source
This commit is contained in:
kunw 2016-05-10 01:48:05 +08:00
parent 986647b826
commit 475ef0a079
13 changed files with 211 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
static/ng/resources/css/sign-up.css
View File

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

7
static/ng/resources/js/components/header/header.module.js
View File

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

22
static/ng/resources/js/components/optional-menu/optional-menu.directive.html Normal file
View File

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

49
static/ng/resources/js/components/optional-menu/optional-menu.directive.js Normal file
View File

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

10
static/ng/resources/js/components/optional-menu/optional-menu.module.js Normal file
View File

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

3
static/ng/resources/js/harbor.module.js
View File

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

34
static/ng/resources/js/layout/account-setting/account-setting.controller.js
View File

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

32
static/ng/resources/js/layout/header/header.controller.js Normal file
View File

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

9
static/ng/resources/js/layout/header/header.module.js Normal file
View File

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

8
static/ng/resources/js/services/user/services.change-password.js
View File

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

38
views/ng/account-settings.htm
View File

@ -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-primary" value="Save">
<input type="submit" class="btn btn-default" ng-click="vm.cancel()" value="Cancel">
<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>

38
views/ng/sections/header-content.htm
View File

@ -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">
<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-globe"></span>
Language<span class="caret"></span></a>
<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>
<div class="collapse navbar-collapse" id="bs-harbor-navbar-collapse-1" ng-controller="HeaderController as vm">
<optional-menu is-logged-in="vm.isLoggedIn" username="vm.currentUser.username"></optional-menu>
<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 -->

7
views/ng/sections/header-include.htm
View File

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