<template>
    <div class="flex flex-col justify-center items-center px-2">
        <h1 class="font-bold text-3xl text-center m-10">Reddingsbrigade Waddinxveen</h1>
        <div class="max-w-xs w-full">
            <form @submit.prevent="submitLoginForm" class="flex flex-col">
                <label class="font-bold">Email</label>
                <input v-model="form.email" required="true" placeholder="user@example.com" class="input mb-5" type="email">

                <label class="font-bold">Password</label>
                <input v-model="form.password" required="true" class="input" :type="showPassword ? 'text' : 'password'">
                <div class="mb-5 mt-1 flex items-center">
                    <input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
                    <span>Show Password</span>
                </div>

                <div class="w-full flex">
                    <input type="submit" value="Login" class="btn w-24 ">
                    <button class="ml-auto hover:underline font-bold">Forgot Password?</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup>
import { useToast } from 'vue-toastification'
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";

const { auth } = inject('firebase')

const toast = useToast()

const showPassword = ref(false)

const form = ref({
    email: '',
    password: '',
    confirmPassword: ''
})

const submitLoginForm = () => {
    signInWithEmailAndPassword(auth.value, form.value.email, form.value.password)
        .catch((error) => {
            const errorCode = error.code;
            const errorMessage = error.message;

            if (error.code === 'auth/user-not-found')

            console.log(error.message)
        });
}

</script>