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

Reset password form improvements #35

Merged
merged 2 commits into from Jun 7, 2016
Merged

Reset password form improvements #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
fb09290
reset password form improvs
ionut-tanasa Jun 7, 2016
1c21a8d
reset-password improvements
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
27 changes: 18 additions & 9 deletions angular/app/components/reset-password/reset-password.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<form ng-submit="vm.submit()">
<form ng-submit="vm.submit(vm.resetPasswordForm.$valid)" name="vm.resetPasswordForm" novalidate>
<div ng-if="!vm.isValidToken" layout="row" layout-align="center center">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
Expand All @@ -7,19 +7,28 @@ <h4>{{alert.title}}</h4>
<p>{{alert.msg}}</p>
</div>
<div ng-show="vm.isValidToken">
<div class="form-group has-feedback">
<input type="password" ng-model="vm.password" class="form-control" placeholder="Please enter your new password">
<div class="form-group has-feedback" ng-class="{ 'has-error': vm.resetPasswordForm.password.$invalid && ( vm.formSubmitted || vm.resetPasswordForm.password.$touched) }">
<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>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>

<p ng-show="vm.resetPasswordForm.password.$error.required && ( vm.formSubmitted || vm.resetPasswordForm.password.$touched)" class="help-block">Password is required.</p>
<p ng-show="vm.resetPasswordForm.password.$error.maxlength" class="help-block">Password is too long.</p>
<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>
<p ng-show="vm.resetPasswordForm.password.$invalid && (vm.formSubmitted || vm.errors.password)" class="help-block">{{vm.errors.password}}</p>
</div>
<div class="form-group has-feedback">
<input type="password" ng-model="vm.password_confirmation" class="form-control" placeholder="Please confirm your new password">
<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)) }">
<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>
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>

<p ng-show="vm.resetPasswordForm.password_confirmation.$error.required && ( vm.formSubmitted || vm.resetPasswordForm.password_confirmation.$touched)" class="help-block">Password confirmation is required.</p>
<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>
<p ng-show="vm.password !== vm.password_confirmation && vm.resetPasswordForm.password.$touched" class="help-block">Password confirmation does not match.</p>
<p ng-show="vm.resetPasswordForm.password_confirmation.$error.maxlength" class="help-block">Password confirmation is too long.</p>
<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>
<p ng-show="vm.resetPasswordForm.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-8">
</div>
<div class="col-xs-4">
<div class="col-xs-12">
<button type="submit" class="btn btn-primary btn-block btn-flat">Submit</button>
</div>
</div>
Expand Down
43 changes: 24 additions & 19 deletions angular/app/components/reset-password/reset-password.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ class ResetPasswordController {
this.password = ''
this.password_confirmation = ''
this.isValidToken = false
this.formSubmitted = false

this.verifyToken()
}
Expand All @@ -27,26 +28,30 @@ class ResetPasswordController {
})
}

submit () {
this.alerts = []
let data = {
email: this.$state.params.email,
token: this.$state.params.token,
password: this.password,
password_confirmation: this.password_confirmation
submit (isValid) {
if(isValid) {
this.alerts = []
let data = {
email: this.$state.params.email,
token: this.$state.params.token,
password: this.password,
password_confirmation: this.password_confirmation
}

this.API.all('auth/password/reset').post(data).then(() => {
this.$state.go('login', {successMsg: `Your password has been changed, You may now login.`})
}, (res) => {
let alrtArr = []

angular.forEach(res.data.errors, function (value) {
alrtArr = {type: 'error', 'title': 'Error!', msg: value[0]}
})

this.alerts.push(alrtArr)
})
} else {
this.formSubmitted = true
}

this.API.all('auth/password/reset').post(data).then(() => {
this.$state.go('login', { successMsg: `Your password has been changed, You may now login.` })
}, (res) => {
let alrtArr = []

angular.forEach(res.data.errors, function (value) {
alrtArr = { type: 'error', 'title': 'Error!', msg: value[0]}
})

this.alerts.push(alrtArr)
})
}
}

Expand Down
14 changes: 12 additions & 2 deletions angular/app/pages/reset-password/reset-password.page.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,17 @@
<a ui-sref="login"><b>Admin</b>LTE</a>
</div>
<div class="login-box-body">
<h3>Reset Password</h3>
<reset-password></reset-password>
<div class="row-">
<div class="col-xs-12">
<div class="text-center">
<h3>Reset Password</h3>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<reset-password></reset-password>
</div>
</div>
</div>
</div>