From 110c343993ec2bfbe6a4543e30dffc5a1af436dd Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Fri, 6 May 2016 20:37:44 +0800
Subject: [PATCH] added sign-up page of UI.

---
 controllers/ng/base.go                        |   8 +-
 controllers/ng/signup.go                      |   9 ++
 ngrouter.go                                   |   1 +
 static/ng/resources/css/sign-up.css           |  35 +++++
 .../add-project-member.directive.js           |   1 -
 .../repository/pull-command.directive.js      |   2 +-
 static/ng/resources/js/harbor.module.js       |   1 +
 .../js/layout/sign-up/sign-up.controller.js   | 147 ++++++++++++++++++
 .../js/layout/sign-up/sign-up.module.js       |   9 ++
 .../js/services/user/services.sign-up.js      |   9 +-
 .../js/services/user/services.user-exist.js   |  23 +++
 ui/ngrouter.go                                |   2 +-
 .../{footerContent.htm => footer-content.htm} |   0
 .../{footerInclude.htm => footer-include.htm} |   0
 .../{headerContent.htm => header-content.htm} |   0
 .../{headerInclude.htm => header-include.htm} |   6 +
 views/ng/sign-up.htm                          |  74 +++++++++
 17 files changed, 319 insertions(+), 8 deletions(-)
 create mode 100644 controllers/ng/signup.go
 create mode 100644 static/ng/resources/css/sign-up.css
 create mode 100644 static/ng/resources/js/layout/sign-up/sign-up.controller.js
 create mode 100644 static/ng/resources/js/layout/sign-up/sign-up.module.js
 create mode 100644 static/ng/resources/js/services/user/services.user-exist.js
 rename views/ng/sections/{footerContent.htm => footer-content.htm} (100%)
 rename views/ng/sections/{footerInclude.htm => footer-include.htm} (100%)
 rename views/ng/sections/{headerContent.htm => header-content.htm} (100%)
 rename views/ng/sections/{headerInclude.htm => header-include.htm} (95%)
 create mode 100644 views/ng/sign-up.htm

diff --git a/controllers/ng/base.go b/controllers/ng/base.go
index 727ef9667..d703d5921 100644
--- a/controllers/ng/base.go
+++ b/controllers/ng/base.go
@@ -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")
 
 }
diff --git a/controllers/ng/signup.go b/controllers/ng/signup.go
new file mode 100644
index 000000000..e2883f4a9
--- /dev/null
+++ b/controllers/ng/signup.go
@@ -0,0 +1,9 @@
+package ng
+
+type SignUpController struct {
+	BaseController
+}
+
+func (suc *SignUpController) Get() {
+	suc.Forward("Sign Up", "sign-up.htm")
+}
diff --git a/ngrouter.go b/ngrouter.go
index fdab5104b..c196e5d10 100644
--- a/ngrouter.go
+++ b/ngrouter.go
@@ -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{})
 }
diff --git a/static/ng/resources/css/sign-up.css b/static/ng/resources/css/sign-up.css
new file mode 100644
index 000000000..9c158e288
--- /dev/null
+++ b/static/ng/resources/css/sign-up.css
@@ -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;
+}
\ No newline at end of file
diff --git a/static/ng/resources/js/components/project-member/add-project-member.directive.js b/static/ng/resources/js/components/project-member/add-project-member.directive.js
index 3f3ac9934..c5abca081 100644
--- a/static/ng/resources/js/components/project-member/add-project-member.directive.js
+++ b/static/ng/resources/js/components/project-member/add-project-member.directive.js
@@ -20,7 +20,6 @@
       AddProjectMemberService(2, vm.optRole, vm.username)
         .success(addProjectMemberComplete)
         .error(addProjectMemberFailed);
-      vm.isOpen = false;
       vm.username = "";
       vm.optRole = 1;
       vm.reload();
diff --git a/static/ng/resources/js/components/repository/pull-command.directive.js b/static/ng/resources/js/components/repository/pull-command.directive.js
index 6c3771e03..68868aeb2 100644
--- a/static/ng/resources/js/components/repository/pull-command.directive.js
+++ b/static/ng/resources/js/components/repository/pull-command.directive.js
@@ -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');
       });
   
     }
diff --git a/static/ng/resources/js/harbor.module.js b/static/ng/resources/js/harbor.module.js
index d82a5dfb5..a6f671bba 100644
--- a/static/ng/resources/js/harbor.module.js
+++ b/static/ng/resources/js/harbor.module.js
@@ -4,6 +4,7 @@
     .module('harbor.app', [
       'ngRoute',
       'harbor.layout.navigation',
+      'harbor.layout.sign.up',
       'harbor.layout.index',
       'harbor.layout.project',
       'harbor.layout.repository',
diff --git a/static/ng/resources/js/layout/sign-up/sign-up.controller.js b/static/ng/resources/js/layout/sign-up/sign-up.controller.js
new file mode 100644
index 000000000..7aecb9044
--- /dev/null
+++ b/static/ng/resources/js/layout/sign-up/sign-up.controller.js
@@ -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);
+  }
+  
+})();
\ No newline at end of file
diff --git a/static/ng/resources/js/layout/sign-up/sign-up.module.js b/static/ng/resources/js/layout/sign-up/sign-up.module.js
new file mode 100644
index 000000000..a41772fc6
--- /dev/null
+++ b/static/ng/resources/js/layout/sign-up/sign-up.module.js
@@ -0,0 +1,9 @@
+(function() {
+  
+  'use strict';
+  
+  angular
+    .module('harbor.layout.sign.up', [
+      'harbor.services.user']);
+
+})();
\ No newline at end of file
diff --git a/static/ng/resources/js/services/user/services.sign-up.js b/static/ng/resources/js/services/user/services.sign-up.js
index 1b1ad8584..1b2b47cdb 100644
--- a/static/ng/resources/js/services/user/services.sign-up.js
+++ b/static/ng/resources/js/services/user/services.sign-up.js
@@ -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
+        });
     }
   }
 })();
\ No newline at end of file
diff --git a/static/ng/resources/js/services/user/services.user-exist.js b/static/ng/resources/js/services/user/services.user-exist.js
new file mode 100644
index 000000000..6eeaae203
--- /dev/null
+++ b/static/ng/resources/js/services/user/services.user-exist.js
@@ -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}
+      });
+    } 
+  }
+  
+})();
\ No newline at end of file
diff --git a/ui/ngrouter.go b/ui/ngrouter.go
index fdab5104b..9bb0dd017 100644
--- a/ui/ngrouter.go
+++ b/ui/ngrouter.go
@@ -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{})
 }
diff --git a/views/ng/sections/footerContent.htm b/views/ng/sections/footer-content.htm
similarity index 100%
rename from views/ng/sections/footerContent.htm
rename to views/ng/sections/footer-content.htm
diff --git a/views/ng/sections/footerInclude.htm b/views/ng/sections/footer-include.htm
similarity index 100%
rename from views/ng/sections/footerInclude.htm
rename to views/ng/sections/footer-include.htm
diff --git a/views/ng/sections/headerContent.htm b/views/ng/sections/header-content.htm
similarity index 100%
rename from views/ng/sections/headerContent.htm
rename to views/ng/sections/header-content.htm
diff --git a/views/ng/sections/headerInclude.htm b/views/ng/sections/header-include.htm
similarity index 95%
rename from views/ng/sections/headerInclude.htm
rename to views/ng/sections/header-include.htm
index 69bc49a04..23fb690f2 100644
--- a/views/ng/sections/headerInclude.htm
+++ b/views/ng/sections/header-include.htm
@@ -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>
diff --git a/views/ng/sign-up.htm b/views/ng/sign-up.htm
new file mode 100644
index 000000000..02a6ce192
--- /dev/null
+++ b/views/ng/sign-up.htm
@@ -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>
\ No newline at end of file