show secret checkbox and using local storage (WIP)

frontend/src/components/ListSecrets.vue

@@ -1,7 +1,6 @@
 <template>
   <div>
     <div>
-      <br />
       <div class="filter-buttons">
         <el-button-group>
           <el-button
@@ -17,16 +16,19 @@
           >
         </el-button-group>
         <div>
-          <el-form-item label="Show Secrets" style="float: right">
-            <el-switch v-model="showSecrets" />
-          </el-form-item>
+          <el-checkbox
+            v-model="showSecrets"
+            true-value="yes"
+            false-value="no"
+            label="Show OTPs"
+            size="large"
+          />
         </div>
         <div class="sort-options">
           <span>
             <el-form-item label="Sort">
               <el-select
                 v-model="currentSort"
-                filterable
                 placeholder="Select"
                 style="width: 80px"
                 @change="sortItems"
@@ -51,8 +53,7 @@
           :username="secret.username"
           :secret="secret.secret"
           :id="secret.id"
-          :hideOtps="showSecrets"
-          :key="showSecrets"
+          :showOtp="showSecrets"
           @edit="editSecret"
         />
       </span>
@@ -84,7 +85,7 @@ export default {
       currentFilter: [],
       loadCards: false,
       showClear: false,
-      showSecrets: false,
+      showSecrets: "yes",
       currentSort: "none",
       sortOptions: [
         {
@@ -174,7 +175,6 @@ export default {
     },
 
     sortItems() {
-      console.log(this.currentSort);
       if (this.currentSort === "asc") {
         this.filteredSecretsList.sort((a, b) => a.issuer.localeCompare(b.issuer));
       } else if (this.currentSort === "desc") {
@@ -190,10 +190,26 @@ export default {
       const filteredList = this.secretsList.filter(this.checkFirstLetter);
       this.filteredSecretsList = filteredList;
     },
+
+    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>
@@ -209,7 +225,7 @@ export default {
 .filter-buttons {
   width: 90%;
   display: flex;
-  margin-bottom: 20px;
+  margin: 20px 0 20px 0;
   justify-content: space-between;
   flex-wrap: wrap;
 }