Skip to content
This repository has been archived by the owner on Aug 11, 2022. It is now read-only.

Registration form improvements #33

Closed
wants to merge 6 commits into from
Closed

Registration form improvements #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
23615c7
Registration form improvements
ionut-tanasa Jun 6, 2016
c593f73
keeping registerForm in the same scope
ionut-tanasa Jun 6, 2016
5b4191e
changed form "title" to an h3 to stay in line with the other forms li…
ionut-tanasa Jun 6, 2016
fd25384
Updated password_confirmation input. Added password-verify directive
ionut-tanasa Jun 7, 2016
d74700f
updated test
ionut-tanasa Jun 7, 2016
76cf627
adding validation form password_confirmation field
ionut-tanasa Jun 7, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 26 additions & 16 deletions angular/app/components/register-form/register-form.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
5 changes: 4 additions & 1 deletion angular/app/components/register-form/register-form.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ class RegisterFormController {
this.$scope = $scope

this.password = ''
this.password_confirmation = ''
this.formSubmitted = false
this.errors = []
}
Expand All @@ -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)
Expand Down
27 changes: 22 additions & 5 deletions angular/app/pages/register/register.page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion app/Http/Controllers/Auth/AuthController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
10 changes: 6 additions & 4 deletions tests/angular/app/components/register-form/register-form.component.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')
})
}
})