error message added in case of wrong pin

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",

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 {

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;
     },
   },

src/styles/pin-input.scss

@@ -62,4 +62,8 @@
   align-items: center;
   width: 100%;
   justify-content: flex-end;
+}
+
+.pin-error {
+  color: var(--error, #d9534f);
 }