added create account
This commit is contained in:
Xeovalyte
parent
d0d268b60c
commit
da0619b016
@ -16,11 +16,7 @@
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply bg-primary hover:bg-orange-700 text-gray-900 font-bold px-3 py-1 shadow rounded transition-all hover:cursor-pointer;
|
||||
}
|
||||
|
||||
.btn-disabled {
|
||||
@apply bg-primary opacity-50 text-gray-900 font-bold px-3 py-1 shadow rounded transition-all hover:cursor-not-allowed;
|
||||
@apply bg-primary hover:bg-orange-700 text-gray-900 font-bold px-3 py-1 shadow rounded transition-all hover:cursor-pointer disabled:opacity-50 disabled:hover:cursor-not-allowed;
|
||||
}
|
||||
|
||||
.divider {
|
||||
@ -34,4 +30,8 @@
|
||||
.input {
|
||||
@apply bg-neutral-200 dark:bg-neutral-800 dark:text-gray-300 text-gray-900 shadow rounded border-none focus:ring-primary
|
||||
}
|
||||
|
||||
.text-default {
|
||||
@apply dark:text-gray-300 text-gray-900
|
||||
}
|
||||
}
|
||||
@ -1,21 +1,39 @@
|
||||
<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">
|
||||
<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">
|
||||
<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">
|
||||
<input type="submit" value="Login" class="btn w-24 ">
|
||||
<button class="ml-auto hover:underline font-bold">Forgot Password?</button>
|
||||
<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>
|
||||
@ -24,30 +42,86 @@
|
||||
|
||||
<script setup>
|
||||
import { useToast } from 'vue-toastification'
|
||||
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
|
||||
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: '',
|
||||
confirmPassword: ''
|
||||
newPassword: '',
|
||||
confirmNewPassword: ''
|
||||
})
|
||||
|
||||
const submitLoginForm = () => {
|
||||
disableButtons.value = true
|
||||
|
||||
signInWithEmailAndPassword(auth.value, form.value.email, form.value.password)
|
||||
.catch((error) => {
|
||||
.then(() => disableButtons.value = false)
|
||||
.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') {
|
||||
|
||||
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>
|
||||
@ -5,7 +5,7 @@
|
||||
<span class="">Last updated: <b>37 sep</b></span>
|
||||
<input required="true" @change="handleFileChanged" accept=".csv" class="my-2" type="file">
|
||||
<span class="text-sm"><i>Met de volgende kolommen: Relatiecode, Volledige naam(1), Roepnaam, E-mail, 2e E-mail, Verenigingssporten, Diploma</i></span>
|
||||
<button :disabled="disableButtons" class="enabled:btn disabled:btn-disabled mx-auto mt-2">Publish Ledenlijst</button>
|
||||
<button :disabled="disableButtons" class="enabled:btn mx-auto mt-2">Publish Ledenlijst</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="flex flex-col gap-3">
|
||||
|
||||
@ -30,6 +30,9 @@
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 class="text-center font-bold">Gemaakt door <u><a href="https://xeovalyte.com/">Timo Boomers</a></u></h2>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -13,5 +13,4 @@ export default defineNuxtPlugin((nuxtApp) => {
|
||||
};
|
||||
|
||||
const app = initializeApp(firebaseConfig);
|
||||
const auth = getAuth(app);
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user