<template>
    <div class="centered">
        <div class="container mb-auto mt-auto signin">
            <div class="card mx-auto card-auth border-0">
                <validated-form @submit="submit" :loading="loading">
                    <template slot="fields">
                        <div class="text-center">
                            <img
                                    src="https://app.mpowerpromo.com/img/mpower_mark.svg"
                                    class="logo mb-3"
                                    alt="MPower Promo"
                            />
                            <h2>Sign In</h2>
                        </div>

                        <validated-input name="email" v-model="email" :label="'Email'"
                                         rules="required|email"></validated-input>
                        <validated-input
                                name="password"
                                :type="'password'"
                                v-model="password"
                                :label="'Passowrd'"
                                rules="required"
                        ></validated-input>
                    </template>
                </validated-form>
            </div>
        </div>
    </div>
</template>
<script>
    module.exports = {
        data() {
            return {
                loading: false,
                email: "",
                password: "",
            };
        },
        methods: {
            async submit() {
                if (!this.email || !this.password) return;
                this.loading=true;
                await this.$store.dispatch('login', {email: this.email, password: this.password})
                this.loading=false;
            },
        },
    };
</script>