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

updates for replacing alert with modal-dialog of UI.

Browse Source
This commit is contained in:
kunw 2016-06-21 18:42:53 +08:00
parent 181f525df7
commit 2908c090b0
15 changed files with 109 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
static/resources/js/components/modal-dialog/modal-dialog.directive.html
View File

@ -9,7 +9,7 @@
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="btnOk">// 'ok' | tr //</button>
<button type="button" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
<button type="button" ng-show="!vm.confirmOnly" class="btn btn-default" data-dismiss="modal">// 'close' | tr //</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

15
static/resources/js/components/modal-dialog/modal-dialog.directive.js
View File

@ -10,6 +10,7 @@
function ModalDialogController($scope) {
var vm = this;
vm.confirmOnly = false;
}
function modalDialog() {
@ -21,7 +22,8 @@
'contentType': '@',
'title': '@',
'message': '@',
'action': '&'
'action': '&',
'confirmOnly': '@'
},
'controller': ModalDialogController,
'controllerAs': 'vm',
@ -49,11 +51,22 @@
}
});
scope.$on('showDialog', function(e, val) {
console.log('modal-dialog show:' + ctrl.show);
if(val) {
element.find('#myModal').modal('show');
}else{
element.find('#myModal').modal('hide');
}
});
element.find('#btnOk').on('click', clickHandler);
function clickHandler(e) {
ctrl.action();
element.find('#myModal').modal('hide');
ctrl.show = false;
}
}
}

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

@ -17,7 +17,7 @@
vm.reset = reset;
vm.toggleChangePassword = toggleChangePassword;
vm.confirmToUpdate = confirmToUpdate;
vm.confirm = confirm;
vm.updateUser = updateUser;
vm.cancel = cancel;
@ -39,43 +39,32 @@
}
}
function confirmToUpdate(user) {
vm.user = user;
if(vm.isOpen) {
if(vm.user && angular.isDefined(user.oldPassword) && angular.isDefined(user.password)) {
vm.modalTitle = $filter('tr')('change_password', []);
vm.modalMessage = $filte('tr')('confirm_to_change_password', []);
return true;
}
}else{
if(vm.user && angular.isDefined(vm.user.username) && angular.isDefined(vm.user.password) &&
angular.isDefined(vm.user.realname)) {
vm.modalTitle = $filter('tr')('change_profile', []);
vm.modalMessage = $filter('tr')('confirm_to_change_profile', []);
return true;
}
}
vm.modalTitle = $filter('tr')('form_is_invalid');
vm.modalMessage = $filter('tr')('form_is_invalid_message', []);
return false;
function confirm() {
$window.location.href = '/dashboard';
}
function updateUser() {
function updateUser(user) {
if(vm.isOpen){
ChangePasswordService(userId, vm.user.oldPassword, vm.user.password)
.success(changePasswordSuccess)
.error(changePasswordFailed);
if(user && angular.isDefined(user.oldPassword) && angular.isDefined(user.password)) {
ChangePasswordService(userId, user.oldPassword, user.password)
.success(changePasswordSuccess)
.error(changePasswordFailed);
}
}else{
UpdateUserService(userId, vm.user)
.success(updateUserSuccess)
.error(updateUserFailed);
currentUser.set(vm.user);
if(user && angular.isDefined(user.username) && angular.isDefined(user.password) &&
angular.isDefined(user.realname)) {
UpdateUserService(userId, user)
.success(updateUserSuccess)
.error(updateUserFailed);
currentUser.set(user);
}
}
}
function changePasswordSuccess(data, status) {
$window.location.href = '/dashboard';
vm.modalTitle = $filter('tr')('change_password', []);
vm.modalMessage = $filter('tr')('successful_changed_password', []);
$scope.$broadcast('showDialog', true);
}
function changePasswordFailed(data, status) {
@ -87,7 +76,9 @@
}
function updateUserSuccess(data, status) {
$window.location.href = '/dashboard';
vm.modalTitle = $filter('tr')('change_profile', []);
vm.modalMessage = $filter('tr')('successful_changed_profile', []);
$scope.$broadcast('showDialog', true);
}
function updateUserFailed(data, status) {

15
static/resources/js/layout/forgot-password/forgot-password.controller.js
View File

@ -6,17 +6,20 @@
.module('harbor.layout.forgot.password')
.controller('ForgotPasswordController', ForgotPasswordController);
ForgotPasswordController.$inject = ['SendMailService', '$window'];
ForgotPasswordController.$inject = ['SendMailService', '$window', '$scope'];
function ForgotPasswordController(SendMailService, $window) {
function ForgotPasswordController(SendMailService, $window, $scope) {
var vm = this;
vm.hasError = false;
vm.show = false;
vm.errorMessage = '';
vm.reset = reset;
vm.sendMail = sendMail;
vm.confirm = confirm;
function reset(){
vm.hasError = false;
vm.errorMessage = '';
@ -31,7 +34,7 @@
}
function sendMailSuccess(data, status) {
$window.location.href = '/';
$scope.$broadcast('showDialog', true);
}
function sendMailFailed(data) {
@ -39,6 +42,12 @@
vm.errorMessage = data;
console.log('Failed send mail:' + data);
}
function confirm() {
$window.location.href = '/';
}
}
})();

18
static/resources/js/layout/header/header.controller.js
View File

@ -6,10 +6,24 @@
.module('harbor.layout.header')
.controller('HeaderController', HeaderController);
HeaderController.$inject = ['$scope', '$window', 'getParameterByName'];
HeaderController.$inject = ['$scope', '$window', 'getParameterByName', '$location', 'currentUser'];
function HeaderController($scope, $window, getParameterByName) {
function HeaderController($scope, $window, getParameterByName, $location, currentUser) {
var vm = this;
vm.user = currentUser.get();
if(location.pathname === '/dashboard') {
vm.defaultUrl = '/dashboard';
}else{
vm.defaultUrl = '/';
}
$scope.$watch('vm.user', function(current) {
if(current) {
vm.defaultUrl = '/dashboard';
}
});
if($window.location.search) {
vm.searchInput = getParameterByName('q', $window.location.search);
console.log('vm.searchInput at header:' + vm.searchInput);

13
static/resources/js/layout/sign-up/sign-up.controller.js
View File

@ -6,13 +6,14 @@
.module('harbor.layout.sign.up')
.controller('SignUpController', SignUpController);
SignUpController.$inject = ['SignUpService', '$window'];
SignUpController.$inject = ['$scope', 'SignUpService', '$window'];
function SignUpController(SignUpService, $window) {
function SignUpController($scope, SignUpService, $window) {
var vm = this;
vm.user = {};
vm.signUp = signUp;
vm.confirm = confirm;
function signUp(user) {
var userObject = {
@ -26,17 +27,21 @@
.success(signUpSuccess)
.error(signUpFailed);
}
function signUpSuccess(data, status) {
console.log('Signed up successfully:' + status);
alert('Signed up successfully');
$window.location.href = '/';
$scope.$broadcast('showDialog', true);
}
function signUpFailed(data, status) {
console.log('Signed up failed.');
}
function confirm() {
$window.location.href = '/';
}
}
})();

19
static/resources/js/services/i18n/locale_messages_en-US.js
View File

@ -9,11 +9,11 @@ var locale_messages = {
'user_management_and_role_assignment': 'User management and role assignment',
'why_use_harbor': 'Why use Harbor?',
'index_desc': 'Project Harbor is to build an enterprise-class, reliable registry server. Enterprises can set up a private registry server in their own environment to improve productivity as well as security. Project Harbor can be used in both development and production environment.',
'index_desc_1': 'Security: Keep their intellectual properties within their organizations.',
'index_desc_2': 'Efficiency: A private registry server is set up within the organization\'s network and can reduce significantly the internet traffic to the public service. ',
'index_desc_3': 'Access Control: RBAC (Role Based Access Control) is provided. User management can be integrated with existing enterprise identity services like AD/LDAP. ',
'index_desc_4': 'Audit: All access to the registry are logged and can be used for audit purpose.',
'index_desc_5': 'GUI: User friendly single-pane-of-glass management console.',
'index_desc_1': '<strong>Security:</strong> Keep their intellectual properties within their organizations.',
'index_desc_2': '<strong>Efficiency:</strong> A private registry server is set up within the organization\'s network and can reduce significantly the internet traffic to the public service. ',
'index_desc_3': '<strong>Access Control:</strong> RBAC (Role Based Access Control) is provided. User management can be integrated with existing enterprise identity services like AD/LDAP. ',
'index_desc_4': '<strong>Audit:</strong> All access to the registry are logged and can be used for audit purpose.',
'index_desc_5': '<strong>GUI:</strong> User friendly single-pane-of-glass management console.',
'view_all': 'View all...',
'repositories': 'Repositories',
'project_repo_name': 'Project/Repository Name',
@ -161,12 +161,15 @@ var locale_messages = {
'endpoint': 'Endpoint',
'test_connection': 'Test connection',
'add_new_destination': 'New Destination',
'confirm_to_change_password': 'Are you sure to change your password?',
'successful_changed_password': 'Password has been changed successfully.',
'change_profile': 'Change Profile',
'confirm_to_change_profile': 'Are you sure to change your profile?',
'successful_changed_profile': 'User profile has been changed successfully.',
'form_is_invalid': 'Form content is invalid',
'form_is_invalid_message': 'Form content is invalid, please fill the required fields.',
'administrator': 'Administrator',
'popular_repositories': 'Popular Repositories',
'harbor_intro_title': 'About Harbor'
'harbor_intro_title': 'About Harbor',
'mail_has_been_sent': 'Resetting Email has been sent.',
'send': 'Send',
'successful_signed_up': 'Signed up successfully.'
};

19
static/resources/js/services/i18n/locale_messages_zh-CN.js
View File

@ -9,11 +9,11 @@ var locale_messages = {
'user_management_and_role_assignment': '用户管理和角色分派',
'why_use_harbor': '为什么要使用Harbor？',
'index_desc': 'Harbor是可靠的企业级Registry服务器。企业用户可使用Harbor搭建私有容器Registry服务，提高生产效率和安全度，既可应用于生产环境，也可以在开发环境中使用。',
'index_desc_1': '安全: 确保知识产权在自己组织内部的管控之下。',
'index_desc_2': '效率: 搭建组织内部的私有容器Registry服务，可显著降低访问公共Registry服务的网络需求。',
'index_desc_3': '访问控制: 提供基于角色的访问控制，可集成企业目前拥有的用户管理系统（如:AD/LDAP）。',
'index_desc_4': '审计: 所有访问Registry服务的操作均被记录，便于日后审计。',
'index_desc_5': '管理界面: 具有友好易用图形管理界面。',
'index_desc_1': '<strong>安全:</strong> 确保知识产权在自己组织内部的管控之下。',
'index_desc_2': '<strong>效率:</strong> 搭建组织内部的私有容器Registry服务，可显著降低访问公共Registry服务的网络需求。',
'index_desc_3': '<strong>访问控制:</strong> 提供基于角色的访问控制，可集成企业目前拥有的用户管理系统（如:AD/LDAP）。',
'index_desc_4': '<strong>审计:</strong> 所有访问Registry服务的操作均被记录，便于日后审计。',
'index_desc_5': '<strong>管理界面:</strong> 具有友好易用图形管理界面。',
'view_all': '显示全部...',
'repositories': '镜像仓库',
'project_repo_name': '项目/镜像仓库名称',
@ -160,12 +160,15 @@ var locale_messages = {
'endpoint_is_required': '终端URL为必填项。',
'test_connection': '测试连接',
'add_new_destination': '新建目标',
'confirm_to_change_password': '确认要修改密码吗？',
'successful_changed_password': '修改密码操作成功。',
'change_profile': '修改个人信息',
'confirm_to_change_profile': '确认要修改个人信息吗？',
'successful_changed_profile': '修改个人信息操作成功。',
'form_is_invalid': '表单内容无效',
'form_is_invalid_message': '表单内容无效，请填写必填字段。',
'administrator': '管理员',
'popular_repositories': '热门镜像仓库',
'harbor_intro_title': '关于 Harbor'
'harbor_intro_title': '关于 Harbor',
'mail_has_been_sent': '重置密码邮件已发送。',
'send': '发送',
'successful_signed_up': '注册成功。'
};

3
static/resources/js/session/session.current-user.js
View File

@ -19,6 +19,9 @@
function getCurrentUserComplete(response) {
if(angular.isDefined(response)) {
currentUser.set(response.data);
if(location.pathname === '/') {
$window.location.href = '/dashboard';
}
}
}

4
views/account-settings.htm
View File

@ -4,7 +4,7 @@
<div class="section">
<h1 class="col-md-12 col-md-offset-2 main-title title-color">// 'account_setting' | tr //</h1>
<div class="col-md-12 col-md-offset-2 main-content">
<modal-dialog title="//vm.modalTitle//" message="//vm.modalMessage//" action="vm.updateUser()"></modal-dialog>
<modal-dialog title="//vm.modalTitle//" message="//vm.modalMessage//" action="vm.confirm()" confirm-only="true"></modal-dialog>
<form name="form" class="css-form form-horizontal" novalidate>
<div class="form-group">
<label for="username" class="col-sm-3 control-label">// 'username' | tr //:</label>
@ -102,7 +102,7 @@
</div>
<div class="form-group">
<div class="col-md-offset-7 col-md-10">
<input type="submit" class="btn btn-primary" ng-click="vm.confirmToUpdate(user)" data-toggle="modal" data-target="#myModal" value="// 'save' | tr //">
<input type="submit" class="btn btn-primary" ng-click="vm.updateUser(user)" value="// 'save' | tr //">
<input type="button" class="btn btn-default" ng-click="vm.cancel(form)" value="// 'cancel' | tr //">
</div>
</div>

7
views/forgot-password.htm
View File

@ -2,10 +2,11 @@
<div class="container container-custom">
<div class="row extend-height">
<div class="section">
<modal-dialog title="// 'forgot_password' | tr //" message="// 'mail_has_been_sent' | tr //" confirm-only="true" action="vm.confirm()"></modal-dialog>
<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 css-form" ng-submit="form.$valid" >
<form name="form" class="form-horizontal css-form">
<div class="form-group">
<label for="email" class="col-sm-3 control-label">// 'email' | tr //:</label>
<div class="col-sm-7">
@ -17,14 +18,14 @@
</div>
</div>
<div class="error-message">
<div ng-messages="form.uEmail.$error">
<div ng-messages="form.$submitted && form.uEmail.$error">
<span ng-message="required">// 'email_is_required' | tr //</span>
</div>
<span ng-show="vm.hasError">// vm.errorMessage | tr //</span>
</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" ng-click="vm.sendMail(user)" value="Send">
<input type="submit" class="btn btn-success" ng-click="form.$valid && vm.sendMail(user)" value="// 'send' | tr //">
</div>
</div>
</form>

24
views/header.htm
View File

@ -1,24 +0,0 @@
<nav class="navbar navbar-default navbar-custom" ng-controller="HeaderController as vm">
<div class="container container-custom">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-harbor-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/main"><img class="img-responsive" src="/static/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">
<optional-menu current="vm.current"></optional-menu>
<ul class="nav navbar-nav navbar-right">
<li>
<navigation-header></navigation-header>
</li>
<li>
<search-input search-input='vm.searchInput'></search-input>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>

11
views/index.htm
View File

@ -39,18 +39,11 @@
<div class="col-md-4">
<div class="row">
<div class="down-section">
<modal-dialog title="// 'harbor_intro_title' | tr //" message='// vm.message //' content-type="text/html"></modal-dialog>
<modal-dialog title="// 'harbor_intro_title' | tr //" message='// vm.message //' content-type="text/html" confirm-only="true"></modal-dialog>
<h4 class="page-header underlined">// 'why_use_harbor' | tr //</h4>
<p class="page-content text-justify">
<p class="page-content text-justify" style="line-height: 2.5em;">
// 'index_desc' | tr //
</p>
<ul>
<li class="long-line">▪︎ // 'index_desc_1' | tr //</li>
<li class="long-line">▪︎ // 'index_desc_2' | tr //</li>
<li class="long-line">▪︎ // 'index_desc_3' | tr //</li>
<li class="long-line">▪︎ // 'index_desc_4' | tr //</li>
<li class="long-line">▪︎ // 'index_desc_5' | tr //</li>
</ul>
<div class="page-content pull-right">
<a href="javascript:void(0);" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-triangle-right"></span> // 'view_all' | tr //</a>
</div>

2
views/sections/header-content.htm
View File

@ -6,7 +6,7 @@
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img class="img-responsive" src="/static/resources/img/Harbor_Logo_rec.png" alt="Harbor's Logo"/></a>
<a class="navbar-brand" href="//vm.defaultUrl//"><img class="img-responsive" src="/static/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">

1
views/sign-up.htm
View File

@ -2,6 +2,7 @@
<div class="container container-custom">
<div class="row extend-height">
<div class="section">
<modal-dialog title="// 'sign_up' | tr //" message="// 'successful_signed_up' | tr //" confirm-only="true" action="vm.confirm()"></modal-dialog>
<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">