fix: missing field in create flist + add required notation form image…

… name field

frontend/package.json

@@ -13,6 +13,7 @@
     "axios": "^1.7.3",
     "vue": "^3.4.31",
     "vue-router": "^4.4.2",
+    "vue3-toastify": "^0.2.2",
     "vuetify": "^3.6.14"
   },
   "devDependencies": {

frontend/src/components/CreateFlist.vue

@@ -12,15 +12,16 @@
           <v-col :cols="4">
             <label
               for="image-name"
-              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center"
             >
-              Image Name
+              Image Name<span style="color: red">*</span>
             </label>
             <v-text-field
               class="pr-5 rounded"
               id="image-name"
               v-model="flist.image_name"
               variant="solo-filled"
+              density="compact"
               required
             >
             </v-text-field>
@@ -35,6 +36,7 @@
               id="email"
               v-model="flist.email"
               variant="solo-filled"
+              density="compact"
             >
             </v-text-field>
             <label
@@ -48,6 +50,7 @@
               id="auth"
               v-model="flist.auth"
               variant="solo-filled"
+              density="compact"
             >
             </v-text-field>
             <label
@@ -61,6 +64,7 @@
               id="registery-token"
               v-model="flist.registry_token"
               variant="solo-filled"
+              density="compact"
             >
             </v-text-field>
 
@@ -84,6 +88,7 @@
               id="username"
               v-model="flist.username"
               variant="solo-filled"
+              density="compact"
             >
             </v-text-field>
 
@@ -101,6 +106,7 @@
               :append-inner-icon="visible ? 'mdi-eye-off' : 'mdi-eye'"
               :type="visible ? 'text' : 'password'"
               @click:append-inner="visible = !visible"
+              density="compact"
             >
             </v-text-field>
             <label
@@ -114,6 +120,21 @@
               id="server-address"
               v-model="flist.server_address"
               variant="solo-filled"
+              density="compact"
+            >
+            </v-text-field>
+            <label
+              for="identity-token"
+              class="text-subtitle-1 text-medium-emphasis d-flex align-center justify-space-between"
+            >
+              Identity Token
+            </label>
+            <v-text-field
+              class="pr-5 rounded"
+              id="identity-token"
+              v-model="flist.identity_token"
+              variant="solo-filled"
+              density="compact"
             >
             </v-text-field>
           </v-col>
@@ -131,10 +152,13 @@ import { useRouter } from "vue-router";
 import { Flist } from "../types/Flist";
 import axios from "axios";
 import Footer from "./Footer.vue";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
 
 const flist = ref<Flist>({
   auth: "",
   email: "",
+  identity_token: "",
   image_name: "",
   password: "",
   registry_token: "",
@@ -146,17 +170,17 @@ const api = axios.create({
   baseURL: "http://localhost:4000",
   headers: {
     "Content-Type": "application/json",
+    Authorization: "Bearer " + sessionStorage.getItem("token"),
   },
 });
 const visible = ref<boolean>(false);
 const create = async () => {
   try {
     await api.post("/v1/api/fl", flist.value);
     router.push("Follow");
-  } catch (error) {
+  } catch (error: any) {
     console.error("Failed to create flist", error);
+    toast.error(error.response?.data || "error occured");
   }
 };
 </script>
-
-<style scoped></style>

frontend/src/components/FollowUp.vue

@@ -24,3 +24,18 @@ import Navbar from "./Navbar.vue";
 import Footer from "./Footer.vue";
 const pending = ref<boolean>(true);
 </script>
+
+<style lang="css" scoped>
+.v-progress-circular--indeterminate .v-progress-circular__circle {
+  animation: progress-circular-rotate 4s linear infinite !important;
+}
+
+@keyframes progress-circular-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

frontend/src/components/Login.vue

@@ -9,8 +9,26 @@
     "
   >
     <v-row>
-      <v-col :cols="4">
-        <v-img :src="image" cover height="100%"> </v-img>
+      <v-col :cols="4" class="position-relative">
+        <v-img :src="image" cover height="100%" style="z-index: 900"> </v-img>
+        <v-container
+          class="position-absolute top-0 d-flex flex-column justify-center ga-0"
+          style="z-index: 1000; height: 70%"
+        >
+          <v-img
+            :src="whiteLogo"
+            height="10%"
+            width="15%"
+            class="mb-5 flex-grow-0"
+          ></v-img>
+          <p class="mt-0" style="width: 90%">
+            Is the main tool to create, mount and extract FungiStore lists
+            (Fungilist)fl for short. An fl is a simple format to keep
+            information about an entire filesystem in a compact form. It does
+            not hold the data itself but enough information to retrieve this
+            data back from a store.
+          </p>
+        </v-container>
       </v-col>
       <v-col :cols="8" class="d-flex align-center">
         <v-container class="d-flex flex-column align-center justify-center">
@@ -69,11 +87,14 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import image from "./../assets/Image.png";
+import image from "./../assets/side.png";
 import logo from "./../assets/logo.png";
+import whiteLogo from "../assets/logo_white.png";
 import { useRouter } from "vue-router";
 import { User } from "../types/User.ts";
 import axios from "axios";
+import { toast } from "vue3-toastify";
+import "vue3-toastify/dist/index.css";
 
 const user = ref<User>({ username: "", password: "" });
 const router = useRouter();
@@ -91,8 +112,9 @@ const login = async () => {
     const token = response.data.access_token;
     sessionStorage.setItem("token", token);
     router.push("/flists");
-  } catch (error) {
+  } catch (error: any) {
     console.error("Failed to login", error);
+    toast.error(error.response?.data || "error occured");
   }
 };
 </script>

frontend/src/main.ts

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

frontend/src/types/Flist.ts

@@ -1,6 +1,7 @@
 export interface Flist{
     auth: string
     email: string
+    identity_token:string
     image_name: string
     password: string
     registry_token: string