totp generation is working

moved create secret to modal

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "element-plus": "^2.7.5",
+        "totp-generator": "^1.0.0",
         "vue": "^3.4.21"
       },
       "devDependencies": {
@@ -1830,6 +1831,14 @@
       "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
       "dev": true
     },
+    "node_modules/jssha": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jssha/-/jssha-3.3.1.tgz",
+      "integrity": "sha512-VCMZj12FCFMQYcFLPRm/0lOBbLi8uM2BhXPTqw3U4YAfs4AZfiApOoBLoN8cQE60Z50m1MYMTQVCfgF/KaCVhQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -2361,6 +2370,14 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/totp-generator": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/totp-generator/-/totp-generator-1.0.0.tgz",
+      "integrity": "sha512-Iu/1Lk60/MH8FE+5cDWPiGbwKK1hxzSq+KT9oSqhZ1BEczGIKGcN50bP0WMLiIZKRg7t29iWLxw6f81TICQdoA==",
+      "dependencies": {
+        "jssha": "^3.3.1"
+      }
+    },
     "node_modules/tslib": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz",

frontend/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "element-plus": "^2.7.5",
+    "totp-generator": "^1.0.0",
     "vue": "^3.4.21"
   },
   "devDependencies": {

frontend/src/App.vue

@@ -23,12 +23,8 @@ import ListSecrets from "./components/ListSecrets.vue";
       </template>
     </el-page-header>
 
-    <!-- <div class="header">
-      <el-button class="logoutBtn" @click="logout">Logout</el-button>
-    </div>
-   -->
     <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
-      <CreateSecret />
+      <CreateSecret @close="creationDialog = false" />
     </el-dialog>
 
     <div class="container">
@@ -37,7 +33,7 @@ import ListSecrets from "./components/ListSecrets.vue";
       <el-button @click="showSecrets = false" v-if="showSecrets && loggedin">
         Hide secrets
       </el-button>
-      <ListSecrets v-if="showSecrets && loggedin" />
+      <ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" />
     </div>
   </div>
 </template>
@@ -49,6 +45,7 @@ export default {
       loggedin: false,
       showSecrets: false,
       creationDialog: false,
+      listUpdated: 1,
     };
   },
   methods: {
@@ -56,6 +53,13 @@ export default {
       localStorage.removeItem("token");
       this.loggedin = false;
     },
+
+    secretSaved() {
+      this.creationDialog = false;
+      console.log("before update", this.listUpdated);
+      this.listUpdated += 1;
+      console.log("after update", this.listUpdated);
+    },
   },
 };
 </script>

frontend/src/components/CreateSecret.vue

@@ -18,7 +18,15 @@
           <el-input v-model="form.notes" />
         </el-form-item>
       </el-form>
-      <el-button @click="createSecret" type="primary">Create secret</el-button>
+      <el-button @click="createSecret" type="primary">Save & Add More</el-button>
+      <el-button
+        @click="
+          createSecret();
+          closeDialog();
+        "
+        type="primary"
+        >Save & Close</el-button
+      >
     </div>
   </div>
 </template>
@@ -30,10 +38,10 @@ export default {
       title: "Create Secret",
       apiBaseUrl: "http://localhost:8000",
       form: {
-        issuer: "asdfasdf",
+        issuer: "",
-        username: "asdfasdf",
+        username: "",
-        secret: "asdfasdf",
+        secret: "",
-        notes: "asdfasdf",
+        notes: "",
       },
     };
   },
@@ -55,6 +63,14 @@ export default {
         .then((response) => response.json())
         .then((data) => console.log(data));
     },
+
+    closeDialog() {
+      (this.form.issuer = ""),
+        (this.form.username = ""),
+        (this.form.notes = ""),
+        (this.form.secret = "");
+      this.$emit("close", true);
+    },
   },
 };
 </script>

frontend/src/components/ListSecrets.vue

@@ -3,13 +3,21 @@
     <el-table :data="secretsList" style="width: 100vw">
       <el-table-column prop="issuer" label="Issuer" />
       <el-table-column prop="username" label="Username" />
-      <el-table-column prop="secret" label="Secret" />
+      <el-table-column label="Secret">
+        <template #default="scope">
+          <div>
+            {{ generateTotp(scope.row.secret) }}
+          </div>
+        </template>
+      </el-table-column>
       <el-table-column prop="notes" label="Notes" />
     </el-table>
   </div>
 </template>
 
 <script>
+import { TOTP } from "totp-generator";
+
 export default {
   data() {
     return {
@@ -51,6 +59,12 @@ export default {
       const secret = JSON.parse(jsonString);
       return secret;
     },
+
+    generateTotp(secret) {
+      const { otp, expires } = TOTP.generate(secret);
+      console.log(expires);
+      return otp;
+    },
   },
 
   mounted() {