<template>
    <div
        class="h-screen container mx-auto h-full flex justify-center items-center"
    >
        <div class="w-full md:w-1/2 lg:w-1/3">
            <h1 class="font-semibold text-lg mb-6 text-center">Sign In</h1>
            <div
                class="bg-gray-800 border-teal-500 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
            >
                <form @submit="userLogin">
                    <div class="mb-4">
                        <label
                            for="username"
                            class="font-bold text-grey-darker block mb-2"
                        >
                            Username
                        </label>
                        <input
                            id="username"
                            v-model="form.username"
                            name="username"
                            class="shadow focus:shadow-outline block appearance-none w-full bg-gray-700 border-gray-500 hover:border-gray-500 px-2 py-2 rounded shadow"
                            placeholder="Your Username"
                        />
                    </div>

                    <div class="mb-4">
                        <label
                            for="password"
                            class="font-bold text-grey-darker block mb-2"
                        >
                            Password
                        </label>
                        <input
                            id="password"
                            v-model="form.password"
                            name="password"
                            type="password"
                            class="shadow focus:shadow-outline block appearance-none w-full bg-gray-700 border-gray-500 hover:border-gray-500 px-2 py-2 rounded shadow"
                            placeholder="Your Password"
                        />
                    </div>

                    <div class="flex items-center mt-6">
                        <button
                            type="submit"
                            class="w-full bg-teal-500 hover:bg-teal-400 text-white font-bold py-2 px-4 rounded"
                        >
                            Sign In
                        </button>
                    </div>
                </form>
            </div>
            <div class="text-center">
                <p class="text-gray-200 text-sm">
                    Don't have an account?
                    <a href="#" class="no-underline text-blue-500 font-bold"
                        >Create an Account</a
                    >
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SignIn',
    options: {
        auth: false, // FIXME: auth: 'guest'
    },
    data: () => ({
        form: {
            username: '',
            password: '',
        },
    }),
    methods: {
        userLogin(e) {
            e.preventDefault()
            this.$auth
                .loginWith('local', {
                    data: this.form,
                })
                .then(function (response) {})
                // eslint-disable-next-line handle-callback-err
                .catch(function (error) {})
        },
    },
    head: () => ({
        title: 'Sign in',
    }),
}
</script>
