Table filter WIP

Also added validatedtoken API

frontend/src/App.vue

@@ -28,7 +28,14 @@ import ListSecrets from "./components/ListSecrets.vue";
     </el-dialog>
 
     <div class="container">
-      <HomePage msg="You did it!" @loggedin="loggedin = true" v-if="!loggedin" />
+      <HomePage
+        msg="You did it!"
+        @loggedin="
+          loggedin = true;
+          showSecrets = true;
+        "
+        v-if="!loggedin"
+      />
       <el-button @click="showSecrets = true" v-if="loggedin"> Show secrets </el-button>
       <el-button @click="showSecrets = false" v-if="showSecrets && loggedin">
         Hide secrets
@@ -46,11 +53,12 @@ export default {
       showSecrets: false,
       creationDialog: false,
       listUpdated: 1,
+      apiBaseUrl: "http://localhost:8000",
     };
   },
   methods: {
     logout() {
-      localStorage.removeItem("token");
+      sessionStorage.removeItem("token");
       this.loggedin = false;
     },
 
@@ -60,6 +68,47 @@ export default {
       this.listUpdated += 1;
       console.log("after update", this.listUpdated);
     },
+
+    async validateToken() {
+      const url = `${this.apiBaseUrl}/validate-token`;
+      const token = sessionStorage.getItem("token");
+      const requestOptions = {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+      };
+
+      const response = await fetch(url, requestOptions)
+        .then((response) => response.json())
+        .catch((err) => {
+          console.log(err);
+          return false;
+        });
+
+      if (!response) {
+        return false;
+      }
+      if ("message" in response) {
+        if (response["message"] === "authenticated") {
+          console.log("token validated");
+          return true;
+        }
+      }
+      return false;
+    },
+  },
+
+  async mounted() {
+    if ("token" in sessionStorage) {
+      const tokenValid = await this.validateToken();
+
+      if (tokenValid) {
+        this.loggedin = true;
+        this.showSecrets = true;
+      }
+    }
   },
 };
 </script>

frontend/src/components/CreateSecret.vue

@@ -46,7 +46,7 @@ export default {
   methods: {
     async createSecret() {
       const url = `${this.apiBaseUrl}/secret`;
-      const token = localStorage.getItem("token");
+      const token = sessionStorage.getItem("token");
       const requestOptions = {
         method: "POST",
         headers: {

frontend/src/components/HomePage.vue

@@ -49,7 +49,7 @@ export default {
       if ("message" in response) {
         if (response.message === "authenticated") {
           const token = response.accessToken;
-          localStorage.setItem("token", token);
+          sessionStorage.setItem("token", token);
           this.$emit("loggedin", true);
         }
       }

frontend/src/components/ListSecrets.vue

@@ -1,6 +1,20 @@
 <template>
   <div>
-    <el-table :data="secretsList" style="width: 100vw">
+    <div>
+      <br />
+      <el-button-group>
+        <el-button
+          type="success"
+          v-for="band in filterBands"
+          :key="band"
+          @click="filterTable(band)"
+        >
+          {{ band }}
+        </el-button>
+        <el-button type="success">Clear</el-button>
+      </el-button-group>
+    </div>
+    <el-table :data="filteredSecretsList" style="width: 100vw">
       <el-table-column type="expand">
         <template #default="props">
           <div style="margin-left: 3rem">
@@ -39,13 +53,23 @@ export default {
       message: "Hello List Secret",
       apiBaseUrl: "http://localhost:8000",
       secretsList: [],
+      filteredSecretsList: [],
+      filterBands: ["A-C", "D-I", "J-O", "P-S", "T-Z"],
+      filterBandsVals: {
+        "A-C": ["A", "B", "C"],
+        "D-I": ["D", "E", "F", "G", "H", "I"],
+        "J-O": ["J", "K", "L", "M", "N", "O"],
+        "P-S": ["P", "Q", "R", "S"],
+        "T-Z": ["T", "U", "V", "W", "X", "Y", "Z"],
+      },
+      currentFilter: [],
     };
   },
 
   methods: {
     async listSecrets() {
       const url = `${this.apiBaseUrl}/secret`;
-      const token = localStorage.getItem("token");
+      const token = sessionStorage.getItem("token");
       const requestOptions = {
         method: "GET",
         headers: {
@@ -85,6 +109,28 @@ export default {
     handleClick(scope) {
       console.log(scope);
     },
+
+    filterTable(band) {
+      const letters = this.filterBandsVals[band];
+      this.currentFilter = letters;
+      console.log(letters);
+    },
+
+    checkFirstLetter(row) {
+      const firstLetter = row.issuer[0].toUpperCase();
+      if (this.currentFilter.indexOf(firstLetter) > 0) {
+        return true;
+      }
+      return false;
+    },
+  },
+
+  watch: {
+    currentFilter: function (newFilter, oldFilter) {
+      // console.log("filter", newFilter, oldFilter);
+      const filteredList = this.secretsList.filter(this.checkFirstLetter);
+      this.filteredSecretsList = filteredList;
+    },
   },
 
   mounted() {

main.py

@@ -168,3 +168,13 @@ async def list_secret(current_user: dict = Depends(get_current_user)):
         secret['data'] = decrypted_data
 
     return user_secrets
+
+
+@app.get('/validate-token')
+async def validate_token(current_user: dict = Depends(get_current_user)):
+    user_id = current_user['id']
+    print("user_id: ", user_id)
+    if user_id is not None:
+        return {'message': 'authenticated'}
+
+    raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED)