added strings thru localzation file. moved to session storage to store pin

src/assets/locales/en.json

@@ -251,6 +251,12 @@
       "remove-section": "Remove"
     }
   },
+  "pin": {
+    "unlock": "Unlock",
+    "lock": "Lock",
+    "lockedSection": "Locked section",
+    "enter-pin": "Enter PIN"
+  },
   "footer": {
     "dev-by": "Developed by",
     "licensed-under": "Licensed under",

src/components/InteractiveEditor/PinInput.vue

@@ -2,7 +2,7 @@
   <div class="pin-gate">
     <div class="pin-head">
       <i class="far fa-lock" aria-hidden="true"></i>
-      <span>Locked section</span>
+      <span>{{ $t('pin.lockedSection') }}</span>
     </div>
 
     <FormSchema
@@ -13,12 +13,10 @@
     />
 
     <div class="pin-actions">
-      <button class="pin-btn" @click="submit">
+      <button class="pin-btn" @click="submit" :aria-label="$t('pin.unlock')">
         <i class="fas fa-unlock-alt btn-icon" aria-hidden="true"></i>
-        Unlock</button>
+        {{ $t('pin.unlock') }}
-      <button class="pin-reset" @click="lockAgain" type="button">
+      </button>
-        <i class="fas fa-lock btn-icon" aria-hidden="true"></i>
-        Lock</button>
     </div>
   </div>
 </template>
@@ -39,7 +37,7 @@ export default {
         type: 'object',
         properties: {
           pin: {
-            title: 'Enter PIN',
+            title: this.$t('pin.enter-pin'),
             type: 'string',
             attrs: {
               type: 'password',

src/components/LinkItems/Section.vue

@@ -20,6 +20,10 @@
       @unlock_attempt="saveUnlockPins"
     />
     <div v-if="!showPinRequired">
+      <button v-if="unLockedWithPin" class="pin-reset" @click="lockAgain" type="button">
+        <i class="fas fa-lock btn-icon" aria-hidden="true"></i>
+        {{ $t('pin.lock') }}
+      </button>
       <!-- If no items, show message -->
       <div v-if="isEmpty" class="no-items">
         {{ $t('home.no-items-section') }}
@@ -242,6 +246,10 @@ export default {
       if (this.isEditMode) return false;
       return this.displayData.secret === true && !this.isUnlocked;
     },
+    unLockedWithPin() {
+      if (this.isEditMode) return false;
+      return this.displayData.secret === true && this.isUnlocked;
+    },
   },
   watch: {
     searchTerm: {
@@ -365,13 +373,13 @@ export default {
       if (secElem && secElem.$el.clientWidth) this.sectionWidth = secElem.$el.clientWidth;
     },
     saveUnlockPins({ pin, id }) {
-      const map = JSON.parse(localStorage.getItem(SECRET_UNLOCKED_KEY) || '{}');
+      const map = JSON.parse(sessionStorage.getItem(SECRET_UNLOCKED_KEY) || '{}');
       map[id] = pin;
-      localStorage.setItem(SECRET_UNLOCKED_KEY, JSON.stringify(map));
+      sessionStorage.setItem(SECRET_UNLOCKED_KEY, JSON.stringify(map));
       this.updateUnlocked();
     },
     updateUnlocked() {
-      const unlockPins = JSON.parse(localStorage.getItem(SECRET_UNLOCKED_KEY) || '{}');
+      const unlockPins = JSON.parse(sessionStorage.getItem(SECRET_UNLOCKED_KEY) || '{}');
       const sectionKey = this.sectionRef;
       if (unlockPins[sectionKey] === this.pin) {
         this.isUnlocked = true;
@@ -379,6 +387,15 @@ export default {
         this.isUnlocked = false;
       }
     },
+    lockAgain() {
+      const unlockPins = JSON.parse(sessionStorage.getItem(SECRET_UNLOCKED_KEY) || '{}');
+      const sectionKey = this.sectionRef;
+      if (unlockPins[sectionKey]) {
+        delete unlockPins[sectionKey];
+        sessionStorage.setItem(SECRET_UNLOCKED_KEY, JSON.stringify(unlockPins));
+      }
+      this.isUnlocked = false;
+    },
   },
   mounted() {
     // Set the section width, and recalculate when section resized
@@ -395,10 +412,10 @@ export default {
       const secretPin = String(this.pin || '0000');
       const sectionKey = this.sectionRef;
 
-      const pins = JSON.parse(localStorage.getItem(SECRET_PINS_KEY) || '{}');
+      const pins = JSON.parse(sessionStorage.getItem(SECRET_PINS_KEY) || '{}');
       if (pins[sectionKey] !== secretPin) {
         pins[sectionKey] = secretPin;
-        localStorage.setItem(SECRET_PINS_KEY, JSON.stringify(pins));
+        sessionStorage.setItem(SECRET_PINS_KEY, JSON.stringify(pins));
       }
     }
   },

user-data/conf.yml

@@ -60,3 +60,19 @@ sections:
     icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
     url: https://live.dashy.to/
     target: newtab
+- name: Stuff 2
+  icon: fas fa-rocket
+  pin: "1114"
+  displayData:
+    secret: true
+  items:
+  - title: hidden tile 1
+    description: Development a project management links for Dashy
+    icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
+    url: https://live.dashy.to/
+    target: newtab
+  - title: hidden tile 2
+    description: Development a project management links for Dashy
+    icon: https://i.ibb.co/qWWpD0v/astro-dab-128.png
+    url: https://live.dashy.to/
+    target: newtab