mirror of
https://github.com/goharbor/harbor.git
synced 2025-01-10 18:07:42 +01:00
added sign-up page of UI.
This commit is contained in:
parent
3b961dd5b2
commit
110c343993
@ -20,9 +20,9 @@ func (bc *BaseController) Forward(title, templateName string) {
|
||||
bc.TplName = filepath.Join(prefixNg, templateName)
|
||||
bc.Data["Title"] = title
|
||||
bc.LayoutSections = make(map[string]string)
|
||||
bc.LayoutSections["HeaderInclude"] = filepath.Join(prefixNg, viewPath, "headerInclude.htm")
|
||||
bc.LayoutSections["FooterInclude"] = filepath.Join(prefixNg, viewPath, "footerInclude.htm")
|
||||
bc.LayoutSections["HeaderContent"] = filepath.Join(prefixNg, viewPath, "headerContent.htm")
|
||||
bc.LayoutSections["FooterContent"] = filepath.Join(prefixNg, viewPath, "footerContent.htm")
|
||||
bc.LayoutSections["HeaderInclude"] = filepath.Join(prefixNg, viewPath, "header-include.htm")
|
||||
bc.LayoutSections["FooterInclude"] = filepath.Join(prefixNg, viewPath, "footer-include.htm")
|
||||
bc.LayoutSections["HeaderContent"] = filepath.Join(prefixNg, viewPath, "header-content.htm")
|
||||
bc.LayoutSections["FooterContent"] = filepath.Join(prefixNg, viewPath, "footer-content.htm")
|
||||
|
||||
}
|
||||
|
9
controllers/ng/signup.go
Normal file
9
controllers/ng/signup.go
Normal file
@ -0,0 +1,9 @@
|
||||
package ng
|
||||
|
||||
type SignUpController struct {
|
||||
BaseController
|
||||
}
|
||||
|
||||
func (suc *SignUpController) Get() {
|
||||
suc.Forward("Sign Up", "sign-up.htm")
|
||||
}
|
@ -12,4 +12,5 @@ func initNgRouters() {
|
||||
beego.Router("/ng/dashboard", &ng.DashboardController{})
|
||||
beego.Router("/ng/project", &ng.ProjectController{})
|
||||
beego.Router("/ng/repository", &ng.RepositoryController{})
|
||||
beego.Router("/ng/signup", &ng.SignUpController{})
|
||||
}
|
||||
|
35
static/ng/resources/css/sign-up.css
Normal file
35
static/ng/resources/css/sign-up.css
Normal file
@ -0,0 +1,35 @@
|
||||
.main-title {
|
||||
margin-top: 50px;
|
||||
margin-left: 180px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
width: 60%;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.form-horizontal .control-label {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.form-horizontal .form-group {
|
||||
margin-left: -15px;
|
||||
margin-right: -15px;
|
||||
}
|
||||
|
||||
.small-size-fonts {
|
||||
font-size: 10pt;
|
||||
}
|
||||
|
||||
.asterisk {
|
||||
display: inline-block;
|
||||
margin-left: -25px;
|
||||
padding-top: 8px;
|
||||
color: red;
|
||||
font-size: 14pt;
|
||||
}
|
@ -20,7 +20,6 @@
|
||||
AddProjectMemberService(2, vm.optRole, vm.username)
|
||||
.success(addProjectMemberComplete)
|
||||
.error(addProjectMemberFailed);
|
||||
vm.isOpen = false;
|
||||
vm.username = "";
|
||||
vm.optRole = 1;
|
||||
vm.reload();
|
||||
|
@ -34,7 +34,6 @@
|
||||
clip.on("ready", function() {
|
||||
console.log("Flash movie loaded and ready.");
|
||||
this.on("aftercopy", function(event) {
|
||||
|
||||
console.log("Copied text to clipboard: " + event.data["text/plain"]);
|
||||
element.find('span').tooltip('show');
|
||||
setTimeout(function(){
|
||||
@ -46,6 +45,7 @@
|
||||
clip.on("error", function(event) {
|
||||
console.log('error[name="' + event.name + '"]: ' + event.message);
|
||||
ZeroClipboard.destroy();
|
||||
element.find('span').tooltip('destroy');
|
||||
});
|
||||
|
||||
}
|
||||
|
@ -4,6 +4,7 @@
|
||||
.module('harbor.app', [
|
||||
'ngRoute',
|
||||
'harbor.layout.navigation',
|
||||
'harbor.layout.sign.up',
|
||||
'harbor.layout.index',
|
||||
'harbor.layout.project',
|
||||
'harbor.layout.repository',
|
||||
|
147
static/ng/resources/js/layout/sign-up/sign-up.controller.js
Normal file
147
static/ng/resources/js/layout/sign-up/sign-up.controller.js
Normal file
@ -0,0 +1,147 @@
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.layout.sign.up')
|
||||
.factory('validationConfig', validationConfig)
|
||||
.factory('Validator', Validator)
|
||||
.controller('SignUpController', SignUpController);
|
||||
|
||||
function validationConfig() {
|
||||
return config;
|
||||
function config() {
|
||||
var invalidChars = [",","~","#", "$", "%"];
|
||||
var vc = {
|
||||
'username': {
|
||||
'required' : {'value': true, 'message': 'Username is required.'},
|
||||
'maxLength': {'value': 20, 'message': 'Maximum 20 characters.'},
|
||||
'invalidChars': {'value': invalidChars, 'message': 'Username contains invalid characters.'},
|
||||
'exists': {'value': false, 'message': 'Username already exists.'}
|
||||
},
|
||||
'email': {
|
||||
'required' : {'value': true, 'message': 'Email is required.'},
|
||||
'regexp': {'value': /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
|
||||
'message': 'Email is invalid.'},
|
||||
'exists': {'value': false, 'message': 'Email address already exists.'}
|
||||
},
|
||||
'realname': {
|
||||
'maxLength': {'value': 20, 'message': 'Maximum 20 characters.'}
|
||||
},
|
||||
'password': {
|
||||
'required': {'value': true, 'message': 'Password is required.'},
|
||||
'complexity': {'value': /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).{7,20}$/,
|
||||
'message': 'At least 7 characters with 1 lowercase letter, 1 capital letter and 1 numeric character.'}
|
||||
},
|
||||
'confirmPassword': {
|
||||
'compareWith': {'value': true, 'message': 'Confirm password mismatch.'}
|
||||
}
|
||||
};
|
||||
return vc;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Validator.$inject = ['validationConfig', 'UserExistService'];
|
||||
|
||||
var status = function(isValid, message) {
|
||||
this.isValid = isValid;
|
||||
this.message = message;
|
||||
}
|
||||
|
||||
function Validator(validationConfig, UserExistService) {
|
||||
|
||||
return validate;
|
||||
|
||||
var valid = true;
|
||||
|
||||
function validate(fieldName, fieldValue, options) {
|
||||
|
||||
var config = validationConfig()[fieldName];
|
||||
|
||||
console.log('Checking ' + fieldName + ' for value:' + fieldValue);
|
||||
|
||||
for(var c in config) {
|
||||
console.log('item:' + c + ', criterion: ' + config[c]['value']);
|
||||
switch(c) {
|
||||
case 'required':
|
||||
valid = required(fieldValue); break;
|
||||
case 'maxLength':
|
||||
valid = maxLength(fieldValue, config[c]['value']); break;
|
||||
case 'regexp':
|
||||
valid = regexp(fieldValue, config[c]['value']); break;
|
||||
case 'invalidChars':
|
||||
valid = invalidChars(fieldValue, config[c]['value']);
|
||||
break;
|
||||
case 'exists':
|
||||
exists(fieldName, fieldValue);
|
||||
break;
|
||||
case 'complexity':
|
||||
valid = complexity(fieldValue, config[c]['value']); break;
|
||||
case 'compareWith':
|
||||
valid = compareWith(fieldValue, options); break;
|
||||
}
|
||||
if(!valid) {
|
||||
return new status(valid, config[c]['message']);
|
||||
}
|
||||
}
|
||||
return new status(valid, '');
|
||||
}
|
||||
|
||||
function required(value) {
|
||||
return (typeof value != "undefined" && value != null && $.trim(value).length > 0);
|
||||
}
|
||||
|
||||
function maxLength(value, maximum) {
|
||||
console.log('maximum is:' + maximum);
|
||||
return (value.length <= maximum);
|
||||
}
|
||||
|
||||
function regexp(value, reg) {
|
||||
return reg.test(value);
|
||||
}
|
||||
|
||||
function invalidChars(value, chars) {
|
||||
for(var i = 0 ; i < chars.length; i++) {
|
||||
var char = chars[i];
|
||||
if (value.indexOf(char) >= 0) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function exists(target, value) {
|
||||
UserExistService(target, value)
|
||||
.success(userExistSuccess)
|
||||
.error(userExistFailed);
|
||||
}
|
||||
|
||||
function userExistSuccess(data, status) {
|
||||
valid = !data;
|
||||
}
|
||||
|
||||
function userExistFailed(data, status) {
|
||||
console.log('error in checking user exists:' + data);
|
||||
}
|
||||
|
||||
function complexity(value, reg) {
|
||||
return reg.test(value);
|
||||
}
|
||||
|
||||
function compareWith(value, comparedValue) {
|
||||
return value === comparedValue;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
SignUpController.$inject = ['SignUpService', 'Validator'];
|
||||
|
||||
function SignUpController(SignUpService, Validator) {
|
||||
var vm = this;
|
||||
vm.username = 'user122';
|
||||
var status = Validator('username', vm.username);
|
||||
console.log('status, isValid:' + status.isValid + ', message:' + status.message);
|
||||
}
|
||||
|
||||
})();
|
9
static/ng/resources/js/layout/sign-up/sign-up.module.js
Normal file
9
static/ng/resources/js/layout/sign-up/sign-up.module.js
Normal file
@ -0,0 +1,9 @@
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.layout.sign.up', [
|
||||
'harbor.services.user']);
|
||||
|
||||
})();
|
@ -13,7 +13,14 @@
|
||||
return SignUp;
|
||||
|
||||
function SignUp(user) {
|
||||
$log.info(user);
|
||||
return $http
|
||||
.post('/api/user', {
|
||||
'username': user.username,
|
||||
'email': user.email,
|
||||
'password': user.password,
|
||||
'realname': user.realname,
|
||||
'comment': user.comment
|
||||
});
|
||||
}
|
||||
}
|
||||
})();
|
23
static/ng/resources/js/services/user/services.user-exist.js
Normal file
23
static/ng/resources/js/services/user/services.user-exist.js
Normal file
@ -0,0 +1,23 @@
|
||||
(function() {
|
||||
|
||||
'use strict';
|
||||
|
||||
angular
|
||||
.module('harbor.services.user')
|
||||
.factory('UserExistService', UserExistService);
|
||||
|
||||
UserExistService.$inject = ['$http', '$log'];
|
||||
|
||||
function UserExistService($http, $log) {
|
||||
return userExist;
|
||||
function userExist(target, value) {
|
||||
return $.ajax({
|
||||
type: 'POST',
|
||||
url: '/userExists',
|
||||
async: false,
|
||||
data: {'target': target, 'value': value}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
})();
|
@ -6,10 +6,10 @@ import (
|
||||
)
|
||||
|
||||
func initNgRouters() {
|
||||
|
||||
beego.SetStaticPath("ng/static", "ng")
|
||||
beego.Router("/ng", &ng.IndexController{})
|
||||
beego.Router("/ng/dashboard", &ng.DashboardController{})
|
||||
beego.Router("/ng/project", &ng.ProjectController{})
|
||||
beego.Router("/ng/repository", &ng.RepositoryController{})
|
||||
beego.Router("/ng/signup", &ng.SignUpController{})
|
||||
}
|
||||
|
@ -30,6 +30,7 @@
|
||||
<link rel="stylesheet" href="/static/ng/resources/css/dashboard.css">
|
||||
<link rel="stylesheet" href="/static/ng/resources/css/project.css">
|
||||
<link rel="stylesheet" href="/static/ng/resources/css/repository.css">
|
||||
<link rel="stylesheet" href="/static/ng/resources/css/sign-up.css">
|
||||
|
||||
<script src="/static/ng/vendors/angularjs/angular.js"></script>
|
||||
<script src="/static/ng/vendors/angularjs/angular-route.js"></script>
|
||||
@ -43,6 +44,9 @@
|
||||
<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>
|
||||
|
||||
<script src="/static/ng/resources/js/layout/sign-up/sign-up.module.js"></script>
|
||||
<script src="/static/ng/resources/js/layout/sign-up/sign-up.controller.js"></script>
|
||||
|
||||
<script src="/static/ng/resources/js/layout/index/index.module.js"></script>
|
||||
<script src="/static/ng/resources/js/layout/index/index.controller.js"></script>
|
||||
|
||||
@ -76,6 +80,8 @@
|
||||
<script src="/static/ng/resources/js/services/user/services.user.module.js"></script>
|
||||
<script src="/static/ng/resources/js/services/user/services.current-user.js"></script>
|
||||
<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/repository/services.repository.module.js"></script>
|
||||
<script src="/static/ng/resources/js/services/repository/services.list-repository.js"></script>
|
74
views/ng/sign-up.htm
Normal file
74
views/ng/sign-up.htm
Normal file
@ -0,0 +1,74 @@
|
||||
<div class="container-fluid container-fluid-custom">
|
||||
<div class="container container-custom">
|
||||
<div class="row extend-height">
|
||||
<div class="section">
|
||||
<h1 class="col-md-12 col-md-offset-2 main-title title-color">Sign Up</h1>
|
||||
<div class="row">
|
||||
<div class="col-md-12 col-md-offset-2 main-content">
|
||||
<form class="form-horizontal" ng-controller="SignUpController as vm">
|
||||
<div class="form-group">
|
||||
<label for="username" class="col-sm-3 control-label">Username:</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" id="username" ng-model="vm.username">
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<span class="asterisk">*</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email" class="col-sm-3 control-label">Email:</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" id="email" ng-model="vm.email">
|
||||
<p class="help-block small-size-fonts">The Email address will be used for resetting password.</p>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<span class="asterisk">*</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="fullName" class="col-sm-3 control-label">Full Name:</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="text" class="form-control" id="fullName" ng-model="vm.realname">
|
||||
<p class="help-block small-size-fonts">First name & Last name.</p>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<span class="asterisk">*</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<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="vm.password">
|
||||
<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">
|
||||
<span class="asterisk">*</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<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="vm.confirmPassword">
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<span class="asterisk">*</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="comments" class="col-sm-3 control-label">Comments:</label>
|
||||
<div class="col-sm-7">
|
||||
<input type="password" class="form-control" id="comments" ng-model="vm.comment">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-md-offset-8 col-md-10">
|
||||
<button type="submit" class="btn btn-success" ng-click="vm.signUp()">Sign Up</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user