Edit support and timer on main page

frontend/src/App.vue

@@ -6,27 +6,26 @@ import ListSecrets from "./components/ListSecrets.vue";
 
 <template>
   <div>
-    <el-page-header :icon="null">
-      <template #icon> <span v-show="false">Wohoot</span></template>
-      <template #content>
-        <div class="flex items-center">
-          <span class="text-large font-600 mr-3"> FastAuth </span>
-        </div>
-      </template>
-      <template #extra>
-        <div class="flex items-center" v-if="loggedin">
-          <el-button type="primary" class="ml-2" @click="creationDialog = true">
-            Create
-          </el-button>
-          <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
-        </div>
-      </template>
-    </el-page-header>
+    <div id="header">
+      <span class="logo">FastAuth</span>
+      <div class="header-buttons" v-if="loggedin">
+        <el-button type="primary" class="ml-2" @click="creationDialog = true">
+          Create
+        </el-button>
+        <el-button type="warning" class="ml-2" @click="logout">Logout</el-button>
+        <el-button type="error" @click="refresh">Refresh</el-button>
+      </div>
+    </div>
+    <div class="timer" :style="{ width: timerWidth + '%' }"></div>
 
     <el-dialog v-model="creationDialog" title="Add a new TOTP secret" width="80vw">
       <CreateSecret @close="creationDialog = false" />
     </el-dialog>
 
+    <el-dialog v-model="editDialog" title="Edit TOTP secret" width="80vw">
+      <CreateSecret :editSecret="editingSecret" @close="editDialog = false" />
+    </el-dialog>
+
     <div class="container">
       <HomePage
         msg="You did it!"
@@ -36,11 +35,11 @@ import ListSecrets from "./components/ListSecrets.vue";
         "
         v-if="!loggedin"
       />
-      <el-button @click="showSecrets = true" v-if="loggedin"> Show secrets </el-button>
+      <!-- <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 :key="listUpdated" v-if="showSecrets && loggedin" />
+      </el-button> -->
+      <ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" @edit="editSecret" />
     </div>
   </div>
 </template>
@@ -54,6 +53,9 @@ export default {
       creationDialog: false,
       listUpdated: 1,
       apiBaseUrl: "http://localhost:8000",
+      editDialog: false,
+      editingSecret: {},
+      timerWidth: 100,
     };
   },
   methods: {
@@ -98,6 +100,29 @@ export default {
       }
       return false;
     },
+
+    editSecret(secret) {
+      this.editingSecret = secret;
+      // console.log(this.editingSecret);
+      this.editDialog = true;
+    },
+
+    refresh() {
+      this.listUpdated += 1;
+    },
+
+    startTimer() {
+      this.interval = setInterval(() => {
+        const now = new Date();
+        const seconds = now.getSeconds();
+        const remainingTime = (seconds > 30 ? 60 : 30) - seconds;
+        // console.log(remainingTime);
+        this.timerWidth = (remainingTime / 30) * 100;
+        if (remainingTime === 30) {
+          this.refresh();
+        }
+      }, 1000);
+    },
   },
 
   async mounted() {
@@ -108,6 +133,7 @@ export default {
         this.loggedin = true;
         this.showSecrets = true;
       }
+      this.startTimer();
     }
   },
 };
@@ -125,7 +151,7 @@ export default {
 }
 
 .container {
-  margin-top: 2rem;
+  margin-top: 0;
 }
 
 .logoutBtn {
@@ -136,4 +162,28 @@ export default {
 .el-page-header__back {
   display: none !important;
 }
+
+#header {
+  width: 100vw;
+  height: 3rem;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: rgb(170, 247, 247);
+  display: flex;
+  align-items: center;
+  padding: 0 12px 0 12px;
+  justify-content: space-between;
+  box-shadow: 2px 0px 8px #aaa;
+}
+.logo {
+  font-size: 1.3rem;
+  font-weight: 700;
+}
+
+.timer {
+  margin-top: 1.2rem;
+  height: 0.3rem;
+  background-color: green;
+}
 </style>

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

@@ -2,52 +2,44 @@
   <div>
     <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">
-            {{ 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">
-        <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
+      <div class="filter-buttons">
+        <el-button-group>
+          <el-button
+            type="success"
+            v-for="band in filterBands"
+            :key="band"
+            @click="filterTable(band)"
+          >
+            {{ band }}
           </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+          <el-button type="success" @click="clearFilter" v-if="showClear"
+            >Clear</el-button
+          >
+        </el-button-group>
+      </div>
+    </div>
+
+    <div id="cards" v-if="loadCards">
+      <span v-for="secret in filteredSecretsList" :key="secret.id">
+        <SecretCard
+          :issuer="secret.issuer"
+          :username="secret.username"
+          :secret="secret.secret"
+          :id="secret.id"
+          @edit="editSecret"
+        />
+      </span>
+    </div>
   </div>
 </template>
 
 <script>
 import { TOTP } from "totp-generator";
 
+import SecretCard from "./SecretCard.vue";
+
 export default {
+  components: { SecretCard },
   data() {
     return {
       message: "Hello List Secret",
@@ -63,6 +55,8 @@ export default {
         "T-Z": ["T", "U", "V", "W", "X", "Y", "Z"],
       },
       currentFilter: [],
+      loadCards: false,
+      showClear: false,
     };
   },
 
@@ -81,7 +75,7 @@ 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));
@@ -92,6 +86,8 @@ export default {
         row["id"] = element["id"];
         this.secretsList.push(row);
       });
+      this.filteredSecretsList = this.secretsList;
+      this.loadCards = true;
     },
 
     parseSecret(gibberish) {
@@ -106,28 +102,39 @@ export default {
       return otp;
     },
 
-    handleClick(scope) {
-      console.log(scope);
+    editSecret(id) {
+      const editingSecret = this.secretsList.filter((element) => {
+        return element.id === id;
+      });
+      // console.log(editingSecret);
+      this.$emit("edit", editingSecret[0]);
     },
 
     filterTable(band) {
       const letters = this.filterBandsVals[band];
       this.currentFilter = letters;
-      console.log(letters);
+      this.showClear = true;
     },
 
     checkFirstLetter(row) {
       const firstLetter = row.issuer[0].toUpperCase();
-      if (this.currentFilter.indexOf(firstLetter) > 0) {
+      const index = this.currentFilter.indexOf(firstLetter);
+      if (index >= 0) {
         return true;
       }
       return false;
     },
+
+    clearFilter() {
+      this.filteredSecretsList = this.secretsList;
+      this.showClear = false;
+    },
   },
 
+  computed: {},
+
   watch: {
-    currentFilter: function (newFilter, oldFilter) {
-      // console.log("filter", newFilter, oldFilter);
+    currentFilter: function () {
       const filteredList = this.secretsList.filter(this.checkFirstLetter);
       this.filteredSecretsList = filteredList;
     },
@@ -138,3 +145,19 @@ export default {
   },
 };
 </script>
+
+<style>
+#cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 90vw;
+}
+
+.filter-buttons {
+  width: 90%;
+  display: flex;
+  margin-bottom: 20px;
+  justify-content: center;
+}
+</style>

frontend/src/components/SecretCard.vue

@@ -0,0 +1,113 @@
+<template>
+  <div class="wrapper">
+    <div class="card-top">
+      <span class="issuer">{{ issuer }}</span>
+      <button class="edit-button" @click="editSecret">
+        <img src="../assets/edit-icon.png" class="button-icon" /></button
+      ><br />
+    </div>
+
+    <span class="user">{{ username }}</span> <br />
+    <span
+      class="otp"
+      @click="copyOtp"
+      @mouseenter="otpHidden = false"
+      @mouseleave="otpHidden = true"
+    >
+      <span v-if="otpHidden">******</span>
+      <span v-else>{{ generateTotp(secret) }}</span>
+    </span>
+    <button class="edit-button" @click="copyOtp">
+      <img src="../assets/copy-icon.png" class="button-icon" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { TOTP } from "totp-generator";
+export default {
+  props: {
+    id: Number,
+    issuer: String,
+    username: String,
+    secret: String,
+  },
+  data() {
+    return {
+      otp: 123456,
+      notes: "",
+      otpHidden: true,
+    };
+  },
+
+  methods: {
+    generateTotp(secret) {
+      const { otp, expires } = TOTP.generate(secret);
+      const remaining = (expires - Date.now()) / 30000;
+      this.remainingTime = remaining / 1000;
+      this.timerWidth = remaining * 100;
+      // console.log("hello");
+      this.otp = otp;
+      return otp;
+    },
+
+    async copyOtp() {
+      await navigator.clipboard
+        .writeText(this.otp)
+        .then(() => {
+          console.log("copying successful");
+        })
+        .catch((err) => {
+          console.log("copy failed", err);
+        });
+    },
+
+    editSecret() {
+      this.$emit("edit", this.id);
+    },
+  },
+
+  mounted() {},
+};
+</script>
+
+<style>
+.wrapper {
+  height: 110px;
+  width: 160px;
+  /* border: 1px solid black; */
+  border-radius: 4px;
+  padding: 4px 12px 4px 12px;
+  box-shadow: 1px 1px 8px #ccc;
+  margin: 2px;
+}
+
+.issuer {
+  font-weight: 700;
+}
+
+.user {
+  color: gray;
+  font-size: 0.8rem;
+}
+
+.otp {
+  font-size: 2rem;
+}
+
+.card-top {
+  display: flex;
+  justify-content: space-between;
+}
+.edit-button {
+  position: relative;
+  right: 0;
+  margin-left: auto;
+  border: none;
+}
+
+.button-icon {
+  width: 16px;
+  height: 16px;
+}
+</style>

main.py

@@ -123,9 +123,7 @@ async def login(user: UserLogin):
 @app.post("/secret")
 async def create_secret(secret: Secret, current_user: dict = Depends(get_current_user)):
     """
-    Stores and encrypted secret for the user.
-
-    The encrypted secret is unreadable on the server and is encrypted on the front-end
+    Stores an encrypted secret for the user.
     """
 
     data = []
@@ -148,6 +146,40 @@ async def create_secret(secret: Secret, current_user: dict = Depends(get_current
     return secret
 
 
+@app.put("/secret")
+async def update_secret(secret: Secret, current_user: dict = Depends(get_current_user)):
+    """
+    Updates an encrypted secret for the user.
+    """
+
+    data = []
+    with open('database/secrets.json', 'r') as f:
+        text = f.read()
+        if text:
+            data.extend(json.loads(text))
+
+    if secret.id is None:
+        raise HTTPException(status.HTTP_400_BAD_REQUEST, detail="Id must be passed for updating secret")
+
+    secret.user_id = current_user['id']
+
+    found_secrets = [(i, j) for i, j in enumerate(data) if j['user_id'] == secret.user_id and j['id']==secret.id]
+    if not found_secrets:
+        raise HTTPException(status.HTTP_400_BAD_REQUEST, deatil="Secret with this Id not found for this user")
+
+    secret_pos = found_secrets[0][0]
+
+    encryption_key = current_user['encryption_key'].encode()
+    encrypted_data = fernet_encrypt(secret.data.encode(), encryption_key)
+
+    secret.data = encrypted_data.decode('utf-8')
+    data[secret_pos] = jsonable_encoder(secret)
+
+    with open('database/secrets.json', 'w') as f:
+        json.dump(data, f)
+    return secret
+
+
 @app.get('/secret')
 async def list_secret(current_user: dict = Depends(get_current_user)):
     """Returns the encrypted secrets of the user."""
@@ -161,7 +193,7 @@ async def list_secret(current_user: dict = Depends(get_current_user)):
     user_id = current_user['id']
     encryption_key = current_user['encryption_key'].encode()
 
-    user_secrets = [i for i in data if i['user_id']==user_id]
+    user_secrets = [i for i in data if i['user_id']==user_id and i['active']]
     for secret in user_secrets:
         cur_data = secret['data']
         decrypted_data = fernet_decrypt(cur_data, encryption_key)