From b6846679269bf7a3d28e447d1c94366507389aca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wiktor=20D=C4=85browski?= <dabrowski.wiktor.01@gmail.com>
Date: Wed, 6 Dec 2023 22:31:49 +0100
Subject: [PATCH] Added basic login with firebase without forwarding to list
 after login

---
 editor_frontend/src/components/TheLogin.vue | 16 ++++++++------
 editor_frontend/src/main.ts                 | 11 +++++++++-
 editor_frontend/src/router.ts               | 23 ++++++++++++++++++++-
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/editor_frontend/src/components/TheLogin.vue b/editor_frontend/src/components/TheLogin.vue
index c92668e..7cf1877 100644
--- a/editor_frontend/src/components/TheLogin.vue
+++ b/editor_frontend/src/components/TheLogin.vue
@@ -1,9 +1,9 @@
 <template>
   <div>
-    <form @submit.prevent="submitForm(username, password)">
+    <form @submit.prevent="submitForm(email, password)">
       <div>
         <label for="username">Username:</label>
-        <input type="text" id="username" v-model="username" required />
+        <input v-model="email" type="email" placeholder="Email" />
       </div>
       <div>
         <label for="password">Password:</label>
@@ -15,17 +15,21 @@
 </template>
 
 <script lang="ts">
+import firebaseApp from "@/initfirestore";
+import { getAuth, signInWithEmailAndPassword } from "firebase/auth";
 export default {
   data() {
     return {
-      username: "",
+      email: "",
       password: "",
     };
   },
   methods: {
-    submitForm(username: string, password: string) {
-      // Handle form submission here
-      console.log(`Username: ${username}, Password: ${password}`);
+    submitForm(email: string, password: string) {
+      const auth = getAuth(firebaseApp);
+      signInWithEmailAndPassword(auth, email, password).catch((error) => {
+        console.error(error);
+      });
     },
   },
 };
diff --git a/editor_frontend/src/main.ts b/editor_frontend/src/main.ts
index b60bc01..0289b80 100644
--- a/editor_frontend/src/main.ts
+++ b/editor_frontend/src/main.ts
@@ -2,5 +2,14 @@ import { createApp } from "vue";
 import App from "./App.vue";
 import router from "./router";
 import "./styles/main.scss";
+import firebaseApp from "@/initfirestore";
+import { getAuth } from "firebase/auth";
 
-createApp(App).use(router).mount("#app");
+let app = false;
+const auth = getAuth(firebaseApp);
+auth.onAuthStateChanged((_) => {
+  if (!app) {
+    app = true;
+    createApp(App).use(router).mount("#app");
+  }
+});
diff --git a/editor_frontend/src/router.ts b/editor_frontend/src/router.ts
index f7899cd..7675ba8 100644
--- a/editor_frontend/src/router.ts
+++ b/editor_frontend/src/router.ts
@@ -2,17 +2,25 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import TheList from "@/components/TheList.vue";
 import ExhibitEditor from "@/components/ExhibitEditor.vue";
 import TheLogin from "@/components/TheLogin.vue";
+import firebaseApp from "@/initfirestore";
+import { getAuth } from "firebase/auth";
 
-export default createRouter({
+const router = createRouter({
   history: createWebHashHistory(),
   routes: [
     {
       path: "/",
       component: TheList,
+      meta: {
+        requiresAuth: true,
+      },
     },
     {
       path: "/exhibit/:id",
       component: ExhibitEditor,
+      meta: {
+        requiresAuth: true,
+      },
     },
     {
       path: "/login",
@@ -20,3 +28,16 @@ export default createRouter({
     },
   ],
 });
+
+const auth = getAuth(firebaseApp);
+router.beforeEach((to, from, next) => {
+  const requiresAuth = to.matched.some((record) => record.meta.requiresAuth);
+  const isAuthenticated = auth.currentUser;
+  if (requiresAuth && !isAuthenticated) {
+    next("/login");
+  } else {
+    next();
+  }
+});
+
+export default router;