Skip to content

Commit d8d2e02

Browse files
Ionut Tanasasilverbux
Ionut Tanasa
authored and
silverbux
committed
Reset password form improvements (silverbux#35)
* reset-password improvements
1 parent e969b11 commit d8d2e02

File tree

3 files changed

+54
-30
lines changed

3 files changed

+54
-30
lines changed

‎angular/app/components/reset-password/reset-password.component.html

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<form ng-submit="vm.submit()">
1+
<form ng-submit="vm.submit(vm.resetPasswordForm.$valid)" name="vm.resetPasswordForm" novalidate>
22
<div ng-if="!vm.isValidToken" layout="row" layout-align="center center">
33
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
44
</div>
@@ -7,19 +7,28 @@ <h4>{{alert.title}}</h4>
77
<p>{{alert.msg}}</p>
88
</div>
99
<div ng-show="vm.isValidToken">
10-
<div class="form-group has-feedback">
11-
<input type="password" ng-model="vm.password" class="form-control" placeholder="Please enter your new password">
10+
<div class="form-group has-feedback" ng-class="{ 'has-error': vm.resetPasswordForm.password.$invalid && ( vm.formSubmitted || vm.resetPasswordForm.password.$touched) }">
11+
<input type="password" class="form-control" placeholder="Please enter your new password" ng-model="vm.password" name="password" ng-minlength="8" ng-maxlength="50" required>
1212
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
13+
14+
<p ng-show="vm.resetPasswordForm.password.$error.required && ( vm.formSubmitted || vm.resetPasswordForm.password.$touched)" class="help-block">Password is required.</p>
15+
<p ng-show="vm.resetPasswordForm.password.$error.maxlength" class="help-block">Password is too long.</p>
16+
<p ng-show="vm.resetPasswordForm.password.$invalid && vm.resetPasswordForm.password.$error.minlength && vm.resetPasswordForm.password.$touched" class="help-block">Password is too short, Please enter more than 8 characters.</p>
17+
<p ng-show="vm.resetPasswordForm.password.$invalid && (vm.formSubmitted || vm.errors.password)" class="help-block">{{vm.errors.password}}</p>
1318
</div>
14-
<div class="form-group has-feedback">
15-
<input type="password" ng-model="vm.password_confirmation" class="form-control" placeholder="Please confirm your new password">
19+
<div class="form-group has-feedback" ng-class="{ 'has-error': vm.resetPasswordForm.password_confirmation.$invalid && ( vm.formSubmitted || vm.resetPasswordForm.password_confirmation.$touched || (vm.password !== vm.password_confirmation && vm.resetPasswordForm.password.$touched)) }">
20+
<input type="password" class="form-control" placeholder="Please confirm your new password" ng-model="vm.password_confirmation" password-verify="vm.password" name="password_confirmation" ng-minlength="8" ng-maxlength="50" required>
1621
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
17-
</div>
1822

23+
<p ng-show="vm.resetPasswordForm.password_confirmation.$error.required && ( vm.formSubmitted || vm.resetPasswordForm.password_confirmation.$touched)" class="help-block">Password confirmation is required.</p>
24+
<p ng-show="vm.resetPasswordForm.password_confirmation.$error.passwordVerify && (vm.formSubmitted || vm.resetPasswordForm.password_confirmation.$touched)" class="help-block">Password confirmation does not match.</p>
25+
<p ng-show="vm.password !== vm.password_confirmation && vm.resetPasswordForm.password.$touched" class="help-block">Password confirmation does not match.</p>
26+
<p ng-show="vm.resetPasswordForm.password_confirmation.$error.maxlength" class="help-block">Password confirmation is too long.</p>
27+
<p ng-show="vm.resetPasswordForm.password_confirmation.$invalid && vm.resetPasswordForm.password_confirmation.$error.minlength && vm.resetPasswordForm.password_confirmation.$touched" class="help-block">Password confirmation is too short, Please enter more than 8 characters.</p>
28+
<p ng-show="vm.resetPasswordForm.password_confirmation.$invalid && (vm.formSubmitted || vm.errors.password_confirmation)" class="help-block">{{vm.errors.password_confirmation}}</p>
29+
</div>
1930
<div class="row">
20-
<div class="col-xs-8">
21-
</div>
22-
<div class="col-xs-4">
31+
<div class="col-xs-12">
2332
<button type="submit" class="btn btn-primary btn-block btn-flat">Submit</button>
2433
</div>
2534
</div>

‎angular/app/components/reset-password/reset-password.component.js

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ class ResetPasswordController {
1111
this.password = ''
1212
this.password_confirmation = ''
1313
this.isValidToken = false
14+
this.formSubmitted = false
1415

1516
this.verifyToken()
1617
}
@@ -27,26 +28,30 @@ class ResetPasswordController {
2728
})
2829
}
2930

30-
submit () {
31-
this.alerts = []
32-
let data = {
33-
email: this.$state.params.email,
34-
token: this.$state.params.token,
35-
password: this.password,
36-
password_confirmation: this.password_confirmation
31+
submit (isValid) {
32+
if(isValid) {
33+
this.alerts = []
34+
let data = {
35+
email: this.$state.params.email,
36+
token: this.$state.params.token,
37+
password: this.password,
38+
password_confirmation: this.password_confirmation
39+
}
40+
41+
this.API.all('auth/password/reset').post(data).then(() => {
42+
this.$state.go('login', {successMsg: `Your password has been changed, You may now login.`})
43+
}, (res) => {
44+
let alrtArr = []
45+
46+
angular.forEach(res.data.errors, function (value) {
47+
alrtArr = {type: 'error', 'title': 'Error!', msg: value[0]}
48+
})
49+
50+
this.alerts.push(alrtArr)
51+
})
52+
} else {
53+
this.formSubmitted = true
3754
}
38-
39-
this.API.all('auth/password/reset').post(data).then(() => {
40-
this.$state.go('login', { successMsg: `Your password has been changed, You may now login.` })
41-
}, (res) => {
42-
let alrtArr = []
43-
44-
angular.forEach(res.data.errors, function (value) {
45-
alrtArr = { type: 'error', 'title': 'Error!', msg: value[0]}
46-
})
47-
48-
this.alerts.push(alrtArr)
49-
})
5055
}
5156
}
5257

‎angular/app/pages/reset-password/reset-password.page.html

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,17 @@
33
<a ui-sref="login"><b>Admin</b>LTE</a>
44
</div>
55
<div class="login-box-body">
6-
<h3>Reset Password</h3>
7-
<reset-password></reset-password>
6+
<div class="row-">
7+
<div class="col-xs-12">
8+
<div class="text-center">
9+
<h3>Reset Password</h3>
10+
</div>
11+
</div>
12+
</div>
13+
<div class="row">
14+
<div class="col-xs-12">
15+
<reset-password></reset-password>
16+
</div>
17+
</div>
818
</div>
919
</div>

0 commit comments

Comments
 (0)