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 @@
/>
+
{{ errorMessage }}
+
@@ -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 @@
@@ -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