added create account

frontend/assets/css/tailwind.css

@@ -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;
+        @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;
-    }
-
-    .btn-disabled {
-        @apply bg-primary opacity-50 text-gray-900 font-bold px-3 py-1 shadow rounded transition-all 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
+    }
   }

frontend/components/Login.vue

@@ -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">
+        <div class="max-w-sm w-full">
-            <form @submit.prevent="submitLoginForm" class="flex flex-col">
+            <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">
+                <div class="w-full flex flex-wrap justify-between">
-                    <input type="submit" value="Login" class="btn w-24 ">
+                    <input :disabled="disableButtons" type="submit" value="Login" class="btn w-full sm:w-24 mb-1">
-                    <button class="ml-auto hover:underline font-bold">Forgot Password?</button>
+                    <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>

frontend/pages/settings/admin/ledenlijst.vue

@@ -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">

frontend/pages/settings/index.vue

@@ -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>
 

frontend/plugins/firebase.js

@@ -13,5 +13,4 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
   
   const app = initializeApp(firebaseConfig);
-  const auth = getAuth(app);
 })