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