fixed account creation bug
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
xeovalyte 2023-01-23 23:37:11 +01:00
parent bd1bb37758
commit 76fec72868
2 changed files with 146 additions and 148 deletions

View File

@ -1,22 +1,22 @@
<template> <template>
<div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center"> <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
<div> <div>
<Icon size="4em" name="ion:load-c" class="animate-spin" /> <Icon size="4em" name="ion:load-c" class="animate-spin" />
<h2 class="mt-2 font-bold">Loading...</h2> <h2 class="mt-2 font-bold">Loading...</h2>
</div>
</div> </div>
<div v-else class=""> </div>
<div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col"> <div v-else class="">
<LayoutTopbar /> <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
<div class="overflow-y-auto pt-3"> <LayoutTopbar />
<NuxtPage /> <div class="overflow-y-auto pt-3">
</div> <NuxtPage />
<LayoutNavbar class="mt-auto" /> </div>
</div> <LayoutNavbar class="mt-auto" />
<div v-else class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
<Login />
</div>
</div> </div>
<div v-else class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
<Login />
</div>
</div>
</template> </template>
<script setup> <script setup>

View File

@ -1,43 +1,43 @@
<template> <template>
<div class="flex flex-col justify-center items-center px-2"> <div class="flex flex-col justify-center items-center px-2">
<h1 class="font-bold text-3xl text-center m-10">Reddingsbrigade Waddinxveen</h1> <h1 class="font-bold text-3xl text-center m-10">Reddingsbrigade Waddinxveen</h1>
<div class="max-w-sm w-full"> <div class="max-w-sm w-full">
<form v-if="!creatingAccount" @submit.prevent="submitLoginForm" class="flex flex-col"> <form v-if="!creatingAccount" @submit.prevent="submitLoginForm" class="flex flex-col">
<label class="font-bold">Email</label> <label class="font-bold">Email</label>
<input v-model="form.email" required="true" placeholder="user@example.com" class="input mb-5" type="email"> <input v-model="form.email" required="true" placeholder="user@example.com" class="input mb-5" type="email">
<label class="font-bold">Wachtwoord</label> <label class="font-bold">Wachtwoord</label>
<input v-model="form.password" required="true" class="input" :type="showPassword ? 'text' : 'password'"> <input v-model="form.password" required="true" class="input" :type="showPassword ? 'text' : 'password'">
<div class="mb-5 mt-1 flex items-center text-default"> <div class="mb-5 mt-1 flex items-center text-default">
<input v-model="showPassword" type="checkbox" class="mr-1 checkbox "> <input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
<span>Toon wachtwoord</span> <span>Toon wachtwoord</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 @click="forgotPassword" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Wachtwoord vergeten?</button>
</div>
</form>
<form v-else @submit.prevent="submitCreateForm" class="flex flex-col">
<h3 class="text-center text-default text-lg mb-5">Account aanmaken voor <br><b>{{ form.email }}</b></h3>
<label class="font-bold">Nieuw wachtwoord</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">Herhaal nieuw wachtwoord</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>Toon wachtwoord</span>
</div>
<div class="w-full flex flex-wrap">
<input :disabled="disableButtons" type="submit" value="Account Aanmaken" 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">Jij niet? Ga terug</button>
</div>
</form>
</div> </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 @click="forgotPassword" class="hover:underline font-bold w-full sm:w-max sm:ml-auto">Wachtwoord vergeten?</button>
</div>
</form>
<form v-else @submit.prevent="submitCreateForm" class="flex flex-col">
<h3 class="text-center text-default text-lg mb-5">Account aanmaken voor <br><b>{{ form.email }}</b></h3>
<label class="font-bold">Nieuw wachtwoord</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">Herhaal nieuw wachtwoord</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>Toon wachtwoord</span>
</div>
<div class="w-full flex flex-wrap">
<input :disabled="disableButtons" type="submit" value="Account Aanmaken" 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">Jij niet? Ga terug</button>
</div>
</form>
</div> </div>
</div>
</template> </template>
<script setup> <script setup>
@ -46,7 +46,7 @@ import { createUserWithEmailAndPassword, signInWithEmailAndPassword, sendPasswor
import { doc, setDoc } from "firebase/firestore"; import { doc, setDoc } from "firebase/firestore";
const { auth, db } = inject('firebase') const { auth, db, userAllPersons } = inject('firebase')
const toast = useToast() const toast = useToast()
@ -55,125 +55,123 @@ const creatingAccount = ref(false)
const disableButtons = ref(false) const disableButtons = ref(false)
const form = ref({ const form = ref({
email: '', email: '',
password: '', password: '',
newPassword: '', newPassword: '',
confirmNewPassword: '' confirmNewPassword: ''
}) })
const submitLoginForm = () => { const submitLoginForm = () => {
disableButtons.value = true disableButtons.value = true
signInWithEmailAndPassword(auth.value, form.value.email, form.value.password) signInWithEmailAndPassword(auth.value, form.value.email, form.value.password)
.then(() => disableButtons.value = false) .then(() => disableButtons.value = false)
.catch(async (error) => { .catch(async (error) => {
const errorCode = error.code;
const errorMessage = error.message;
if (error.code === 'auth/user-not-found') { if (error.code === 'auth/user-not-found') {
const { error: err, data } = await useFetch('/api/checkrelatiecode', {
method: 'post',
body: { email: form.value.email, relatiecode: form.value.password.toUpperCase() }
})
fetch('https://api.xeovalyte.com/checkrelatiecode', { if (err.value) {
method: 'POST', console.log(err.value)
headers: { disableButtons.value = false
Authorization: 'Basic WGVvdmFseXRlOmtNKjhuRXMzNTchalJlXm1KYnZrRSFOIw==', return toast.error('Error tijdens het controleren van relatiecode')
'content-type': 'application/json' }
},
body: JSON.stringify({ email: form.value.email, relatiecode: form.value.password.toUpperCase() })
}).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 met het controleren van relatiecode') disableButtons.value = false
}); if (data.value.code === 'incorrect') return toast.error('Email, wachtwoord of relatiecode onjuist')
} else if (error.code === 'auth/wrong-password') { else if (data.value.code === 'correct') return creatingAccount.value = true
toast.error('Verkeerde wachtwoord')
} else {
toast.error('Error met inloggen')
}
disableButtons.value = false } else if (error.code === 'auth/wrong-password') {
console.log(error.message) toast.error('Verkeerde wachtwoord')
}); } else {
toast.error('Error met inloggen')
}
disableButtons.value = false
console.log(error.message)
});
} }
const submitCreateForm = () => { const submitCreateForm = () => {
if (form.value.newPassword !== form.value.confirmNewPassword) return toast.error('Wachtwoorden zijn niet hetzelfde'); 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'); if (form.value.newPassword.length < 8) return toast.error('Wachtwoord heeft te weinig karakters');
disableButtons.value = true disableButtons.value = true
createUserWithEmailAndPassword(auth.value, form.value.email, form.value.newPassword) createUserWithEmailAndPassword(auth.value, form.value.email, form.value.newPassword)
.then((userCredential) => { .then(async (userCredential) => {
fetch('https://api.xeovalyte.com/getrelatiecodes', { const idToken = await auth.value.currentUser.getIdToken(true)
method: 'POST', const { error, data } = await useFetch('/api/getrelatiecodes', {
headers: { method: 'post',
Authorization: 'Basic WGVvdmFseXRlOmtNKjhuRXMzNTchalJlXm1KYnZrRSFOIw==', body: { email: form.value.email, token: idToken }
'content-type': 'application/json' })
},
body: JSON.stringify({ email: form.value.email })
}).then(response => response.json())
.then(response => {
disableButtons.value = false
if (response.code === 'error') return toast.error('Error tijdens maken van account')
else if (response.code === 'success') {
setDoc(doc(db, "users", userCredential.user.uid), {
email: form.value.email,
relatiecodes: [form.value.password.toUpperCase()],
allRelatiecodes: response.relatiecodes,
});
if (response.relatiecodes.length > 1) { if (error.value) {
return navigateTo('/settings/config/managerelatiecodes') console.log(error.value)
} disableButtons.value = false
} return toast.error('Error tijdens het controleren van relatiecode')
}) }
.catch(err => {
disableButtons.value = false
console.log(err)
toast.error('Error met het controleren van relatiecode') disableButtons.value = false
}); if (data.value.code === 'error') return toast.error('Error tijdens maken van account')
}) else if (data.value.code === 'success') {
.catch((error) => { await setDoc(doc(db, "users", userCredential.user.uid), {
const errorCode = error.code; email: form.value.email,
const errorMessage = error.message; relatiecodes: [form.value.password.toUpperCase()],
allRelatiecodes: data.value.relatiecodes,
console.log(error)
toast.error('Error tijdens het maken van account')
}); });
data.value.persons.forEach(person => {
if (person.relatiecode === form.value.password.toUpperCase()) {
person.checked = true
} else {
person.checked = false
}
})
userAllPersons.value = data.value.persons
if (data.value.relatiecodes.length > 1) {
return navigateTo('/settings/config/managerelatiecodes')
}
}
})
.catch((error) => {
const errorCode = error.code;
const errorMessage = error.message;
console.log(error)
toast.error('Error tijdens het maken van account')
});
} }
const forgotPassword = () => { const forgotPassword = () => {
sendPasswordResetEmail(auth.value, form.value.email) sendPasswordResetEmail(auth.value, form.value.email)
.then(() => { .then(() => {
toast.info('Wachtwoord vergeten email verstuurd!') toast.info('Wachtwoord vergeten email verstuurd!')
}) })
.catch((error) => { .catch((error) => {
const errorCode = error.code; const errorCode = error.code;
const errorMessage = error.message; const errorMessage = error.message;
console.log(error) console.log(error)
toast.error('Error tijdens het versturen van het wachtwoord vergeten email') toast.error('Error tijdens het versturen van het wachtwoord vergeten email')
}); });
} }
const goBack = () => { const goBack = () => {
creatingAccount.value = false creatingAccount.value = false
form.value = { form.value = {
email: form.value.email, email: form.value.email,
password: form.value.password, password: form.value.password,
newPassword: '', newPassword: '',
confirmNewPassword: '' confirmNewPassword: ''
} }
} }
</script> </script>