From 8ee2b6283362efea41ea99b4dab506a5085e8de9 Mon Sep 17 00:00:00 2001
From: nabil salah <nabil.salah203@gmail.com>
Date: Mon, 5 Aug 2024 14:31:44 +0300
Subject: [PATCH] feat: viewlist and create flist and router

---
 frontend/.env                           |  1 +
 frontend/package-lock.json              | 18 ++++++++++++
 frontend/package.json                   |  1 +
 frontend/src/App.vue                    |  5 ++--
 frontend/src/components/CreateFlist.vue | 37 +++++++++++++++++++++--
 frontend/src/components/Login.vue       |  2 +-
 frontend/src/components/Navbar.vue      | 14 +++++++++
 frontend/src/components/ViewFlists.vue  | 27 +++++++++++++++++
 frontend/src/config.ts                  |  1 +
 frontend/src/main.ts                    |  3 +-
 frontend/src/router/index.ts            | 39 +++++++++++++++++++++++++
 frontend/src/router/router.ts           | 27 -----------------
 12 files changed, 141 insertions(+), 34 deletions(-)
 create mode 100644 frontend/.env
 create mode 100644 frontend/src/components/Navbar.vue
 create mode 100644 frontend/src/config.ts
 create mode 100644 frontend/src/router/index.ts
 delete mode 100644 frontend/src/router/router.ts

diff --git a/frontend/.env b/frontend/.env
new file mode 100644
index 0000000..b704691
--- /dev/null
+++ b/frontend/.env
@@ -0,0 +1 @@
+export const BASE_URL = "http://localhost:5173";
\ No newline at end of file
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 64f7fea..21952a2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -15,6 +15,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",
@@ -656,6 +657,16 @@
       "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
       "dev": true
     },
+    "node_modules/@types/node": {
+      "version": "22.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.1.0.tgz",
+      "integrity": "sha512-AOmuRF0R2/5j1knA3c6G3HOk523Ga+l+ZXltX8SF1+5oqcXijjfTd8fY3XRZqSihEu9XhtQnKYLmkFaoxgsJHw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~6.13.0"
+      }
+    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.1.2.tgz",
@@ -1184,6 +1195,13 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/undici-types": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.13.0.tgz",
+      "integrity": "sha512-xtFJHudx8S2DSoujjMd1WeWvn7KKWFRESZTMeL1RptAYERu29D6jphMjjY+vn96jvN3kVPDNxU/E13VTaXj6jg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/vite": {
       "version": "5.3.5",
       "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.5.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 58baefa..78ad030 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 1527365..1b55b75 100644
--- a/frontend/src/App.vue
+++ b/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;
diff --git a/frontend/src/components/CreateFlist.vue b/frontend/src/components/CreateFlist.vue
index 5f12cd0..7d06e76 100644
--- a/frontend/src/components/CreateFlist.vue
+++ b/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>
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 412a4e1..2739399 100644
--- a/frontend/src/components/Login.vue
+++ b/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);
   }
diff --git a/frontend/src/components/Navbar.vue b/frontend/src/components/Navbar.vue
new file mode 100644
index 0000000..ca82d0b
--- /dev/null
+++ b/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>
diff --git a/frontend/src/components/ViewFlists.vue b/frontend/src/components/ViewFlists.vue
index e69de29..2cdbca0 100644
--- a/frontend/src/components/ViewFlists.vue
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/config.ts b/frontend/src/config.ts
new file mode 100644
index 0000000..e01e304
--- /dev/null
+++ b/frontend/src/config.ts
@@ -0,0 +1 @@
+export const BASE_URL = "http://localhost:5173";
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index ea6042f..42ab230 100644
--- a/frontend/src/main.ts
+++ b/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");
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
new file mode 100644
index 0000000..b8aabe8
--- /dev/null
+++ b/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;
diff --git a/frontend/src/router/router.ts b/frontend/src/router/router.ts
deleted file mode 100644
index c5f83e3..0000000
--- a/frontend/src/router/router.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
-import { Login } from "../components/Login.vue"
-
-
-const routes: Array<RouteRecordRaw> = [
-  {path:"/login", 
-    name:"Login", 
-    component:Login, 
-    meta:{requiresAuth:true},}
-  
-];
-
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes,
-});
-
-router.beforeEach((to, from, next) => {
-  const token: string | null = sessionStorage.getItem("token")
-  if (to.meta.requiresAuth && token === null){
-    next({name:"Login"})
-  }else{
-    next()
-  }
-});
-
-export default router;
\ No newline at end of file