127 lines
5.2 KiB
Vue
127 lines
5.2 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-sm w-full">
|
|
<form v-if="!creatingAccount" @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 text-default">
|
|
<input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
|
|
<span>Show Password</span>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-wrap justify-between">
|
|
<input :disabled="disableButtons" type="submit" value="Login" class="btn w-full sm:w-24 mb-1">
|
|
<button class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Forgot Password?</button>
|
|
</div>
|
|
</form>
|
|
<form v-else @submit.prevent="submitCreateForm" class="flex flex-col">
|
|
<h3 class="text-center text-default text-lg mb-5">Creating account for <br><b>{{ form.email }}</b></h3>
|
|
<label class="font-bold">New Password</label>
|
|
<input v-model="form.newPassword" required="true" class="input mb-1" :type="showPassword ? 'text' : 'password'">
|
|
<span class="mb-5 text-default italic text-sm">Minimaal 8 karakters</span>
|
|
|
|
<label class="font-bold">Confirm New Password</label>
|
|
<input v-model="form.confirmNewPassword" required="true" class="input" :type="showPassword ? 'text' : 'password'">
|
|
<div class="mb-5 mt-1 flex items-center text-default">
|
|
<input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
|
|
<span>Show Password</span>
|
|
</div>
|
|
|
|
<div class="w-full flex flex-wrap">
|
|
<input :disabled="disableButtons" type="submit" value="Create Account" class="btn w-full sm:w-40 mb-1">
|
|
<button @click="goBack" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Not you? Go back</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useToast } from 'vue-toastification'
|
|
import { createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
|
|
|
|
const { auth } = inject('firebase')
|
|
|
|
const toast = useToast()
|
|
|
|
const showPassword = ref(false)
|
|
const creatingAccount = ref(false)
|
|
const disableButtons = ref(false)
|
|
|
|
const form = ref({
|
|
email: '',
|
|
password: '',
|
|
newPassword: '',
|
|
confirmNewPassword: ''
|
|
})
|
|
|
|
const submitLoginForm = () => {
|
|
disableButtons.value = true
|
|
|
|
signInWithEmailAndPassword(auth.value, form.value.email, form.value.password)
|
|
.then(() => disableButtons.value = false)
|
|
.catch(async (error) => {
|
|
const errorCode = error.code;
|
|
const errorMessage = error.message;
|
|
|
|
if (error.code === 'auth/user-not-found') {
|
|
|
|
fetch('http://test.xeovalyte.com:7289/checkrelatiecode', {
|
|
method: 'POST',
|
|
headers: {
|
|
Authorization: 'Basic WGVvdmFseXRlOmtNKjhuRXMzNTchalJlXm1KYnZrRSFOIw==',
|
|
'content-type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ email: form.value.email, relatiecode: form.value.password })
|
|
}).then(response => response.json())
|
|
.then(response => {
|
|
disableButtons.value = false
|
|
if (response.code === 'incorrect') return toast.error('Email, wachtwoord of relatiecode onjuist')
|
|
else if (response.code === 'correct') return creatingAccount.value = true
|
|
})
|
|
.catch(err => {
|
|
disableButtons.value = false
|
|
console.log(err)
|
|
|
|
toast.error('Error while checking relatiecode')
|
|
});
|
|
}
|
|
|
|
disableButtons.value = false
|
|
console.log(error.message)
|
|
});
|
|
}
|
|
|
|
const submitCreateForm = () => {
|
|
if (form.value.newPassword !== form.value.confirmNewPassword) return toast.error('Wachtwoorden zijn niet hetzelfde');
|
|
if (form.value.newPassword.length < 8) return toast.error('Wachtwoord heeft te weinig karakters');
|
|
|
|
disableButtons.value = true
|
|
|
|
createUserWithEmailAndPassword(auth.value, form.value.email, form.value.newPassword)
|
|
.catch((error) => {
|
|
const errorCode = error.code;
|
|
const errorMessage = error.message;
|
|
|
|
console.log(error)
|
|
|
|
toast.error('Error while creating account')
|
|
});
|
|
}
|
|
|
|
const goBack = () => {
|
|
creatingAccount.value = false
|
|
form.value = {
|
|
email: form.value.email,
|
|
password: form.value.password,
|
|
newPassword: '',
|
|
confirmNewPassword: ''
|
|
}
|
|
|
|
}
|
|
|
|
</script> |