From 76fec72868b35bb1138eadf18da0a7256e30cfe1 Mon Sep 17 00:00:00 2001
From: xeovalyte <me+gitlab@xeovalyte.dev>
Date: Mon, 23 Jan 2023 23:37:11 +0100
Subject: [PATCH] fixed account creation bug

---
 frontend/app.vue              |  32 ++---
 frontend/components/Login.vue | 262 +++++++++++++++++-----------------
 2 files changed, 146 insertions(+), 148 deletions(-)

diff --git a/frontend/app.vue b/frontend/app.vue
index 2c7f59a..72524f6 100644
--- a/frontend/app.vue
+++ b/frontend/app.vue
@@ -1,22 +1,22 @@
 <template>
-    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
-        <div>
-          <Icon size="4em" name="ion:load-c" class="animate-spin" />
-          <h2 class="mt-2 font-bold">Loading...</h2>
-        </div>
+  <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex justify-center items-center">
+    <div>
+      <Icon size="4em" name="ion:load-c" class="animate-spin" />
+      <h2 class="mt-2 font-bold">Loading...</h2>
     </div>
-    <div v-else class="">
-        <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
-            <LayoutTopbar />
-            <div class="overflow-y-auto pt-3">
-                <NuxtPage />
-            </div>
-            <LayoutNavbar class="mt-auto" />
-        </div>
-        <div v-else class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
-            <Login />
-        </div>
+  </div>
+  <div v-else class="">
+    <div v-if="isAuthenticated" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
+      <LayoutTopbar />
+      <div class="overflow-y-auto pt-3">
+        <NuxtPage />
+      </div>
+      <LayoutNavbar class="mt-auto" />
     </div>
+    <div v-else class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
+      <Login />
+    </div>
+  </div>
 </template>
 
 <script setup>
diff --git a/frontend/components/Login.vue b/frontend/components/Login.vue
index 73d4205..310949f 100644
--- a/frontend/components/Login.vue
+++ b/frontend/components/Login.vue
@@ -1,43 +1,43 @@
 <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">
+  <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">Wachtwoord</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>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>
+        <label class="font-bold">Wachtwoord</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>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>
 </template>
 
 <script setup>
@@ -46,7 +46,7 @@ import { createUserWithEmailAndPassword, signInWithEmailAndPassword, sendPasswor
 import { doc, setDoc } from "firebase/firestore"; 
 
 
-const { auth, db } = inject('firebase')
+const { auth, db, userAllPersons } = inject('firebase')
 
 const toast = useToast()
 
@@ -55,125 +55,123 @@ const creatingAccount = ref(false)
 const disableButtons = ref(false)
 
 const form = ref({
-    email: '',
-    password: '',
-    newPassword: '',
-    confirmNewPassword: ''
+  email: '',
+  password: '',
+  newPassword: '',
+  confirmNewPassword: ''
 })
 
 const submitLoginForm = () => {
-    disableButtons.value = true
+  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;
+  signInWithEmailAndPassword(auth.value, form.value.email, form.value.password)
+    .then(() => disableButtons.value = false)
+    .catch(async (error) => {
 
-            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', {
-                    method: 'POST',
-                    headers: {
-                        Authorization: 'Basic WGVvdmFseXRlOmtNKjhuRXMzNTchalJlXm1KYnZrRSFOIw==',
-                        '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)
+        if (err.value) {
+          console.log(err.value)
+          disableButtons.value = false
+          return toast.error('Error tijdens het controleren van relatiecode')
+        }
 
-                        toast.error('Error met het controleren van relatiecode')
-                    });
-            } else if (error.code === 'auth/wrong-password') {
-                toast.error('Verkeerde wachtwoord')
-            } else {
-                toast.error('Error met inloggen')
-            }
+        disableButtons.value = false
+        if (data.value.code === 'incorrect') return toast.error('Email, wachtwoord of relatiecode onjuist')
+        else if (data.value.code === 'correct') return creatingAccount.value = true
 
-            disableButtons.value = false
-            console.log(error.message)
-        });
+      } else if (error.code === 'auth/wrong-password') {
+          toast.error('Verkeerde wachtwoord')
+      } else {
+          toast.error('Error met inloggen')
+      }
+
+      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');
+  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
+  disableButtons.value = true
 
-    createUserWithEmailAndPassword(auth.value, form.value.email, form.value.newPassword)
-        .then((userCredential) => {
-            fetch('https://api.xeovalyte.com/getrelatiecodes', {
-                method: 'POST',
-                headers: {
-                    Authorization: 'Basic WGVvdmFseXRlOmtNKjhuRXMzNTchalJlXm1KYnZrRSFOIw==',
-                    '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,
-                        });
+  createUserWithEmailAndPassword(auth.value, form.value.email, form.value.newPassword)
+    .then(async (userCredential) => {
+      const idToken = await auth.value.currentUser.getIdToken(true)
+      const { error, data } = await useFetch('/api/getrelatiecodes', {
+        method: 'post',
+        body: { email: form.value.email, token: idToken } 
+      })
 
-                        if (response.relatiecodes.length > 1) {
-                            return navigateTo('/settings/config/managerelatiecodes')
-                        }
-                    }
-                })
-                .catch(err => {
-                    disableButtons.value = false
-                    console.log(err)
+      if (error.value) {
+        console.log(error.value)
+        disableButtons.value = false
+        return toast.error('Error tijdens het controleren van relatiecode')
+      }
 
-                    toast.error('Error met het controleren van relatiecode')
-                });
-        })
-        .catch((error) => {
-            const errorCode = error.code;
-            const errorMessage = error.message;
-            
-            console.log(error)
-
-            toast.error('Error tijdens het maken van account')
+      disableButtons.value = false
+      if (data.value.code === 'error') return toast.error('Error tijdens maken van account')
+      else if (data.value.code === 'success') {
+        await setDoc(doc(db, "users", userCredential.user.uid), {
+          email: form.value.email,
+          relatiecodes: [form.value.password.toUpperCase()],
+          allRelatiecodes: data.value.relatiecodes,
         });
+
+        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 = () => {
-    sendPasswordResetEmail(auth.value, form.value.email)
-        .then(() => {
-            toast.info('Wachtwoord vergeten email verstuurd!')
-        })
-        .catch((error) => {
-            const errorCode = error.code;
-            const errorMessage = error.message;
+  sendPasswordResetEmail(auth.value, form.value.email)
+    .then(() => {
+      toast.info('Wachtwoord vergeten email verstuurd!')
+    })
+    .catch((error) => {
+      const errorCode = error.code;
+      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 = () => {
-    creatingAccount.value = false
-    form.value = {
-        email: form.value.email,
-        password: form.value.password,
-        newPassword: '',
-        confirmNewPassword: ''
-    }
-
+  creatingAccount.value = false
+  form.value = {
+    email: form.value.email,
+    password: form.value.password,
+    newPassword: '',
+    confirmNewPassword: ''
+  }
 }
 
 </script>