initialized backend

backend/.gitignore

@@ -0,0 +1 @@
+node_modules

backend/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "backend",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "cors": "^2.8.5",
+    "express": "^4.18.1"
+  }
+}

frontend/app.vue

@@ -1,20 +1,51 @@
 <template>
-    <div class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
-        <LayoutTopbar />
-        <div class="overflow-y-scroll pt-3">
-            <NuxtPage />
+    <div v-if="!userLoaded" class="bg-neutral-100 dark:bg-neutral-900 text-primary h-screen flex flex-col">
+        Loading
+    </div>
+    <div v-else>
+        <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>
-        <LayoutNavbar class="mt-auto" />
     </div>
 </template>
 
 <script setup>
-import { doc, getFirestore, serverTimestamp, writeBatch, collection, getDocs } from "firebase/firestore"; 
+import { doc, getFirestore, serverTimestamp, writeBatch, collection, getDocs } from "firebase/firestore";
+import { getAuth, onAuthStateChanged, signInWithEmailAndPassword } from "firebase/auth";
 
 const db = getFirestore()
+const route = useRoute()
+
+const isAuthenticated = ref(false)
+const user = ref('frikandel')
+const auth = ref(null)
+const userLoaded = ref(false)
+
+onMounted(() => {
+    auth.value = getAuth()
+
+    onAuthStateChanged(auth.value, (usr) => {
+        if (usr) {
+            isAuthenticated.value = true
+            user.value = usr
+        } else {
+            isAuthenticated.value = false
+            user.value = null
+        }
+
+        userLoaded.value = true
+    })
+})
 
 const ledenlijst = ref([])
 
 
-provide('firebase', { db, ledenlijst })
+provide('firebase', { db, ledenlijst, isAuthenticated, user, auth })
 </script>

frontend/components/Login.vue

@@ -7,7 +7,7 @@
                 <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.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">
                     <input v-model="showPassword" type="checkbox" class="mr-1 checkbox ">
                     <span>Show Password</span>
@@ -23,23 +23,31 @@
 </template>
 
 <script setup>
-definePageMeta({
-    title: 'Login',
-    key: 'disable'
-})
+import { useToast } from 'vue-toastification'
+import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword } from "firebase/auth";
+
+const { auth } = inject('firebase')
+
+const toast = useToast()
 
 const showPassword = ref(false)
 
 const form = ref({
     email: '',
-    password: {
-        password: '',
-        confirm: '',
-    }
+    password: '',
+    confirmPassword: ''
 })
 
 const submitLoginForm = () => {
+    signInWithEmailAndPassword(auth.value, form.value.email, form.value.password)
+        .catch((error) => {
+            const errorCode = error.code;
+            const errorMessage = error.message;
 
+            if (error.code === 'auth/user-not-found')
+
+            console.log(error.message)
+        });
 }
 
 </script>

frontend/pages/index.vue

@@ -6,6 +6,6 @@
 
 <script setup>
 definePageMeta({
-    title: 'Home'
+    title: 'Home',
 })
 </script>

frontend/pages/settings/index.vue

@@ -10,8 +10,10 @@
         </div>
         <div>
             <h1 class="text-xl ml-2 font-bold">Account</h1>
-            <div class="bg-neutral-200 dark:bg-neutral-800 dark:text-gray-300 text-gray-900 shadow p-5 rounded">
-                Change Password
+            <div class="container">
+                <div @click="logout" class="item-hover">
+                    Logout
+                </div>
             </div>
         </div>
         <div>
@@ -32,7 +34,18 @@
 </template>
 
 <script setup>
+import { signOut } from "firebase/auth";
+
 definePageMeta({
     title: 'Settings'
 })
+
+const { auth } = inject('firebase')
+
+const logout = () => {
+    signOut(auth.value)
+        .catch((error) => {
+            console.log(error)
+        })
+}
 </script>

frontend/plugins/firebase.js

@@ -1,4 +1,5 @@
 import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
 
 export default defineNuxtPlugin((nuxtApp) => {
   const firebaseConfig = {
@@ -12,4 +13,5 @@ export default defineNuxtPlugin((nuxtApp) => {
   };
   
   const app = initializeApp(firebaseConfig);
+  const auth = getAuth(app);
 })