Added sorting options and show secret toggle

frontend/src/components/ListSecrets.vue

@@ -16,6 +16,31 @@
             >Clear</el-button
           >
         </el-button-group>
+        <div>
+          <el-form-item label="Show Secrets" style="float: right">
+            <el-switch v-model="showSecrets" />
+          </el-form-item>
+        </div>
+        <div class="sort-options">
+          <span>
+            <el-form-item label="Sort">
+              <el-select
+                v-model="currentSort"
+                filterable
+                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 +51,8 @@
           :username="secret.username"
           :secret="secret.secret"
           :id="secret.id"
+          :hideOtps="showSecrets"
+          :key="showSecrets"
           @edit="editSecret"
         />
       </span>
@@ -57,6 +84,22 @@ export default {
       currentFilter: [],
       loadCards: false,
       showClear: false,
+      showSecrets: false,
+      currentSort: "none",
+      sortOptions: [
+        {
+          name: "None",
+          key: "none",
+        },
+        {
+          name: "A-Z",
+          key: "asc",
+        },
+        {
+          name: "Z-A",
+          key: "desc",
+        },
+      ],
     };
   },
 
@@ -129,6 +172,15 @@ export default {
       this.filteredSecretsList = this.secretsList;
       this.showClear = false;
     },
+
+    sortItems() {
+      console.log(this.currentSort);
+      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: {},
@@ -158,6 +210,25 @@ export default {
   width: 90%;
   display: flex;
   margin-bottom: 20px;
-  justify-content: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
+
+.sort-options {
+  display: flex;
+  justify-content: space-between;
+  min-width: 80px;
+}
+/*
+#sort {
+  border: none;
+  border-bottom: 1px solid green;
+  margin: 0 4px 0 4px;
+  font-size: 1rem;
+  text-align: center;
+}
+
+#sort:focus {
+  outline: none;
+} */
 </style>

frontend/src/components/SecretCard.vue

@@ -8,18 +8,20 @@
     </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="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>
   </div>
 </template>
 
@@ -31,6 +33,7 @@ export default {
     issuer: String,
     username: String,
     secret: String,
+    hideOtps: Boolean,
   },
   data() {
     return {
@@ -67,7 +70,13 @@ export default {
     },
   },
 
-  mounted() {},
+  mounted() {
+    if (this.hideOtps) {
+      this.otpHidden = !this.hideOtps;
+    }
+  },
+
+  created() {},
 };
 </script>
 
@@ -104,10 +113,16 @@ export default {
   right: 0;
   margin-left: auto;
   border: none;
+  background: none;
 }
 
 .button-icon {
   width: 16px;
   height: 16px;
 }
+
+.otp-container {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

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