53 lines
1.8 KiB
Vue
53 lines
1.8 KiB
Vue
<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> |