tap to reveal and wait functionality

some layout improvements

frontend/src/App.vue

@@ -6,27 +6,28 @@ import ListSecrets from "./components/ListSecrets.vue";
 
 <template>
   <div>
-    <div id="header">
+    <div id="header" class="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>
+        <button class="header-button" title="Refresh secrets" @click="refresh">
+          <img src="./assets/refresh-icon.png" class="button-icon" />
+        </button>
+        <button class="header-button" title="logout" @click="logout">
+          <img src="./assets/logout-icon.png" class="button-icon" />
+        </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" />
+      <CreateSecret @close="secretSaved" />
     </el-dialog>
 
     <el-dialog v-model="editDialog" title="Edit TOTP secret" width="80vw">
-      <CreateSecret :editSecret="editingSecret" @close="editDialog = false" />
+      <CreateSecret :editSecret="editingSecret" @close="secretSaved" />
     </el-dialog>
 
     <div class="container">
+      <div class="timer" v-if="loggedin" :style="{ width: timerWidth + '%' }"></div>
       <HomePage
         msg="You did it!"
         @loggedin="
@@ -41,6 +42,7 @@ import ListSecrets from "./components/ListSecrets.vue";
       </el-button> -->
       <ListSecrets :key="listUpdated" v-if="showSecrets && loggedin" @edit="editSecret" />
     </div>
+    <button class="create-floating" @click="creationDialog = true">+</button>
   </div>
 </template>
 
@@ -55,7 +57,7 @@ export default {
       apiBaseUrl: "http://localhost:8000",
       editDialog: false,
       editingSecret: {},
-      timerWidth: 100,
+      timerWidth: 0,
     };
   },
   methods: {
@@ -66,9 +68,8 @@ export default {
 
     secretSaved() {
       this.creationDialog = false;
-      console.log("before update", this.listUpdated);
+      this.editDialog = false;
       this.listUpdated += 1;
-      console.log("after update", this.listUpdated);
     },
 
     async validateToken() {
@@ -112,15 +113,12 @@ export default {
     },
 
     startTimer() {
+      // console.log("start timer called");
       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);
     },
   },
@@ -139,19 +137,9 @@ export default {
 };
 </script>
 
-<style>
-.header {
-  position: absolute;
-  width: 100vw;
-  height: 3rem;
-  padding: 0.3rem;
-  left: 0;
-  top: 0;
-  background-color: aquamarine;
-}
-
+<style scoped>
 .container {
-  margin-top: 0;
+  margin-top: 6vh;
 }
 
 .logoutBtn {
@@ -163,10 +151,10 @@ export default {
   display: none !important;
 }
 
-#header {
+.header {
   width: 100vw;
-  height: 3rem;
-  position: absolute;
+  height: 48px;
+  position: fixed;
   left: 0;
   top: 0;
   background-color: rgb(170, 247, 247);
@@ -175,15 +163,45 @@ export default {
   padding: 0 12px 0 12px;
   justify-content: space-between;
   box-shadow: 2px 0px 8px #aaa;
+  z-index: 999;
 }
 .logo {
   font-size: 1.3rem;
   font-weight: 700;
+  margin-left: 2vw;
 }
 
 .timer {
-  margin-top: 1.2rem;
+  position: fixed;
+  bottom: 4px;
   height: 0.3rem;
   background-color: green;
 }
+
+.create-floating {
+  position: fixed;
+  bottom: 4vh;
+  right: 4vw;
+  height: 40px;
+  width: 40px;
+  border: none;
+  border-radius: 20px;
+  box-shadow: 4px 4px 6px #999;
+  background-color: teal;
+  color: white;
+  font-size: 1.6rem;
+  cursor: pointer;
+}
+
+.button-icon {
+  width: 24px;
+  margin-top: 8px;
+  height: 24px;
+  opacity: 0.6;
+}
+
+.header-button {
+  border: none;
+  background: none;
+}
 </style>

frontend/src/assets/base.css

@@ -65,7 +65,7 @@ body {
   transition:
     color 0.5s,
     background-color 0.5s; */
-  line-height: 1.6;
+  line-height: 1.2;
   font-family:
     /* Inter,
     -apple-system,

frontend/src/assets/main.css

@@ -1,10 +1,11 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px; */
   margin: 0 auto;
-  padding: 2rem;
+  padding: 1rem;
   font-weight: normal;
+  overflow-x: hidden;
 }
 
 a,
@@ -24,12 +25,13 @@ a,
 @media (min-width: 1024px) {
   body {
     display: flex;
-    place-items: center;
+    /* place-items: center; */
+    margin-top: 2rem;
   }
 
   #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
+    /* display: grid; */
+    /* grid-template-columns: 1fr 1fr; */
     padding: 0 2rem;
   }
-}
+}

frontend/src/components/ListSecrets.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div>
-      <br />
       <div class="filter-buttons">
         <el-button-group>
           <el-button
@@ -16,6 +15,30 @@
             >Clear</el-button
           >
         </el-button-group>
+        <div>
+          <el-form-item label="Show OTPs">
+            <el-switch v-model="showSecrets" active-value="yes" inactive-value="no" />
+          </el-form-item>
+        </div>
+        <div class="sort-options">
+          <span>
+            <el-form-item label="Sort">
+              <el-select
+                v-model="currentSort"
+                placeholder="Select"
+                style="width: 80px"
+                @change="sortItems"
+              >
+                <el-option
+                  v-for="item in sortOptions"
+                  :key="item.key"
+                  :label="item.name"
+                  :value="item.key"
+                />
+              </el-select>
+            </el-form-item>
+          </span>
+        </div>
       </div>
     </div>
 
@@ -26,6 +49,8 @@
           :username="secret.username"
           :secret="secret.secret"
           :id="secret.id"
+          :showOtp="showSecrets"
+          :key="showSecrets"
           @edit="editSecret"
         />
       </span>
@@ -57,6 +82,18 @@ export default {
       currentFilter: [],
       loadCards: false,
       showClear: false,
+      showSecrets: "yes",
+      currentSort: "asc",
+      sortOptions: [
+        {
+          name: "A-Z",
+          key: "asc",
+        },
+        {
+          name: "Z-A",
+          key: "desc",
+        },
+      ],
     };
   },
 
@@ -87,6 +124,7 @@ export default {
         this.secretsList.push(row);
       });
       this.filteredSecretsList = this.secretsList;
+      this.sortItems();
       this.loadCards = true;
     },
 
@@ -129,6 +167,14 @@ export default {
       this.filteredSecretsList = this.secretsList;
       this.showClear = false;
     },
+
+    sortItems() {
+      if (this.currentSort === "asc") {
+        this.filteredSecretsList.sort((a, b) => a.issuer.localeCompare(b.issuer));
+      } else if (this.currentSort === "desc") {
+        this.filteredSecretsList.sort((a, b) => b.issuer.localeCompare(a.issuer));
+      }
+    },
   },
 
   computed: {},
@@ -137,11 +183,28 @@ export default {
     currentFilter: function () {
       const filteredList = this.secretsList.filter(this.checkFirstLetter);
       this.filteredSecretsList = filteredList;
+      this.sortItems();
+    },
+
+    currentSort: function () {
+      localStorage.setItem("currentSort", this.currentSort);
+    },
+
+    showSecrets: function () {
+      localStorage.setItem("showSecrets", this.showSecrets);
+    },
+
+    secretsList: function () {
+      this.currentSort = localStorage.getItem("currentSort");
+      this.filteredSecretsList = this.secretsList;
+      this.sortItems();
     },
   },
 
   mounted() {
     this.listSecrets();
+    this.showSecrets = localStorage.getItem("showSecrets");
+    this.currentSort = localStorage.getItem("currentSort");
   },
 };
 </script>
@@ -151,13 +214,21 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  max-width: 90vw;
+  justify-content: space-evenly;
+  max-width: 96vw;
 }
 
 .filter-buttons {
-  width: 90%;
+  width: 96vw;
   display: flex;
-  margin-bottom: 20px;
-  justify-content: center;
+  margin: 40px 0 20px 0;
+  justify-content: space-around;
+  flex-wrap: wrap;
+}
+
+.sort-options {
+  display: flex;
+  justify-content: space-between;
+  min-width: 80px;
 }
 </style>

frontend/src/components/SecretCard.vue

@@ -1,25 +1,28 @@
 <template>
-  <div class="wrapper">
+  <div
+    class="wrapper"
+    @mouseenter="[(otpShown = true), (iconOpacity = 1)]"
+    @mouseleave="
+      [(otpShown = showOtp === 'yes' ? true : tapped ? true : false), (iconOpacity = 0.1)]
+    "
+  >
     <div class="card-top">
       <span class="issuer">{{ issuer }}</span>
-      <button class="edit-button" @click="editSecret">
+      <button class="card-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 class="otp-container">
+      <span class="otp" @click="[tapReveal($event), copyOtp($event)]">
+        <span v-if="otpShown">{{ this.otp }}</span>
+        <span v-else> &#8226;&#8226;&#8226;&#8226;&#8226;&#8226; </span>
+      </span>
+      <button class="card-button" @click="copyOtp">
+        <img src="../assets/copy-icon.png" class="button-icon" />
+      </button>
+    </div>
   </div>
 </template>
 
@@ -31,24 +34,29 @@ export default {
     issuer: String,
     username: String,
     secret: String,
+    showOtp: {
+      type: String,
+      default: "no",
+    },
   },
   data() {
     return {
       otp: 123456,
       notes: "",
-      otpHidden: true,
+      otpShown: false,
+      iconOpacity: 0.1,
+      tapped: false,
+      revealTime: 10,
     };
   },
 
   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");
+    generateTotp() {
+      const { otp, expires } = TOTP.generate(this.secret);
+      const now = new Date();
+      const remainingTime = expires - now;
       this.otp = otp;
-      return otp;
+      setTimeout(this.generateTotp, remainingTime);
     },
 
     async copyOtp() {
@@ -62,18 +70,33 @@ export default {
         });
     },
 
+    async tapReveal() {
+      console.log("tapped");
+      this.otpShown = true;
+      this.tapped = true;
+      setTimeout(() => {
+        this.otpShown = this.showOtp === "yes" ? true : false;
+        this.tapped = false;
+      }, this.revealTime * 1000);
+    },
+
     editSecret() {
       this.$emit("edit", this.id);
     },
   },
 
-  mounted() {},
+  mounted() {
+    this.otpShown = this.showOtp === "yes" ? true : false;
+    this.generateTotp();
+  },
+
+  created() {},
 };
 </script>
 
 <style>
 .wrapper {
-  height: 110px;
+  height: 90px;
   width: 160px;
   /* border: 1px solid black; */
   border-radius: 4px;
@@ -92,22 +115,30 @@ export default {
 }
 
 .otp {
-  font-size: 2rem;
+  margin-top: 0.4rem;
+  font-size: 1.8rem;
 }
 
 .card-top {
   display: flex;
   justify-content: space-between;
 }
-.edit-button {
+.card-button {
   position: relative;
   right: 0;
   margin-left: auto;
   border: none;
+  background: none;
 }
 
 .button-icon {
   width: 16px;
   height: 16px;
+  opacity: v-bind("iconOpacity");
+}
+
+.otp-container {
+  display: flex;
+  justify-content: space-between;
 }
 </style>

main.py

@@ -131,7 +131,11 @@ 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
+
+    if data:
+        secret_id = max(i['id'] for i in data) + 1
+    else:
+        secret_id = 0
     secret.id = secret_id
     secret.user_id = current_user['id']
     encryption_key = current_user['encryption_key'].encode()

requirements.txt

@@ -36,6 +36,6 @@ typer==0.12.3
 typing_extensions==4.12.2
 ujson==5.10.0
 uvicorn==0.30.1
-uvloop==0.19.0
+# uvloop==0.19.0
 watchfiles==0.22.0
 websockets==12.0