added sign-up page of UI.

This commit is contained in:
kunw 2016-05-06 20:37:44 +08:00
parent 3b961dd5b2
commit 110c343993
17 changed files with 319 additions and 8 deletions

View File

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

@ -0,0 +1,9 @@
package ng
type SignUpController struct {
BaseController
}
func (suc *SignUpController) Get() {
suc.Forward("Sign Up", "sign-up.htm")
}

View File

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

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

View File

@ -20,7 +20,6 @@
AddProjectMemberService(2, vm.optRole, vm.username)
.success(addProjectMemberComplete)
.error(addProjectMemberFailed);
vm.isOpen = false;
vm.username = "";
vm.optRole = 1;
vm.reload();

View File

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

View File

@ -4,6 +4,7 @@
.module('harbor.app', [
'ngRoute',
'harbor.layout.navigation',
'harbor.layout.sign.up',
'harbor.layout.index',
'harbor.layout.project',
'harbor.layout.repository',

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

View File

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

View File

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

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

View File

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

View File

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