feat: viewlist and create flist and router

frontend/.env

@@ -0,0 +1 @@
+export const BASE_URL = "http://localhost:5173";

frontend/package.json

@@ -16,6 +16,7 @@
     "vuetify": "^3.6.14"
   },
   "devDependencies": {
+    "@types/node": "^22.1.0",
     "@vitejs/plugin-vue": "^5.0.5",
     "typescript": "^5.2.2",
     "vite": "^5.3.4",

frontend/src/App.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
-import Login from "./components/Login.vue";
+
 </script>
 
 <template>
-  <Login />
+  <router-view />
 </template>
-
 <style scoped>
 .logo {
   height: 6em;

frontend/src/components/CreateFlist.vue

@@ -1,10 +1,43 @@
 <template>
-    <div>hello</div>
+   <Navbar/>
+    <v-main>
+
+    </v-main>
+
+
 </template>
 
 <script setup lang="ts">
-    
+import Navbar from "./Navbar.vue";
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { Flist } from "../types/Flist";
+import axios from "axios";
+
+const flist = ref<Flist>({ 
+    auth: "",
+    email: "",
+    image_name: "",
+    password: "",
+    registry_token: "",
+    server_address: "",
+    username: "", 
+});
+const router = useRouter();
+const api = axios.create({
+  baseURL: "http://localhost:4000",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
 
+const create = async () => {
+  try {
+    await api.post("/v1/api/fl", flist);
+  } catch (error) {
+    console.error("Failed to create flist", error);
+  }
+};
 </script>
 
 <style>

frontend/src/components/Login.vue

@@ -85,10 +85,10 @@ const visible = ref<boolean>(false);
 
 const login = async () => {
   try {
-    console.log(user)
     const response = await api.post("/v1/api/signin", user);
     const token = response.data.access_token;
     sessionStorage.setItem("token", token);
+    router.push("/flists")
   } catch (error) {
     console.error("Failed to login", error);
   }

frontend/src/components/Navbar.vue

@@ -0,0 +1,14 @@
+<template>
+    <v-app-bar>
+      <v-app-bar-nav-icon>
+        <v-img src=""></v-img>
+      </v-app-bar-nav-icon>
+      <v-spacer>
+
+      </v-spacer>
+    </v-app-bar>
+</template>
+
+
+<script setup lang="ts">
+</script>

frontend/src/components/ViewFlists.vue

@@ -0,0 +1,27 @@
+<template>
+    <div>hello</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import axios from "axios";
+
+const api = axios.create({
+  baseURL: "http://localhost:4000",
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+const flists: any = ref('')
+onMounted(async () =>{
+    try{
+        flists.value = await api.get("/v1/api/fl")
+    } catch (error) {
+        console.error("Failed to fetch flists", error);
+    }
+})
+</script>
+
+<style>
+
+</style>

frontend/src/config.ts

@@ -0,0 +1 @@
+export const BASE_URL = "http://localhost:5173";

frontend/src/main.ts

@@ -4,10 +4,11 @@ import { createVuetify } from "vuetify";
 import * as components from "vuetify/components";
 import * as directives from "vuetify/directives";
 import App from "./App.vue";
+import router from "./router/index";
 
 const vuetify = createVuetify({
   components,
   directives,
 });
 
-createApp(App).use(vuetify).mount("#app");
+createApp(App).use(router).use(vuetify).mount("#app");

frontend/src/router/index.ts

@@ -0,0 +1,39 @@
+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import Login from "../components/Login.vue";
+import CreateFlist from "../components/CreateFlist.vue";
+import ViewFlists from "../components/ViewFlists.vue";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/login",
+    name: "Login",
+    component: Login,
+  },
+  {
+    path: "/flists",
+    name: "Flists",
+    component: ViewFlists,
+  },
+  {
+    path: "/create",
+    name: "Create",
+    component: CreateFlist,
+    meta: { requiresAuth: true },
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes,
+});
+
+router.beforeEach((to, _, next) => {
+  const token: string | null = sessionStorage.getItem("token");
+  if (to.meta.requiresAuth && token === null) {
+    next({ name: "Login" });
+  } else {
+    next();
+  }
+});
+
+export default router;