Added validation to forgot password form (silverbux#34)

* Added validation to forgot password form

* Showing error message instead of disabling button

Author: Ionut Tanasa

angular/app/components/forgot-password/forgot-password.component.html

@@ -1,17 +1,23 @@
-<form ng-submit="vm.submit()" class="ForgotPassword-form">
+<form ng-submit="vm.submit()" class="ForgotPassword-form" name="vm.forgotPasswordForm" novalidate>
     <div class="callout callout-danger" ng-if="vm.errorTrigger">
         <h4>Error:</h4>
         <p>Please check your email and try again.</p>
     </div>
-    <div class="form-group has-feedback">
-        <input type="email" class="form-control" placeholder="Please enter your email address" ng-model="vm.email">
+    <div class="form-group has-feedback" ng-class="{ 'has-error': vm.forgotPasswordForm.email.$invalid && ( vm.formSubmitted || vm.forgotPasswordForm.email.$touched) }">
+        <input type="email" class="form-control" placeholder="Please enter your email address"
+               name="email"
+               ng-model="vm.email"
+               ng-required="true"
+               ng-pattern="/^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/">
         <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
+        <p ng-show="vm.forgotPasswordForm.email.$error.email  && ( vm.formSubmitted || vm.forgotPasswordForm.email.$touched)" class="help-block">This is not a valid email</p>
+        <p ng-show="vm.forgotPasswordForm.email.$error.required && ( vm.formSubmitted || vm.forgotPasswordForm.email.$touched)" class="help-block">Email is required.</p>
     </div>
     <div class="row">
-        <div class="col-xs-8">
-        </div>
-        <div class="col-xs-4">
-            <button type="submit" class="btn btn-primary btn-block btn-flat">Submit</button>
+        <div class="col-xs-12">
+            <button type="submit" class="btn btn-primary btn-block btn-flat">
+                Submit
+            </button>
         </div>
     </div>
 </form>

angular/app/components/forgot-password/forgot-password.component.js

@@ -4,7 +4,7 @@ class ForgotPasswordController {
 
     this.API = API
     this.$state = $state
-    this.errorTrigger = false
+    this.formSubmitted = false
   }
 
   $onInit () {
@@ -17,7 +17,7 @@ class ForgotPasswordController {
     }).then(() => {
       this.$state.go('login', { successMsg: `Please check your email for instructions on how to reset your password.` })
     }, () => {
-      this.errorTrigger = true
+      this.formSubmitted = true
     })
   }
 }

angular/app/pages/forgot-password/forgot-password.page.html

@@ -3,8 +3,23 @@
     <a ui-sref="login"><b>Admin</b>LTE</a>
   </div>
   <div class="login-box-body">
-    <h3>Forgot your password?</h3>
-    <forgot-password></forgot-password>
-    <a ui-sref="login">Back to Login Page</a>
+      <div class="row">
+          <div class="col-xs-12">
+              <div class="text-center">
+                  <h3>Forgot your password?</h3>
+              </div>
+          </div>
+      </div>
+      <div class="row">
+          <div class="col-xs-12">
+              <forgot-password></forgot-password>
+          </div>
+      </div>
+      <br>
+      <div class="row">
+          <div class="col-xs-12">
+              <a ui-sref="login">Back to Login Page</a>
+          </div>
+      </div>
   </div>
 </div>