From b67fce08a71dd9c58ca85e9d5e1b329e36fb74ec Mon Sep 17 00:00:00 2001
From: Salma Elsoly <salmaelsoly@gmail.com>
Date: Mon, 5 Aug 2024 17:49:09 +0300
Subject: [PATCH] feat: add follow up page

---
 frontend/src/assets/logo_white.png            | Bin 0 -> 4270 bytes
 .../src/assets/logo_white.png:Zone.Identifier |   0
 frontend/src/components/CreateFlist.vue       | 151 ++++++++++++++++--
 frontend/src/components/FollowUp.vue          |  26 +++
 frontend/src/components/Footer.vue            |   5 +
 frontend/src/components/Login.vue             |  18 ++-
 frontend/src/components/Navbar.vue            |  18 +--
 frontend/src/router/index.ts                  |  22 ++-
 8 files changed, 198 insertions(+), 42 deletions(-)
 create mode 100644 frontend/src/assets/logo_white.png
 create mode 100644 frontend/src/assets/logo_white.png:Zone.Identifier
 create mode 100644 frontend/src/components/FollowUp.vue
 create mode 100644 frontend/src/components/Footer.vue

diff --git a/frontend/src/assets/logo_white.png b/frontend/src/assets/logo_white.png
new file mode 100644
index 0000000000000000000000000000000000000000..319d3abc99550f8e100fc1b4729121574c0c8ded
GIT binary patch
literal 4270
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
HeCB@uTen(|

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/logo_white.png:Zone.Identifier b/frontend/src/assets/logo_white.png:Zone.Identifier
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/components/CreateFlist.vue b/frontend/src/components/CreateFlist.vue
index 7d06e76..4cfb143 100644
--- a/frontend/src/components/CreateFlist.vue
+++ b/frontend/src/components/CreateFlist.vue
@@ -1,10 +1,127 @@
 <template>
-   <Navbar/>
-    <v-main>
+  <v-app>
+    <Navbar />
+    <v-main class="d-flex flex-column justify-center" height="90%">
+      <v-container fluid>
+        <v-row justify="center">
+          <v-col :cols="8">
+            <h2 class="mb-2">Create a Flist:</h2>
+          </v-col>
+        </v-row>
+        <v-row justify="center">
+          <v-col :cols="4">
+            <label
+              for="image-name"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Image Name
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="image-name"
+              v-model="flist.image_name"
+              variant="solo-filled"
+              required
+            >
+            </v-text-field>
+            <label
+              for="email"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Email
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="email"
+              v-model="flist.email"
+              variant="solo-filled"
+            >
+            </v-text-field>
+            <label
+              for="auth"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Auth
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="auth"
+              v-model="flist.auth"
+              variant="solo-filled"
+            >
+            </v-text-field>
+            <label
+              for="registery-token"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Registery Token
+            </label>
+            <v-text-field
+              class="pr-5 rounded mb-5"
+              id="registery-token"
+              v-model="flist.registry_token"
+              variant="solo-filled"
+            >
+            </v-text-field>
 
-    </v-main>
-      
+            <v-btn
+              class="pr-5 rounded-pill bg-purple-darken-1 mb-8"
+              size="large"
+              width="50%"
+              @click="create"
+              >Create</v-btn
+            >
+          </v-col>
+          <v-col :cols="4">
+            <label
+              for="username"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Username
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="username"
+              v-model="flist.username"
+              variant="solo-filled"
+            >
+            </v-text-field>
 
+            <label
+              for="password"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Password
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="password"
+              v-model="flist.password"
+              variant="solo-filled"
+              :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
+              :type="visible ? 'text' : 'password'"
+              @click:append-inner="visible = !visible"
+            >
+            </v-text-field>
+            <label
+              for="server-address"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Server Address
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="server-address"
+              v-model="flist.server_address"
+              variant="solo-filled"
+            >
+            </v-text-field>
+          </v-col>
+        </v-row>
+      </v-container>
+    </v-main>
+    <Footer></Footer>
+  </v-app>
 </template>
 
 <script setup lang="ts">
@@ -13,15 +130,16 @@ import { ref } from "vue";
 import { useRouter } from "vue-router";
 import { Flist } from "../types/Flist";
 import axios from "axios";
+import Footer from "./Footer.vue";
 
-const flist = ref<Flist>({ 
-    auth: "",
-    email: "",
-    image_name: "",
-    password: "",
-    registry_token: "",
-    server_address: "",
-    username: "", 
+const flist = ref<Flist>({
+  auth: "",
+  email: "",
+  image_name: "",
+  password: "",
+  registry_token: "",
+  server_address: "",
+  username: "",
 });
 const router = useRouter();
 const api = axios.create({
@@ -30,16 +148,15 @@ const api = axios.create({
     "Content-Type": "application/json",
   },
 });
-
+const visible = ref<boolean>(false);
 const create = async () => {
   try {
-    await api.post("/v1/api/fl", flist);
+    await api.post("/v1/api/fl", flist.value);
+    router.push("Follow");
   } catch (error) {
     console.error("Failed to create flist", error);
   }
 };
 </script>
 
-<style>
-
-</style>
\ No newline at end of file
+<style scoped></style>
diff --git a/frontend/src/components/FollowUp.vue b/frontend/src/components/FollowUp.vue
new file mode 100644
index 0000000..afbeff5
--- /dev/null
+++ b/frontend/src/components/FollowUp.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-app>
+    <Navbar></Navbar>
+    <v-main class="d-flex align-center justify-center mb-12 mt-12" height="80%">
+      <div v-if="pending" class="text-center">
+        <v-progress-circular
+          :size="70"
+          :width="7"
+          color="purple-darken-1"
+          indeterminate
+          class="mb-5"
+        ></v-progress-circular>
+        <h2 class="mt-12 mb-5">Creating image . . .</h2>
+        <p>Please wait your image will be ready in few minutes.</p>
+      </div>
+    </v-main>
+    <Footer></Footer>
+  </v-app>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import Navbar from "./Navbar.vue";
+import Footer from "./Footer.vue";
+const pending = ref<boolean>(true);
+</script>
diff --git a/frontend/src/components/Footer.vue b/frontend/src/components/Footer.vue
new file mode 100644
index 0000000..ba571ae
--- /dev/null
+++ b/frontend/src/components/Footer.vue
@@ -0,0 +1,5 @@
+<template>
+  <v-footer class="bg-grey-darken-3 d-flex justify-center">
+    All rights reserved © 2024 - <span> Codescalers Egypt</span>
+  </v-footer>
+</template>
diff --git a/frontend/src/components/Login.vue b/frontend/src/components/Login.vue
index 2739399..683b01c 100644
--- a/frontend/src/components/Login.vue
+++ b/frontend/src/components/Login.vue
@@ -19,34 +19,36 @@
               <v-img :src="logo" class="mb-10" height="10%" width="15%"></v-img>
               <h2 class="mb-5">Sign in</h2>
 
-              <div
+              <label
+                for="username"
                 class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
               >
                 Username
-              </div>
+              </label>
               <v-text-field
                 class="pr-5 rounded"
-                :label="username"
                 v-model="user.username"
                 variant="outlined"
                 density="compact"
+                id="username"
                 required
               >
               </v-text-field>
-              <div
+              <label
+                for="password"
                 class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
               >
                 Password
-              </div>
+              </label>
               <v-text-field
                 class="mb-5 pr-5 rounded"
-                :label="password"
                 v-model="user.password"
                 :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
                 :type="visible ? 'text' : 'password'"
                 variant="outlined"
                 @click:append-inner="visible = !visible"
                 density="compact"
+                id="password"
                 required
               >
               </v-text-field>
@@ -85,10 +87,10 @@ const visible = ref<boolean>(false);
 
 const login = async () => {
   try {
-    const response = await api.post("/v1/api/signin", user);
+    const response = await api.post("/v1/api/signin", user.value);
     const token = response.data.access_token;
     sessionStorage.setItem("token", token);
-    router.push("/flists")
+    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
index ca82d0b..1e2ec9c 100644
--- a/frontend/src/components/Navbar.vue
+++ b/frontend/src/components/Navbar.vue
@@ -1,14 +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>
+  <v-app-bar class="bg-purple-darken-1">
+    <v-app-bar-nav-icon class="ml-8">
+      <v-img :src="whiteLogo" contain height="50px" width="50px"></v-img>
+    </v-app-bar-nav-icon>
+    <v-spacer> </v-spacer>
+    <v-btn to="Create">Create flist</v-btn>
+    <v-btn to="Flists">View List</v-btn>
+  </v-app-bar>
 </template>
 
-
 <script setup lang="ts">
+import whiteLogo from "../assets/logo_white.png";
 </script>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index b8aabe8..b15ca2e 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -2,6 +2,7 @@ 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";
+import FollowUp from "../components/FollowUp.vue";
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -14,6 +15,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "Flists",
     component: ViewFlists,
   },
+  {
+    path: "/follow",
+    name: "Follow",
+    component: FollowUp,
+  },
   {
     path: "/create",
     name: "Create",
@@ -27,13 +33,13 @@ const router = createRouter({
   routes,
 });
 
-router.beforeEach((to, _, next) => {
-  const token: string | null = sessionStorage.getItem("token");
-  if (to.meta.requiresAuth && token === null) {
-    next({ name: "Login" });
-  } else {
-    next();
-  }
-});
+// 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;