From a61d3a37b73c7bd4abaaa847baea41c22e385023 Mon Sep 17 00:00:00 2001
From: weichien <weichien00@gmail.com>
Date: Sun, 23 May 2021 15:35:57 +0800
Subject: [PATCH] feat: front-end add user reset password component.

---
 .../forms/ResetPasswordFormComponent.vue      | 93 +++++++++++++++++++
 .../mixins/accounts/resetPasswordHandler.js   | 18 ++++
 .../validation/resetPasswordFormValidation.js | 10 ++
 .../pages/accounts/reset_password.blade.php   |  2 +-
 4 files changed, 122 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue
 create mode 100644 resources/assets/vue/general/mixins/accounts/resetPasswordHandler.js
 create mode 100644 resources/assets/vue/general/mixins/accounts/validation/resetPasswordFormValidation.js

diff --git a/resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue b/resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue
new file mode 100644
index 00000000..33947d06
--- /dev/null
+++ b/resources/assets/vue/components/accounts/forms/ResetPasswordFormComponent.vue
@@ -0,0 +1,93 @@
+<template>
+    <div class="row">
+        <div class="col">
+            <div class="row m-r-0 m-l-0 m-b-20 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
+                <div class="col p-l-50">
+                    <small class="bold fs-10 text-danger">{{error}}</small>
+                </div>
+            </div>
+            <div class="row m-l-0 m-b-10 animate__animated animate__fadeInUpBig">
+                <div class="col b-t b-b b-grey animate__animated" :class="[{'animate__shake': $v.parameters.password.$error}]"  :style="[$v.parameters.password.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                    <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.password" placeholder="Password" type="password" 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.password" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row m-l-0 m-b-10 animate__animated animate__fadeInUpBig">
+                <div class="col b-t b-b b-grey animate__animated" :class="[{'animate__shake': $v.parameters.confirmPassword.$error}]"  :style="[$v.parameters.confirmPassword.$error ? {'border-bottom': 'solid 2px red !important'} : {}]">
+                    <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.confirmPassword" placeholder="Confirm Password" type="password" 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.confirmPassword" class="absolute fs-12" style=" top: 10px; right: 15px; z-index: 99;"></validation-error-component>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row m-t-30 align-items-center">
+                <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.reset'), 'post', section, false , false)">Reset Password</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+    import { required } from "vuelidate/lib/validators";
+    import request from '../../../general/mixins/request'
+    export default {
+        props: {
+            section:{
+                type: String,
+                required: true
+            },
+            token:{
+                type: String,
+                required: true
+            }
+        },
+        data() {
+            return {
+                error: '',
+                parameters: {
+                    email: '',
+                    confirmPassword:'',
+                    token:this.token,
+                }
+            };
+        },
+        validations: {
+            parameters: {
+                password:{required},
+                confirmPassword: {required},
+                token: {required}
+            }
+        },
+        methods:{
+            successHandler(response){
+                this.$store.dispatch('toggleSection', {name: 'resetPasswordSuccess', status: true});
+                this.$store.dispatch('passwordReset', response)
+            },
+            errorHandler(error){
+                this.error = error.message;
+            }
+        },
+        mixins: [request]
+    }
+
+</script>
\ No newline at end of file
diff --git a/resources/assets/vue/general/mixins/accounts/resetPasswordHandler.js b/resources/assets/vue/general/mixins/accounts/resetPasswordHandler.js
new file mode 100644
index 00000000..ace5e9ed
--- /dev/null
+++ b/resources/assets/vue/general/mixins/accounts/resetPasswordHandler.js
@@ -0,0 +1,18 @@
+import errorMessageHandler from "../errorMessageHandler";
+import formHandler from "../formHandler";
+
+export default {
+    methods: {
+        successHandler(response){
+            this.closeModal();
+            this.formHandler('');
+            //this.$store.dispatch('updateProfile', {fullname:response.payload.data.name});
+        },
+        errorHandler(error){
+            console.log("error" ,error);
+            this.formHandler(error.message);
+        }
+    },
+    mixins: [errorMessageHandler, formHandler]
+
+}
\ No newline at end of file
diff --git a/resources/assets/vue/general/mixins/accounts/validation/resetPasswordFormValidation.js b/resources/assets/vue/general/mixins/accounts/validation/resetPasswordFormValidation.js
new file mode 100644
index 00000000..a4f17906
--- /dev/null
+++ b/resources/assets/vue/general/mixins/accounts/validation/resetPasswordFormValidation.js
@@ -0,0 +1,10 @@
+import { required } from "vuelidate/lib/validators";
+import resetPasswordHandler from "../resetPasswordHandler";
+export default {
+    validations: {
+        parameters: {
+            email: { required }
+        }
+    },
+    mixins: [resetPasswordHandler]
+};
diff --git a/resources/views/pages/accounts/reset_password.blade.php b/resources/views/pages/accounts/reset_password.blade.php
index 4fae44b7..a16a540b 100644
--- a/resources/views/pages/accounts/reset_password.blade.php
+++ b/resources/views/pages/accounts/reset_password.blade.php
@@ -11,7 +11,7 @@
                 </div>
                 <div class="row w-100">
                     <div class="col">
-                        <div class="row">
+                        <div class="row" v-show="!$store.getters.isShowing('resetPassword')">
                             <div class="col no-padding relative">
                                 <transition-component group enter-class="animate__animated animate__fadeInUpBig animate__faster" leave-class="animate__animated animate__fadeOutRightBig">
                                     <loading-component style="height: 350px;" key="1" color="primary" v-show="$store.getters.isLoading('resetPasswordSection')"></loading-component>