refactor: remove global css to style css + update readme + add toolti…

…ps and alerts

Co-authored-by: [email protected] <[email protected]>

frontend/README.md

@@ -1,54 +1,82 @@
 # fl-server frontend
+
 ## Description
 
-`rfs frontend` is a frontend to manage rfs server 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`.
+`Threefold RFS` is a frontend that helps manage the RFS server for creating, mounting, and extracting FungiStore lists, or fl for short. An fl is a simple format that stores information about a whole filesystem in a compact way. It doesn't hold the actual data but includes enough details to retrieve the data from a store.
 
 ## Prerequesites
+
+- build essentials
+
+  ```bash
+  sudo apt-get install build-essential
+  ```
+
 - [node js](https://nodejs.org/en/download/package-manager)
 - [rust](https://www.rust-lang.org/tools/install)
+- Cargo , to be configured to run in the shell
+- musl tool
+
+  ```bash
+      sudo apt install musl-tools
+  ```
+
 ## Installation
+
 ```bash
     git clone https://github.com/threefoldtech/rfs.git
 ```
-#### backend
- In fl-server dir:
-- create flists dir containaing dirs for each user 
-- include config file 
-    ex: 
-    ```yml
-        host='localhost'
-        port=4000
-        store_url=['dir:///tmp/store0']
-        flist_dir='flists'
-
-        jwt_secret='secret'
-        jwt_expire_hours=5
-
-        [[users]] # list of authorized user in the server
-        username = "user1"
-        password = "password1"
-
-        [[users]]
-        username = "user2"
-        password = "password2"
-    ```
-
-- execute the following command to run the backend:
-
-    ``` bash
-    cargo run --bin fl-server -- --config-path config.toml
-    ```
-#### frontend
-
-- execute the following command to run the frontend:
-    ```bash
-        npm install
-        npm run dev
-    ```
+
+### backend
+
+In fl-server dir:
+
+- create flists dir containaing dirs for each user
+  ex:
+  - fl-server
+    - flists
+      - user1
+      - user2
+- include config file
+  ex:
+
+  ```yml
+      host='localhost'
+      port=4000
+      store_url=['dir:///tmp/store0']
+      flist_dir='flists'
+
+      jwt_secret='secret'
+      jwt_expire_hours=5
+
+      [[users]] # list of authorized user in the server
+      username = "user1"
+      password = "password1"
+
+      [[users]]
+      username = "user2"
+      password = "password2"
+  ```
+
+- Move to `fl-server` directory and execute the following command to run the backend:
+
+  ```bash
+  cargo run --bin fl-server -- --config-path config.toml
+  ```
+
+### frontend
+
+- Move to `frontend` directory and execute the following commands to run the frontend:
+
+  ```bash
+      npm install
+      npm run dev
+  ```
+
 ## Usage
-- Create Flist 
+
+- Login with users listed in config.toml with their username and password
+- Create Flist
 - Preview Flist
 - List all Flists
-- Download Flist
+- Download Flist

frontend/index.html

@@ -6,6 +6,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <link rel="icon" type="image" href="./src/assets/logo.png">
   <title>Threefold Flist</title>
+  <link href="./src/style.css" rel="stylesheet">
   <link href="https://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" rel="stylesheet">
 </head>
 

frontend/src/App.vue

@@ -1,9 +1,22 @@
-<script setup lang="ts">
-</script>
 
 <template>
-  <router-view />
+  <v-app>
+    <Navbar v-if="path!=`login`"></Navbar>
+     <router-view />
+    <Footer v-if="path!=`login`"></Footer>
+  </v-app>
+
 </template>
+
+<script setup lang="ts">
+
+import Footer from './components/Footer.vue';
+import Navbar from './components/Navbar.vue';
+import { useRouter } from "vue-router";
+
+const path: string | undefined = useRouter().currentRoute?.value.path
+console.log(path)
+</script>
 <style scoped>
 .logo {
   height: 6em;

frontend/src/client.ts

@@ -1,7 +1,5 @@
 import axios from "axios";
-import { useClipboard } from "@vueuse/core";
-import { toast } from "vue3-toastify";
-const { copy } = useClipboard();
+
 
 export const api = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
@@ -11,7 +9,3 @@ export const api = axios.create({
   },
 });
 
-export const copyLink = (url: string) => {
-  copy(url);
-  toast.success("Link Copied to Clipboard");
-};

frontend/src/components/CreateFlist.vue

@@ -1,6 +1,4 @@
 <template>
-  <v-app>
-    <Navbar />
     <v-main class="d-flex flex-column justify-center mn-height" >
       <v-container fluid>
         <v-row justify="center">
@@ -84,14 +82,16 @@
                         Username
                       </label>
                       <v-text-field
-                        class="pr-5 rounded"
+                        class="pr-5 text-medium-emphasis"
                         id="username"
                         v-model="flist.username"
                         variant="solo-filled"
                         density="compact"
                         :placeholder="
                           privateType === `token` ? `token` : `johndoe`
                         "
+                        :value="privateType === `token`?`token`:``"
+                        :readonly="privateType === `token`"
                       >
                       </v-text-field>
                     </div>
@@ -202,18 +202,14 @@
         </v-row>
       </v-container>
     </v-main>
-    <Footer></Footer>
-  </v-app>
 </template>
 
 <script setup lang="ts">
-import Navbar from "./Navbar.vue";
 import { ref } from "vue";
 import { Flist } from "../types/Flist";
-import Footer from "./Footer.vue";
+
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
-import "../../public/global.css";
 import { api } from "../client";
 
 const privateReg = ref<boolean>(false);

frontend/src/components/FollowUp.vue

@@ -1,6 +1,4 @@
 <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
@@ -29,14 +27,10 @@
         ></v-alert>
       </div>
     </v-main>
-    <Footer></Footer>
-  </v-app>
 </template>
 
 <script setup lang="ts">
 import { ref, onMounted, watch } from "vue";
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
 import { api } from "../client";

frontend/src/components/Home.vue

@@ -1,6 +1,4 @@
 <template>
-  <v-app>
-    <Navbar></Navbar>
     <div class="w-100 position-relative" >
       <v-img :src="image" cover style="z-index: 2"></v-img>
     </div>
@@ -84,14 +82,10 @@
         </v-data-table>
       </v-container>
     </v-main>
-    <Footer></Footer>
-  </v-app>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref, watch } from "vue";
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
 import image from "../assets/home.png";
 import { FlistsResponseInterface, FlistBody } from "../types/Flist.ts";
 import { toast } from "vue3-toastify";

frontend/src/components/Login.vue

@@ -62,6 +62,7 @@
                 class="pr-5 rounded-pill background-green text-white"
                 size="large"
                 width="50%"
+                :disabled="loading"
                 @click="login"
                 >Sign In</v-btn
               >
@@ -82,10 +83,11 @@ import { User } from "../types/User.ts";
 import { api } from "../client.ts";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";
-import "../../public/global.css";
+
 
 
 const user = ref<User>({ username: "", password: "" });
+const loading = ref<boolean>(false)
 
 
 const visible = ref<boolean>(false);

frontend/src/components/Navbar.vue

@@ -43,7 +43,6 @@
 
 <script setup lang="ts">
 import whiteLogo from "../assets/logo_white.png";
-import "../../public/global.css";
 import { toast } from "vue3-toastify";
 const auth: string | null = sessionStorage.getItem("token");
 
@@ -57,4 +56,5 @@ const logout = async () => {
     toast.error(error.response?.data || "error occured");
   }
 };
+
 </script>

frontend/src/components/PreviewFlist.vue

@@ -1,6 +1,4 @@
 <template>
-  <v-app>
-    <Navbar></Navbar>
     <div class="w-100 position-relative">
       <v-img :src="image" cover style="z-index: 2"></v-img>
       <div
@@ -65,15 +63,11 @@
         </v-row>
       </v-container>
     </v-main>
-    <Footer />
-  </v-app>
 </template>
 
 <script setup lang="ts">
 
 import { onMounted, ref } from "vue";
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
 import image from "../assets/home.png";
 import { toast } from "vue3-toastify";
 import "vue3-toastify/dist/index.css";

frontend/src/components/UserFlist.vue

@@ -1,6 +1,4 @@
 <template>
-  <v-app>
-    <Navbar />
     <v-main class="mn-height">
       <v-container class="pa-0">
         <v-row no-gutters class="pa-0 ma-0">
@@ -83,20 +81,16 @@
         </v-row>
       </v-container>
     </v-main>
-    <Footer />
-  </v-app>
 </template>
 <script setup lang="ts">
-import Navbar from "./Navbar.vue";
-import Footer from "./Footer.vue";
 import { FlistsResponseInterface } from "../types/Flist.ts";
 import { computed } from "vue";
 import { onMounted, ref } from "vue";
 import { toast } from "vue3-toastify";
 import { api } from "../client.ts";
 import { copyLink } from "../helpers.ts";
 import { filesize } from "filesize";
-import "../../public/global.css";
+