<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-10 animate__animated animate__fadeInUpBig animate__fast" v-if="error">
                <div class="col">
                    <small class="bold fs-10 text-danger">{{error}}</small>
                </div>
            </div>
            <div class="row"  v-show="!$store.getters.isShowing('forgetPasswordSuccess')">
                <div class="col animate__animated">
                    <div class="row align-items-center">
                        <div class="col">
                            <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-b-15" v-show="$store.getters.isShowing('forgetPasswordSuccess')">
                <div class="col">
                    <div class="row m-b-5">
                        <div class="col">
                            <h4 class="font-lato text-success bold"><i class="fa fa-check-circle m-r-5"></i> Password Reset Email Sent</h4>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <small class="font-lato">An email has been sent to your rescue email address. Follow the directions in the email to reset your password.</small>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-center">
                <div class="col" v-show="!$store.getters.isShowing('forgetPasswordSuccess')">
                    <div class="btn btn-block btn-lg btn-primary b-rad-none no-border" @click="submit(route('api.account.authentication.password.forget'), 'post', section, false , false)">Reset Password</div>
                </div>
            </div>
            <div class="row m-t-20">
                <div class="col text-center">
                    <p class="muted fs-11 font-arial m-b-0 pointer bold" >Remember password? <span class="point text-primary" @click="$store.dispatch('returnToLoginAfterSendResetPasswordLink')">Sign in</span></p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>

    import { required, email } from "vuelidate/lib/validators";
    import request from '../../../general/mixins/request'
    export default {
        props: {
            section:{
                type: String,
                required: true
            }
        },
        data() {
            return {
                error: '',
                parameters: {
                    email: ''
                }
            };
        },
        validations: {
            parameters: {
                email: { required, email }
            }
        },
        methods:{
            successHandler(){
                this.$store.dispatch('toggleSection', {name: 'forgetPasswordSuccess', status: true});
                this.$store.dispatch('passwordResetEmail', {email: this.parameters.email});
                this.resetForm();
            },
            errorHandler(error){
                this.error = error.message;
            }
        },
        mixins: [request]
    }

</script>