From 0886d922a5d2be9fdc5d14c494e5ad141bc59677 Mon Sep 17 00:00:00 2001
From: weichien <weichien00@gmail.com>
Date: Sun, 23 May 2021 15:27:04 +0800
Subject: [PATCH] feat: front-end forget password component and blade update.

---
 .../forms/ForgetPasswordFormComponent.vue     | 43 +++++++++++++------
 .../accounts/forms/LoginFormComponent.vue     |  2 +-
 .../views/pages/accounts/login.blade.php      | 24 ++++++++++-
 3 files changed, 53 insertions(+), 16 deletions(-)

diff --git a/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue b/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue
index 6fa4ea8b..ddf52cde 100644
--- a/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/ForgetPasswordFormComponent.vue
@@ -6,27 +6,41 @@
                     <small class="bold fs-10 text-danger">{{error}}</small>
                 </div>
             </div>
-            <div class="row m-l-0 animate__animated animate__fadeInUpBig">
-                <div class="col b-t b-b b-grey animate__animated" :class="[{'animate__shake': $v.parameters.email.$error}]"  :style="[$v.parameters.email.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+            <div class="row m-l-0" v-show="!$store.getters.isShowing('forgetPasswordSuccess')">
+                <div class="col animate__animated">
                     <div class="row align-items-center">
                         <div class="col no-padding bg-white ">
-                            <div class="input-group transparent">
-                                <span class="input-group-addon no-border">
-                                    <i class="fa fa-envelope-o fa-fw p-l-15 p-t-20" style="padding-right: 18px;"></i>
-                                </span>
-                                <input v-model="parameters.email" placeholder="Email Address" class="form-control no-border bg-white p-t-35 p-b-35 p-l-0 p-r-0">
-                                <validation-error-component :validator="$v.parameters.email" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                            <validation-wrapper-component class="m-b-15" :validator="$v.parameters.email">
+                                <label class="text-primary">Email Address</label>
+                                <div class="controls">
+                                    <input type="text" class="form-control fs-12" v-model="parameters.email">
+                                </div>
+                            </validation-wrapper-component>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row m-l-0" v-show="$store.getters.isShowing('forgetPasswordSuccess')">
+                <div class="col animate__animated">
+                    <div class="row align-items-center">
+                        <div class="col no-padding bg-white ">
+                            <div class="row animate__animated animate__fadeInRightBig">
+                                <div class="col">
+                                    <small class="muted font-lato all-caps">Your password has been changed successfully</small>
+                                </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
-            <div class="row m-t-30 align-items-center">
-                <div class="col-auto animate__animated animate__fadeInLeftBig animate__slower">
-                    <div class="b-t b-b b-r b-grey all-caps muted p-t-15 p-b-15 p-l-30 p-r-20 font-lato pointer fs-12" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: false})" style="letter-spacing: 2px;"><i class="fa fa-angle-left" style="padding-right: 18px;"></i>Back to login</div>
+
+            <div class="row m-t-5 align-items-center">
+                <div class="col-auto ml-auto p-r-0" v-show="!$store.getters.isShowing('forgetPasswordSuccess')">
+                    <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submit(route('api.account.authentication.password.forget'), 'post', section, false , false)">Request Reset Link</div>
                 </div>
-                <div class="col-auto ml-auto p-r-0 animate__animated animate__fadeInRightBig animate__slow">
-                    <div class="bg-success all-caps text-white p-t-15 p-b-15 p-l-50 p-r-20 bold font-lato pointer fs-12" style="letter-spacing: 4px;" @click="submit(route('api.account.authentication.password.forget'), 'post', section, false , false)">Request Reset Link</div>
+                <div class="col-auto m-t-15">
+                    <div class="b-t b-b b-r b-grey all-caps muted p-t-15 p-b-15 p-l-30 p-r-20 font-lato pointer fs-12" @click="$store.dispatch('returnToLoginAfterSendResetPasswordLink')" style="letter-spacing: 2px;"><i class="fa fa-angle-left" style="padding-right: 18px;"></i>Back to login</div>
                 </div>
             </div>
         </div>
@@ -59,7 +73,8 @@
         methods:{
             successHandler(){
                 this.$store.dispatch('toggleSection', {name: 'forgetPasswordSuccess', status: true});
-                this.$store.dispatch('passwordResetEmail', {email: this.parameters.email})
+                this.$store.dispatch('passwordResetEmail', {email: this.parameters.email});
+                this.resetForm();
             },
             errorHandler(error){
                 this.error = error.message;
diff --git a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
index 454038a7..2e174168 100644
--- a/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
+++ b/resources/assets/vue/components/accounts/forms/LoginFormComponent.vue
@@ -18,7 +18,7 @@
                     </validation-wrapper-component>
                     <div class="row m-t-15 align-items-center justify-content-center">
                         <div class="col-auto">
-                            <p class="muted fs-11 font-arial m-b-0 pointer">Forgot password?</p>
+                            <p class="muted fs-11 font-arial m-b-0 pointer" @click="$store.dispatch('toggleSection', {name: 'forgetPassword', status: true})">Forgot password?</p>
                         </div>
                         <div class="col text-right">
                             <div class="btn btn-sm p-l-30 p-r-30 btn-primary bold v-align-middle b-rad-none all-caps" @click="submitForm">Sign In</div>
diff --git a/resources/views/pages/accounts/login.blade.php b/resources/views/pages/accounts/login.blade.php
index 812c56ce..39c81051 100644
--- a/resources/views/pages/accounts/login.blade.php
+++ b/resources/views/pages/accounts/login.blade.php
@@ -5,7 +5,7 @@
         <div class="row" key="1">
             <div class="col no-padding" v-show="!$store.getters.isShowing('registrationForm')">
                 <div class="padding-50 bg-white h-100">
-                    <div class="row">
+                    <div class="row" v-show="!$store.getters.isShowing('forgetPassword')">
                         <div class="col">
                             <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('loginSection')"></loading-component>
                             <div class="row" v-show="!$store.getters.isLoading('loginSection')">
@@ -27,6 +27,28 @@
                             </div>
                         </div>
                     </div>
+                    <div class="row" v-show="$store.getters.isShowing('forgetPassword')">
+                        <div class="col">
+                            <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('forgetPasswordSection')"></loading-component>
+                            <div class="row" v-show="!$store.getters.isLoading('forgetPasswordSection')">
+                                <div class="col">
+                                    <div class="row m-b-15">
+                                        <div class="col">
+                                            <div class="inline v-align-middle">
+                                                <div class="font-heading fs-20 all-caps text-primary no-margin lh-28 bold">Forget Password</div>
+                                                <p class="no-margin fs-11 muted light">A reset password link will send to your email account.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                    <div class="row">
+                                        <div class="col">
+                                            <forget-password-form-component section="forgetPasswordSection"></forget-password-form-component>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </div>
             <div class="col p-l-0 p-r-0 p-t-15 p-b-15">