Skip to content

Commit 9f63fec

Browse files
silverbuxsilverbux
committed
merging @ionut-tanasa registration-form-component-improvements PR silverbux#33 
1 parent f0b4702 commit 9f63fec

File tree

5 files changed

+58
-26
lines changed

5 files changed

+58
-26
lines changed

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

Lines changed: 25 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,38 @@
1-
<form name="userForm" ng-submit="vm.register(userForm.$valid)" novalidate>
2-
<div class="form-group has-feedback" ng-class="{ 'has-error': userForm.name.$invalid && ( vm.formSubmitted || userForm.name.$touched) }">
1+
<form name="vm.registerForm" ng-submit="vm.register(vm.registerForm.$valid)" novalidate>
2+
<div class="form-group has-feedback" ng-class="{ 'has-error': vm.registerForm.name.$invalid && ( vm.formSubmitted || vm.registerForm.name.$touched) }">
33
<input type="text" class="form-control" placeholder="Full name" ng-model="vm.name" name="name" ng-maxlength="30" required>
44
<span class="glyphicon glyphicon-user form-control-feedback"></span>
55

6-
<p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Full Name is required.</p>
7-
<p ng-show="userForm.name.$error.maxlength" class="help-block">Full Name is too long.</p>
8-
<p ng-show="userForm.name.$invalid && (vm.formSubmitted || vm.errors.name)" class="help-block">{{vm.errors.name}}</p>
6+
<p ng-show="vm.registerForm.name.$error.required && ( vm.formSubmitted || vm.registerForm.name.$touched)" class="help-block">Full Name is required.</p>
7+
<p ng-show="vm.registerForm.name.$error.maxlength" class="help-block">Full Name is too long.</p>
8+
<p ng-show="vm.registerForm.name.$invalid && (vm.formSubmitted || vm.errors.name)" class="help-block">{{vm.errors.name}}</p>
99
</div>
10-
<div class="form-group has-feedback" ng-class="{ 'has-error': userForm.email.$invalid && ( vm.formSubmitted || userForm.email.$touched) }">
11-
<input type="email" class="form-control" placeholder="Email" ng-model="vm.email" name="email" ng-maxlength="30" required>
10+
<div class="form-group has-feedback" ng-class="{ 'has-error': vm.registerForm.email.$invalid && ( vm.formSubmitted || vm.registerForm.email.$touched) }">
11+
<input type="email" class="form-control" placeholder="Email" ng-model="vm.email" name="email" ng-maxlength="30" ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/" required>
1212
<span class="glyphicon glyphicon-envelope form-control-feedback"></span>
1313

14-
<p ng-show="userForm.email.$invalid && (vm.formSubmitted || vm.errors.email)" class="help-block">{{vm.errors.email}}</p>
15-
<p ng-show="userForm.email.$error.required && ( vm.formSubmitted || userForm.email.$touched)" class="help-block">Email is required.</p>
16-
<p ng-show="userForm.email.$error.email && userForm.email.$touched" class="help-block">This is not a valid email.</p>
14+
<p ng-show="vm.registerForm.email.$invalid && (vm.formSubmitted || vm.errors.email)" class="help-block">{{vm.errors.email}}</p>
15+
<p ng-show="vm.registerForm.email.$error.required && ( vm.formSubmitted || vm.registerForm.email.$touched)" class="help-block">Email is required.</p>
16+
<p ng-show="vm.registerForm.email.$error.email && vm.registerForm.email.$touched" class="help-block">This is not a valid email.</p>
1717
</div>
18-
<div class="form-group has-feedback" ng-class="{ 'has-error': userForm.password.$invalid && ( vm.formSubmitted || userForm.password.$touched) }">
18+
<div class="form-group has-feedback" ng-class="{ 'has-error': vm.registerForm.password.$invalid && ( vm.formSubmitted || vm.registerForm.password.$touched) }">
1919
<input type="password" class="form-control" placeholder="Password" ng-model="vm.password" name="password" ng-minlength="8" ng-maxlength="50" required>
2020
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
2121

22-
<p ng-show="userForm.password.$error.required && ( vm.formSubmitted || userForm.password.$touched)" class="help-block">Password is required.</p>
23-
<p ng-show="userForm.password.$error.maxlength" class="help-block">Password is too long.</p>
24-
<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>
25-
<p ng-show="userForm.password.$invalid && (vm.formSubmitted || vm.errors.password)" class="help-block">{{vm.errors.password}}</p>
22+
<p ng-show="vm.registerForm.password.$error.required && ( vm.formSubmitted || vm.registerForm.password.$touched)" class="help-block">Password is required.</p>
23+
<p ng-show="vm.registerForm.password.$error.maxlength" class="help-block">Password is too long.</p>
24+
<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>
25+
<p ng-show="vm.registerForm.password.$invalid && (vm.formSubmitted || vm.errors.password)" class="help-block">{{vm.errors.password}}</p>
26+
</div>
27+
<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)) }">
28+
<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>
29+
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
30+
31+
<p ng-show="vm.registerForm.password_confirmation.$error.required && ( vm.formSubmitted || vm.registerForm.password_confirmation.$touched)" class="help-block">Password confirmation is required.</p>
32+
<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>
33+
<p ng-show="vm.registerForm.password_confirmation.$error.maxlength" class="help-block">Password confirmation is too long.</p>
34+
<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>
35+
<p ng-show="vm.registerForm.password_confirmation.$invalid && (vm.formSubmitted || vm.errors.password_confirmation)" class="help-block">{{vm.errors.password_confirmation}}</p>
2636
</div>
2737
<div class="row">
2838
<div class="col-xs-12">

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ class RegisterFormController {
77
this.$scope = $scope
88

99
this.password = ''
10+
this.password_confirmation = ''
1011
this.formSubmitted = false
1112
this.errors = []
1213
}
@@ -15,14 +16,16 @@ class RegisterFormController {
1516
this.name = ''
1617
this.email = ''
1718
this.password = ''
19+
this.password_confirmation = ''
1820
}
1921

2022
register (isValid) {
2123
if (isValid) {
2224
var user = {
2325
name: this.name,
2426
email: this.email,
25-
password: this.password
27+
password: this.password,
28+
password_confirmation: this.password_confirmation
2629
}
2730

2831
this.$auth.signup(user)

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

Lines changed: 22 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,31 @@
33
<a ui-sref="login"><b>Admin</b>LTE</a>
44
</div>
55
<div class="register-box-body">
6-
<p class="login-box-msg">Register a new membership</p>
7-
<register-form></register-form>
6+
<div class="row">
7+
<div class="col-xs-12">
8+
<div class="text-center">
9+
<h3>Create a new account</h3>
10+
</div>
11+
</div>
12+
</div>
13+
<div class="row">
14+
<div class="col-xs-12">
15+
<register-form></register-form>
16+
</div>
17+
</div>
18+
<br>
19+
<div class="row">
20+
<div class="col-xs-12">
21+
<div class="text-center">
22+
<a ui-sref="login">I already have an account</a>
23+
</div>
24+
</div>
25+
</div>
826
<br>
9-
<a ui-sref="login" class="text-center">I already have a membership</a>
10-
<br><br>
1127
<div class="row">
1228
<div class="col-xs-12">
13-
By signing up, you agree to our <a href="#">Terms</a> and that you have read our <a href="#">Privacy Policy</a>.
29+
By signing up, you agree to our <a href="#">Terms</a> and that you have read our <a href="#">Privacy
30+
Policy</a>.
1431
</div>
1532
</div>
1633
</div>

‎app/Http/Controllers/Auth/AuthController.php

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ public function postRegister(Request $request)
187187
$this->validate($request, [
188188
'name' => 'required|min:3',
189189
'email' => 'required|email|unique:users',
190-
'password' => 'required|min:8',
190+
'password' => 'required|min:8|confirmed',
191191
]);
192192

193193
$verificationCode = str_random(40);

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

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,17 @@ ngDescribe({
33
modules: 'app',
44
element: '<register-form></register-form>',
55
tests: function (deps) {
6-
it('Should have name, email, password inputs', () => {
6+
it('Should have name, email, password and password confirmation', () => {
77
var inputs = deps.element.find('input')
8-
expect(inputs.length).toBe(3)
8+
expect(inputs.length).toBe(4)
99
var name = deps.element.find('input')[0]
1010
expect(name.attributes['type'].value).toBe('text')
1111
var email = deps.element.find('input')[1]
1212
expect(email.attributes['type'].value).toBe('email')
13-
var passsword = deps.element.find('input')[2]
14-
expect(passsword.attributes['type'].value).toBe('password')
13+
var password = deps.element.find('input')[2]
14+
expect(password.attributes['type'].value).toBe('password')
15+
var password_confirmation = deps.element.find('input')[3]
16+
expect(password_confirmation.attributes['type'].value).toBe('password')
1517
})
1618
}
1719
})

0 commit comments

Comments
 (0)