table now has edit button, WIP

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

@@ -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>
 
@@ -23,21 +23,17 @@ 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">
-      <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
       </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

@@ -1,8 +1,5 @@
 <template>
   <div>
-    <h3>
-      {{ title }}
-    </h3>
     <div id="container">
       <el-form :model="form" label-width="auto">
         <el-form-item label="Issuer">
@@ -18,7 +15,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 +35,10 @@ export default {
       title: "Create Secret",
       apiBaseUrl: "http://localhost:8000",
       form: {
-        issuer: "asdfasdf",
-        username: "asdfasdf",
-        secret: "asdfasdf",
-        notes: "asdfasdf",
+        issuer: "",
+        username: "",
+        secret: "",
+        notes: "",
       },
     };
   },
@@ -55,6 +60,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/HomePage.vue

@@ -1,12 +1,3 @@
-<script setup>
-defineProps({
-  msg: {
-    type: String,
-    required: true,
-  },
-});
-</script>
-
 <template>
   <div>
     <el-form :model="form" label-width="auto">

frontend/src/components/ListSecrets.vue

@@ -1,15 +1,38 @@
 <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 prop="secret" label="Secret" />
-      <el-table-column prop="notes" label="Notes" />
+      <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-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>
 
 <script>
+import { TOTP } from "totp-generator";
+
 export default {
   data() {
     return {
@@ -34,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);
       });
     },
@@ -51,6 +75,16 @@ export default {
       const secret = JSON.parse(jsonString);
       return secret;
     },
+
+    generateTotp(secret) {
+      const { otp, expires } = TOTP.generate(secret);
+      console.log(expires);
+      return otp;
+    },
+
+    handleClick(scope) {
+      console.log(scope);
+    },
   },
 
   mounted() {

main.py

@@ -133,6 +133,8 @@ async def create_secret(secret: Secret, current_user: dict = Depends(get_current
         text = f.read()
         if text:
             data.extend(json.loads(text))
+    secret_id = max(i['id'] for i in data) + 1
+    secret.id = secret_id
     secret.user_id = current_user['id']
     encryption_key = current_user['encryption_key'].encode()
 

models.py

@@ -17,10 +17,9 @@ class UserLogin(BaseModel):
     password: str
 
 class Secret(BaseModel):
+    id: int = None
     user_id: int = None
     data: str
-    salt: str = None
-    notes: str = None
     added_on: str = datetime.datetime.now(datetime.timezone.utc).isoformat()
     modified_on: str = None
     active: bool = True