table now has edit button, WIP

frontend/src/App.vue

@@ -1,6 +1,6 @@
 <script setup>
 import CreateSecret from "./components/CreateSecret.vue";
-import HelloWorld from "./components/HelloWorld.vue";
+import HomePage from "./components/HomePage.vue";
 import ListSecrets from "./components/ListSecrets.vue";
 </script>
 
@@ -28,7 +28,7 @@ import ListSecrets from "./components/ListSecrets.vue";
     </el-dialog>
 
     <div class="container">
-      <HelloWorld msg="You did it!" @loggedin="loggedin = true" v-if="!loggedin" />
+      <HomePage msg="You did it!" @loggedin="loggedin = 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

frontend/src/components/CreateSecret.vue

@@ -1,8 +1,5 @@
 <template>
   <div>
-    <h3>
-      {{ title }}
-    </h3>
     <div id="container">
       <el-form :model="form" label-width="auto">
         <el-form-item label="Issuer">

frontend/src/components/ListSecrets.vue

@@ -1,6 +1,14 @@
 <template>
   <div>
     <el-table :data="secretsList" style="width: 100vw">
+      <el-table-column type="expand">
+        <template #default="props">
+          <div style="margin-left: 3rem">
+            {{ props.row.notes }}
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="id" label="Id" />
       <el-table-column prop="issuer" label="Issuer" />
       <el-table-column prop="username" label="Username" />
       <el-table-column label="Secret">
@@ -10,7 +18,14 @@
           </div>
         </template>
       </el-table-column>
-      <el-table-column prop="notes" label="Notes" />
+      <!-- <el-table-column prop="notes" label="Notes" /> -->
+      <el-table-column fixed="right" label="Operations" width="120">
+        <template #default="scope">
+          <el-button link type="primary" size="small" @click="handleClick(scope)">
+            Edit
+          </el-button>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
@@ -42,14 +57,15 @@ export default {
       const response = await fetch(url, requestOptions)
         .then((response) => response.json())
         .then((data) => {
-          // console.log(data);
+          console.log(data);
           return data;
         })
         .catch((err) => console.log(err));
 
       response.forEach((element) => {
-        console.log(element);
+        // console.log(element);
         const row = this.parseSecret(element.data);
+        row["id"] = element["id"];
         this.secretsList.push(row);
       });
     },
@@ -65,6 +81,10 @@ export default {
       console.log(expires);
       return otp;
     },
+
+    handleClick(scope) {
+      console.log(scope);
+    },
   },
 
   mounted() {