From 21b09952cbefa54539d672dfa22a1fdc61422596 Mon Sep 17 00:00:00 2001
From: shumit taher <shumitt@gmail.com>
Date: Mon, 29 Sep 2025 11:18:27 +0000
Subject: [PATCH] error message added in case of wrong pin

---
 src/assets/locales/en.json                    | 3 ++-
 src/components/InteractiveEditor/PinInput.vue | 3 +++
 src/components/LinkItems/Section.vue          | 8 +++++---
 src/styles/pin-input.scss                     | 4 ++++
 4 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 76afe57c..d042c799 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -255,7 +255,8 @@
     "unlock": "Unlock",
     "lock": "Lock",
     "lockedSection": "Locked section",
-    "enter-pin": "Enter PIN"
+    "enter-pin": "Enter PIN",
+    "incorrect-pin": "Incorrect PIN"
   },
   "footer": {
     "dev-by": "Developed by",
diff --git a/src/components/InteractiveEditor/PinInput.vue b/src/components/InteractiveEditor/PinInput.vue
index 1db2bb21..5834f054 100644
--- a/src/components/InteractiveEditor/PinInput.vue
+++ b/src/components/InteractiveEditor/PinInput.vue
@@ -13,11 +13,13 @@
     />
 
     <div class="pin-actions">
+      <div v-if="errorMessage" class="pin-error">{{ errorMessage }}</div>
       <button class="pin-btn" @click="submit" :aria-label="$t('pin.unlock')">
         <i class="fas fa-unlock-alt btn-icon" aria-hidden="true"></i>
         {{ $t('pin.unlock') }}
       </button>
     </div>
+
   </div>
 </template>
 
@@ -29,6 +31,7 @@ export default {
   components: { FormSchema },
   props: {
     id: String,
+    errorMessage: String,
   },
   data() {
     return {
diff --git a/src/components/LinkItems/Section.vue b/src/components/LinkItems/Section.vue
index d4951da8..b13a44f8 100644
--- a/src/components/LinkItems/Section.vue
+++ b/src/components/LinkItems/Section.vue
@@ -17,6 +17,7 @@
     <PinInput
       v-if="showPinRequired"
       :id = "sectionRef"
+      :errorMessage="pinError"
       @unlock_attempt="saveUnlockPins"
     />
     <div v-if="!showPinRequired">
@@ -168,6 +169,7 @@ export default {
       sectionWidth: 0,
       resizeObserver: null,
       isUnlocked: true,
+      pinError: '',
     };
   },
   computed: {
@@ -378,14 +380,13 @@ export default {
       const map = JSON.parse(sessionStorage.getItem(SECRET_UNLOCKED_KEY) || '{}');
       map[id] = pin;
       sessionStorage.setItem(SECRET_UNLOCKED_KEY, JSON.stringify(map));
-      this.updateUnlocked();
-    },
-    updateUnlocked() {
       const unlockPins = JSON.parse(sessionStorage.getItem(SECRET_UNLOCKED_KEY) || '{}');
       const sectionKey = this.sectionRef;
       if (unlockPins[sectionKey] === this.pin) {
+        this.pinError = '';
         this.isUnlocked = true;
       } else {
+        this.pinError = this.$t('pin.incorrect-pin');
         this.isUnlocked = false;
       }
     },
@@ -396,6 +397,7 @@ export default {
         delete unlockPins[sectionKey];
         sessionStorage.setItem(SECRET_UNLOCKED_KEY, JSON.stringify(unlockPins));
       }
+      this.pinError = '';
       this.isUnlocked = false;
     },
   },
diff --git a/src/styles/pin-input.scss b/src/styles/pin-input.scss
index be3a697a..00bf3a5c 100644
--- a/src/styles/pin-input.scss
+++ b/src/styles/pin-input.scss
@@ -62,4 +62,8 @@
   align-items: center;
   width: 100%;
   justify-content: flex-end;
+}
+
+.pin-error {
+  color: var(--error, #d9534f);
 }
\ No newline at end of file