<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">
                Create an Account
            </h1>
            <div
                class="bg-gray-800 border-teal-500 p-8 border-t-8 bg-white mb-6 rounded-lg shadow-lg"
            >
                <form @submit.prevent="register">
                    <div
                        v-if="showError"
                        class="bg-red-500 border-l-4 border-red-700 text-red-200 p-4 mb-4"
                        role="alert"
                    >
                        <p class="font-bold">Error</p>
                        <p>{{ error }}</p>
                    </div>
                    <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="mb-4">
                        <label
                            for="confirm"
                            class="font-bold text-grey-darker block mb-2"
                        >
                            Confirm your password
                        </label>
                        <input
                            id="confirm"
                            v-model="confirm"
                            name="confirm"
                            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="Confirm 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">
                    Already have an account?
                    <nuxt-link
                        to="/signin"
                        class="no-underline text-blue-500 font-bold"
                        >Sign in
                    </nuxt-link>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'SignIn',
    options: {
        auth: false, // FIXME: auth: 'guest'
    },
    data: () => ({
        confirm: '',
        form: {
            username: '',
            password: '',
        },
        error: '',
        showError: false,
    }),
    methods: {
        register() {
            this.$axios
                .post('/user', this.form)
                .then(() => this.$router.push('/signin'))
                .catch((e) => {
                    if (e.response) {
                        this.error = e.response.data.error
                        this.showError = true
                    }
                })
        },
    },
    head: () => ({
        title: 'Sign in',
    }),
}
</script>
