Edit support and timer on main page

frontend/src/components/CreateSecret.vue

@@ -15,7 +15,9 @@
           <el-input v-model="form.notes" />
         </el-form-item>
       </el-form>
-      <el-button @click="createSecret" type="primary">Save & Add More</el-button>
+      <el-button @click="createSecret" type="primary" v-if="showAddMore"
+        >Save & Add More</el-button
+      >
       <el-button
         @click="
           createSecret();
@@ -30,16 +32,22 @@
 
 <script>
 export default {
+  props: {
+    editSecret: Object,
+  },
   data() {
     return {
       title: "Create Secret",
       apiBaseUrl: "http://localhost:8000",
+      id: null,
       form: {
         issuer: "",
         username: "",
         secret: "",
         notes: "",
       },
+      method: "POST",
+      showAddMore: true,
     };
   },
 
@@ -47,13 +55,17 @@ export default {
     async createSecret() {
       const url = `${this.apiBaseUrl}/secret`;
       const token = sessionStorage.getItem("token");
+      const bodyData = { data: btoa(JSON.stringify(this.form)) };
+      if (this.method === "PUT") {
+        bodyData["id"] = this.id;
+      }
       const requestOptions = {
-        method: "POST",
+        method: this.method,
         headers: {
           "Content-Type": "application/json",
           Authorization: `Bearer ${token}`,
         },
-        body: JSON.stringify({ data: btoa(JSON.stringify(this.form)) }),
+        body: JSON.stringify(bodyData),
       };
       console.log(requestOptions);
       await fetch(url, requestOptions)
@@ -69,6 +81,19 @@ export default {
       this.$emit("close", true);
     },
   },
+
+  created() {
+    // console.log(this.editSecret.id);
+    if (this.editSecret) {
+      this.id = this.editSecret.id;
+      this.form.issuer = this.editSecret.issuer;
+      this.form.username = this.editSecret.username;
+      this.form.secret = this.editSecret.secret;
+      this.form.notes = this.editSecret.notes;
+      this.method = "PUT";
+      this.showAddMore = false;
+    }
+  },
 };
 </script>
 

frontend/src/components/ListSecrets.vue

@@ -103,7 +103,11 @@ export default {
     },
 
     editSecret(id) {
-      console.log(id);
+      const editingSecret = this.secretsList.filter((element) => {
+        return element.id === id;
+      });
+      // console.log(editingSecret);
+      this.$emit("edit", editingSecret[0]);
     },
 
     filterTable(band) {