Registration form improvements

angular/app/components/register-form/register-form.component.html

@@ -1,28 +1,38 @@
-<form name="userForm" ng-submit="vm.register(userForm.$valid)" novalidate>
-    <div class="form-group has-feedback" ng-class="{ 'has-error': userForm.name.$invalid && ( vm.formSubmitted || userForm.name.$touched) }">
-        <input type="text" class="form-control" placeholder="Full name" ng-model="vm.name" name="name" ng-maxlength="30">
+<form name="vm.registerForm" ng-submit="vm.register(vm.registerForm.$valid)" novalidate>
+    <div class="form-group has-feedback" ng-class="{ 'has-error': vm.registerForm.name.$invalid && ( vm.formSubmitted || vm.registerForm.name.$touched) }">
+        <input type="text" class="form-control" placeholder="Full name" ng-model="vm.name" name="name" ng-maxlength="30" required>
         <span class="glyphicon glyphicon-user form-control-feedback"></span>
 
-        <p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Full Name is required.</p>
-  		<p ng-show="userForm.name.$error.maxlength" class="help-block">Full Name is too long.</p>
-        <p ng-show="userForm.name.$invalid && (vm.formSubmitted || vm.errors.name)" class="help-block">{{vm.errors.name}}</p>
+        <p ng-show="vm.registerForm.name.$error.required && ( vm.formSubmitted || vm.registerForm.name.$touched)" class="help-block">Full Name is required.</p>
+  		<p ng-show="vm.registerForm.name.$error.maxlength" class="help-block">Full Name is too long.</p>
+        <p ng-show="vm.registerForm.name.$invalid && (vm.formSubmitted || vm.errors.name)" class="help-block">{{vm.errors.name}}</p>
     </div>
-    <div class="form-group has-feedback" ng-class="{ 'has-error': userForm.email.$invalid && ( vm.formSubmitted || userForm.email.$touched) }">
-        <input type="email" class="form-control" placeholder="Email" ng-model="vm.email" name="email" ng-maxlength="30" required>
+    <div class="form-group has-feedback" ng-class="{ 'has-error': vm.registerForm.email.$invalid && ( vm.formSubmitted || vm.registerForm.email.$touched) }">
+        <input type="email" class="form-control" placeholder="Email" ng-model="vm.email" name="email" ng-maxlength="30" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required>
         <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
 
-        <p ng-show="userForm.email.$invalid && (vm.formSubmitted || vm.errors.email)" class="help-block">{{vm.errors.email}}</p>
-        <p ng-show="userForm.email.$error.required && ( vm.formSubmitted || userForm.email.$touched)" class="help-block">Email is required.</p>
-        <p ng-show="userForm.email.$error.email && userForm.email.$touched" class="help-block">This is not a valid email.</p>
+        <p ng-show="vm.registerForm.email.$invalid && (vm.formSubmitted || vm.errors.email)" class="help-block">{{vm.errors.email}}</p>
+        <p ng-show="vm.registerForm.email.$error.required && ( vm.formSubmitted || vm.registerForm.email.$touched)" class="help-block">Email is required.</p>
+        <p ng-show="vm.registerForm.email.$error.email && vm.registerForm.email.$touched" class="help-block">This is not a valid email.</p>
     </div>
-    <div class="form-group has-feedback" ng-class="{ 'has-error': userForm.password.$invalid && ( vm.formSubmitted || userForm.password.$touched) }">
+    <div class="form-group has-feedback" ng-class="{ 'has-error': vm.registerForm.password.$invalid && ( vm.formSubmitted || vm.registerForm.password.$touched) }">
         <input type="password" class="form-control" placeholder="Password" ng-model="vm.password" name="password" ng-minlength="8" ng-maxlength="50" required>
         <span class="glyphicon glyphicon-lock form-control-feedback"></span>
 
-        <p ng-show="userForm.password.$error.required && ( vm.formSubmitted || userForm.password.$touched)" class="help-block">Password is required.</p>
-  		<p ng-show="userForm.password.$error.maxlength" class="help-block">Password is too long.</p>
-  		<p ng-show="userForm.password.$invalid && userForm.password.$error.minlength && userForm.password.$touched" class="help-block">Password is too short, Please enter more than 8 characters.</p>
-        <p ng-show="userForm.password.$invalid && (vm.formSubmitted || vm.errors.password)" class="help-block">{{vm.errors.password}}</p>
+        <p ng-show="vm.registerForm.password.$error.required && ( vm.formSubmitted || vm.registerForm.password.$touched)" class="help-block">Password is required.</p>
+  		<p ng-show="vm.registerForm.password.$error.maxlength" class="help-block">Password is too long.</p>
+  		<p ng-show="vm.registerForm.password.$invalid && vm.registerForm.password.$error.minlength && vm.registerForm.password.$touched" class="help-block">Password is too short, Please enter more than 8 characters.</p>
+        <p ng-show="vm.registerForm.password.$invalid && (vm.formSubmitted || vm.errors.password)" class="help-block">{{vm.errors.password}}</p>
+    </div>
+    <div class="form-group has-feedback" ng-class="{ 'has-error': vm.registerForm.password_confirmation.$invalid && ( vm.formSubmitted || vm.registerForm.password_confirmation.$touched || (vm.password !== vm.password_confirmation && vm.registerForm.password.$touched)) }">
+        <input type="password" class="form-control" placeholder="Password confirmation" ng-model="vm.password_confirmation" password-verify="vm.password" name="password_confirmation" ng-minlength="8" ng-maxlength="50" required>
+        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
+
+        <p ng-show="vm.registerForm.password_confirmation.$error.required && ( vm.formSubmitted || vm.registerForm.password_confirmation.$touched)" class="help-block">Password confirmation is required.</p>
+        <p ng-show="vm.registerForm.password_confirmation.$error.passwordVerify && ( vm.formSubmitted || vm.registerForm.password_confirmation.$touched)" class="help-block">Password confirmation does not match.</p>
+  		<p ng-show="vm.registerForm.password_confirmation.$error.maxlength" class="help-block">Password confirmation is too long.</p>
+  		<p ng-show="vm.registerForm.password_confirmation.$invalid && vm.registerForm.password_confirmation.$error.minlength && vm.registerForm.password_confirmation.$touched" class="help-block">Password confirmation is too short, Please enter more than 8 characters.</p>
+        <p ng-show="vm.registerForm.password_confirmation.$invalid && (vm.formSubmitted || vm.errors.password_confirmation)" class="help-block">{{vm.errors.password_confirmation}}</p>
     </div>
     <div class="row">
         <div class="col-xs-12">

angular/app/components/register-form/register-form.component.js

@@ -7,6 +7,7 @@ class RegisterFormController {
     this.$scope = $scope
 
     this.password = ''
+    this.password_confirmation = ''
     this.formSubmitted = false
     this.errors = []
   }
@@ -15,14 +16,16 @@ class RegisterFormController {
     this.name = ''
     this.email = ''
     this.password = ''
+    this.password_confirmation = ''
   }
 
   register (isValid) {
     if (isValid) {
       var user = {
         name: this.name,
         email: this.email,
-        password: this.password
+        password: this.password,
+        password_confirmation: this.password_confirmation
       }
 
       this.$auth.signup(user)

angular/app/pages/register/register.page.html

@@ -3,14 +3,31 @@
         <a ui-sref="login"><b>Admin</b>LTE</a>
     </div>
     <div class="register-box-body">
-        <p class="login-box-msg">Register a new membership</p>
-        <register-form></register-form>
+        <div class="row">
+            <div class="col-xs-12">
+                <div class="text-center">
+                    <h3>Create a new account</h3>
+                </div>
+            </div>
+        </div>
+        <div class="row">
+            <div class="col-xs-12">
+                <register-form></register-form>
+            </div>
+        </div>
+        <br>
+        <div class="row">
+            <div class="col-xs-12">
+                <div class="text-center">
+                    <a ui-sref="login">I already have an account</a>
+                </div>
+            </div>
+        </div>
         <br>
-        <a ui-sref="login" class="text-center">I already have a membership</a>
-        <br><br>
         <div class="row">
             <div class="col-xs-12">
-                By signing up, you agree to our <a href="#">Terms</a> and that you have read our <a href="#">Privacy Policy</a>.
+                By signing up, you agree to our <a href="#">Terms</a> and that you have read our <a href="#">Privacy
+                Policy</a>.
             </div>
         </div>
     </div>

app/Http/Controllers/Auth/AuthController.php

@@ -187,7 +187,7 @@ public function postRegister(Request $request)
         $this->validate($request, [
             'name'       => 'required|min:3',
             'email'      => 'required|email|unique:users',
-            'password'   => 'required|min:8',
+            'password'   => 'required|min:8|confirmed',
         ]);
 
         $verificationCode = str_random(40);

tests/angular/app/components/register-form/register-form.component.spec.js

@@ -3,15 +3,17 @@ ngDescribe({
   modules: 'app',
   element: '<register-form></register-form>',
   tests: function (deps) {
-    it('Should have name, email, password inputs', () => {
+    it('Should have name, email, password and password confirmation', () => {
       var inputs = deps.element.find('input')
-      expect(inputs.length).toBe(3)
+      expect(inputs.length).toBe(4)
       var name = deps.element.find('input')[0]
       expect(name.attributes['type'].value).toBe('text')
       var email = deps.element.find('input')[1]
       expect(email.attributes['type'].value).toBe('email')
-      var passsword = deps.element.find('input')[2]
-      expect(passsword.attributes['type'].value).toBe('password')
+      var password = deps.element.find('input')[2]
+      expect(password.attributes['type'].value).toBe('password')
+      var password_confirmation = deps.element.find('input')[3]
+      expect(password_confirmation.attributes['type'].value).toBe('password')
     })
   }
 })