Reset password form improvements (#35)

* reset-password improvements
silverbux · Jun 7, 2016 · d8d2e02 · d8d2e02
1 parent e969b11
commit d8d2e02
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 30 deletions.
diff --git a/angular/app/components/reset-password/reset-password.component.html b/angular/app/components/reset-password/reset-password.component.html
@@ -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>
@@ -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>

diff --git a/angular/app/components/reset-password/reset-password.component.js b/angular/app/components/reset-password/reset-password.component.js
@@ -11,6 +11,7 @@ class ResetPasswordController {
     this.password = ''
     this.password_confirmation = ''
     this.isValidToken = false
+    this.formSubmitted = false
 
     this.verifyToken()
   }
@@ -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)
-    })
   }
 }
 

diff --git a/angular/app/pages/reset-password/reset-password.page.html b/angular/app/pages/reset-password/reset-password.page.html
@@ -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>