Added basic login with firebase without forwarding to list after login

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);
+      });
     },
   },
 };

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");
+  }
+});

editor_frontend/src/router.ts

@@ -2,21 +2,42 @@ 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",
       component: TheLogin,
     },
   ],
 });
+
+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;