<template>
    <div class="row">
        <div class="col">
            <div class="row" v-show="!$store.getters.isShowing('resetPasswordSuccess')">
                <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">Reset your password</div>
                            </div>
                        </div>
                    </div>
                    <div class="row m-r-0 m-l-0 m-b-20" v-if="error">
                        <div class="col p-l-50">
                            <small class="bold fs-10 text-danger">{{error}}</small>
                        </div>
                    </div>
                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.password">
                        <label class="text-primary">Password</label>
                        <div class="controls">
                            <input type="password" class="form-control fs-12" v-model="parameters.password">
                        </div>
                    </validation-wrapper-component>
                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.confirmPassword">
                        <label class="text-primary">Confirm Password</label>
                        <div class="controls">
                            <input type="password" class="form-control fs-12" v-model="parameters.confirmPassword">
                        </div>
                    </validation-wrapper-component>
                    <div class="row align-items-center">
                        <div class="col"></div>
                        <div class="col-auto">
                            <div class="btn btn-lg b-rad-none btn-success" @click="submit(route('api.account.authentication.password.reset'), 'post', section, false , false)">Reset Password</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-show="$store.getters.isShowing('resetPasswordSuccess')">
                <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 Changed successfully</h4>
                        </div>
                    </div>
                    <div class="row m-b-10">
                        <div class="col">
                            <small class="font-lato">You have successfully changed your password, now you can login into your account using your new password.</small>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <a :href="route('login')"><div class="btn btn-sm btn-default b-rad-none light" style="letter-spacing: 2px;"><i class="fa fa-angle-left" style="padding-right: 18px;"></i>Go to login</div></a>
                        </div>
                    </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: '',
                passwordChanged: false,
                parameters: {
                    email: '',
                    confirmPassword:'',
                    token:this.token,
                }
            };
        },
        validations: {
            parameters: {
                password:{required},
                confirmPassword: {required},
                token: {required}
            }
        },
        methods:{
            successHandler(){
                this.$store.dispatch('toggleSection', {name: 'resetPasswordSuccess', status: true});
            },
            errorHandler(error){
                this.error = error.message;
            }
        },
        mixins: [request]
    }

</script>