<template>
<div class="med-size">

<div class="row">

 <div class="card col-4 my-5 offset-4">
            <h2 class="card-title mt-3 text-center">
                Login
            </h2>
            <div class="card-body">
                <form @submit.prevent="submit" class="form" role="form">
                    <div class="form-group">
                        <label for="email">E-mail: </label>
                        <input type="email" class="form-control" :class="{'is-invalid' : error.email}" id="email" v-model="form.email" :disabled="loading" />
                        <div class="invalid-feedback" v-show="error.email">{{ error.email }}</div>
                    </div>
                    <div class="form-group">
                        <label for="password">Password: </label>
                        <input type="password" class="form-control" :class="{'is-invalid' : error.password}" id="password" v-model="form.password" :disabled="loading" />
                        <div class="invalid-feedback" v-show="error.password">{{ error.password }}</div>
                    </div>
                    <div class="form-group mt-4">
                        <button type="submit" class="btn btn-primary btn-lg btn-block" :class="{ 'btn-loading': loading }" :disabled="loading">Sign in</button>
                    </div>
                    <div class="form-group">
                        <div>
                            <nuxt-link :to="{ name: 'forgot'}">Forgot password?</nuxt-link>
                        </div>

                    </div>
                </form>
                <login-social />
            </div>
        </div>
</div>

 </div>
</template>


<script>
import LoginSocial from "~/components/LoginSocial.vue"

export default {
    middleware: ["guest"],
    head() {
        return {
            title: "Login",
            meta: [
                {
                    hid: `description`,
                    name: "description",
                    content: "Login page"
                }
            ]
        }
    },
    data() {
        return {
            loading: false,
            form: {
                email: null,
                password: null
            },
            error: {}
        }
    },

    components: {
        LoginSocial
    },
    computed: {},
    mounted() {
        const errorMsg = this.$route.query.errorMsg || null

        if (errorMsg == "error_social") {
            this.$toast.error("Error auth with social network.")
            this.$router.push({ name: "login" })
        } else {
            this.$toast.error(errorMsg)
            this.$router.push({ name: "login" })
        }
    },
    methods: {
        async submit() {
            this.loading = true
            try {
                await this.$store.dispatch("auth/login", this.form)
                this.$router.push({ name: "home" })
                this.loading = false
                this.error = {}
            } catch (err) {
                this.loading = false
                const error_code = parseInt(err.response && err.response.status) || 500
                const error_msg = err.response && err.response.data ? err.response.data : err
                const validation_errors = error_msg.validation_errors ? error_msg.validation_errors : null

                const auth_error = error_msg.auth_error ? error_msg.auth_error : null

                if (validation_errors) {
                    const error_fields = Object.keys(this.form)
                    error_fields.forEach(field_name => {
                        this.error[field_name] = validation_errors[field_name] ? validation_errors[field_name] : null
                    })
                } else if (auth_error) {
                    this.error.email = auth_error
                } else {
                    if (process.env.NODE_ENV == "development") {
                        console.log("Error", `${error_code} ${error_msg}`)
                    }
                    this.$toast.error("Server error. Try again later")
                }
            }
        }
    }
}
</script>