qrcode: remove title and show errors in dedicated div (#86853)
This commit is contained in:
parent
b35b0fccd3
commit
6f2ee41df3
|
|
@ -67,11 +67,11 @@ qrcode-reader {
|
|||
align-self: end;
|
||||
justify-self: center;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
|
||||
--title-background: #{$green-light};
|
||||
--title-color: #{$green};
|
||||
--border-color: #{$green};
|
||||
|
||||
border: 2px solid var(--title-color);
|
||||
border: 2px solid var(--border-color);
|
||||
border-radius: 5px;
|
||||
margin: 10px;
|
||||
box-shadow: 0 0 10px 3px #ffffff;
|
||||
|
|
@ -82,8 +82,7 @@ qrcode-reader {
|
|||
justify-items: center;
|
||||
|
||||
&.error {
|
||||
--title-background: #{$red-light};
|
||||
--title-color: #{$red};
|
||||
--border-color: #{$red};
|
||||
}
|
||||
|
||||
&.closed {
|
||||
|
|
@ -91,15 +90,19 @@ qrcode-reader {
|
|||
}
|
||||
}
|
||||
|
||||
&--popup-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
border-top-right-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
&--popup-errors {
|
||||
display: none;
|
||||
padding: 5px;
|
||||
color: var(--title-color);
|
||||
background-color: var(--title-background);
|
||||
|
||||
background-color: $red-light;
|
||||
text-align: center;
|
||||
font-weight: 1.2rem;
|
||||
font-weight: bold;
|
||||
color: $red;
|
||||
|
||||
.error &:not(:empty) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&--popup-content {
|
||||
|
|
@ -107,7 +110,6 @@ qrcode-reader {
|
|||
}
|
||||
|
||||
&--validity {
|
||||
color: var(--title-color);
|
||||
font-weight: bold;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ const readerTemplate = template(`
|
|||
</div>
|
||||
</div>
|
||||
<div class="qrcode-reader--popup closed">
|
||||
<div class="qrcode-reader--popup-title"></div>
|
||||
<div class="qrcode-reader--popup-errors"></div>
|
||||
<div class="qrcode-reader--popup-content"></div>
|
||||
<button class="qrcode-reader--close-popup-button">${translate('close')}</button>
|
||||
</div>
|
||||
|
|
@ -151,7 +151,7 @@ function decodeBase45 (str) {
|
|||
class QRCodeReader extends window.HTMLElement {
|
||||
#popup
|
||||
#popupContent
|
||||
#popupTitle
|
||||
#errors
|
||||
#currentCertificate
|
||||
|
||||
constructor () {
|
||||
|
|
@ -166,7 +166,7 @@ class QRCodeReader extends window.HTMLElement {
|
|||
|
||||
this.#popup = this.querySelector('.qrcode-reader--popup')
|
||||
this.#popupContent = this.querySelector('.qrcode-reader--popup-content')
|
||||
this.#popupTitle = this.querySelector('.qrcode-reader--popup-title')
|
||||
this.#errors = this.querySelector('.qrcode-reader--popup-errors')
|
||||
|
||||
const closePopupButton = this.querySelector('.qrcode-reader--close-popup-button')
|
||||
closePopupButton.addEventListener('click', () => {
|
||||
|
|
@ -254,13 +254,11 @@ class QRCodeReader extends window.HTMLElement {
|
|||
const now = new Date()
|
||||
|
||||
if (validityStart && now.getTime() < validityStart.getTime()) {
|
||||
this.#popupTitle.innerText = translate('not_yet_valid')
|
||||
this.#errors.innerText = translate('not_yet_valid')
|
||||
this.#popup.classList.add('error')
|
||||
} else if (validityEnd && now.getTime() > validityEnd.getTime()) {
|
||||
this.#popupTitle.innerText = translate('expired')
|
||||
this.#errors.innerText = translate('expired')
|
||||
this.#popup.classList.add('error')
|
||||
} else {
|
||||
this.#popupTitle.innerText = translate('valid')
|
||||
}
|
||||
|
||||
const validityElement = validityTemplate.cloneNode(true)
|
||||
|
|
@ -403,8 +401,7 @@ class QRCodeReader extends window.HTMLElement {
|
|||
#showError (message) {
|
||||
this.#popup.classList.remove('closed')
|
||||
this.#popup.classList.add('error')
|
||||
this.#popupTitle.innerText = translate('invalid_title')
|
||||
this.#popupContent.innerText = message
|
||||
this.#errors.innerText = message
|
||||
}
|
||||
|
||||
#toggleFullScreen () {
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
"from": "{% trans 'From' %}",
|
||||
"invalid_content": "{% trans "This QR code isn't supported by this application." %}",
|
||||
"invalid_signature": "{% trans 'Signature verification failed.' %}",
|
||||
"invalid_title": "Invalid QR Code",
|
||||
"invalid_qrcode": "Invalid QR Code",
|
||||
"never": "Jamais",
|
||||
"not_supported": "{% trans "QR code reader isn\'t supported on your platform. Please update your browser." %}",
|
||||
"not_yet_valid": "{% trans 'QR code not yet valid' %}",
|
||||
|
|
|
|||
|
|
@ -102,11 +102,9 @@ qrcodeReaderTest('qrcode reader shows valid qrcode informations', async ({mock})
|
|||
await scan(okCodeData)
|
||||
|
||||
const popup = reader.querySelector('.qrcode-reader--popup')
|
||||
const title = popup.querySelector('.qrcode-reader--popup-title')
|
||||
|
||||
expect(popup.classList.contains('closed')).toBe(false)
|
||||
expect(popup.classList.contains('error')).toBe(false)
|
||||
expect(title.innerText).toBe('valid')
|
||||
|
||||
const validity = popup.querySelector('.qrcode-reader--validity')
|
||||
|
||||
|
|
@ -139,12 +137,12 @@ qrcodeReaderTest('qrcode reader shows error on not yet valid or expired qrcodes'
|
|||
await scan(okCodeData)
|
||||
|
||||
const popup = reader.querySelector('.qrcode-reader--popup')
|
||||
const title = popup.querySelector('.qrcode-reader--popup-title')
|
||||
const errors = popup.querySelector('.qrcode-reader--popup-errors')
|
||||
const closeButton = reader.querySelector('.qrcode-reader--close-popup-button')
|
||||
|
||||
expect(popup.classList.contains('closed')).toBe(false)
|
||||
expect(popup.classList.contains('error')).toBe(true)
|
||||
expect(title.innerText).toBe('not_yet_valid')
|
||||
expect(errors.innerText).toBe('not_yet_valid')
|
||||
|
||||
closeButton.dispatchEvent(new Event('click'))
|
||||
|
||||
|
|
@ -153,7 +151,7 @@ qrcodeReaderTest('qrcode reader shows error on not yet valid or expired qrcodes'
|
|||
|
||||
expect(popup.classList.contains('closed')).toBe(false)
|
||||
expect(popup.classList.contains('error')).toBe(true)
|
||||
expect(title.innerText).toBe('expired')
|
||||
expect(errors.innerText).toBe('expired')
|
||||
})
|
||||
|
||||
qrcodeReaderTest('qrcode reader shows error on invalid qrcode', async ({mock}) => {
|
||||
|
|
@ -162,13 +160,11 @@ qrcodeReaderTest('qrcode reader shows error on invalid qrcode', async ({mock}) =
|
|||
await scan(invalidCodeData)
|
||||
|
||||
const popup = reader.querySelector('.qrcode-reader--popup')
|
||||
const title = reader.querySelector('.qrcode-reader--popup-title')
|
||||
const content = reader.querySelector('.qrcode-reader--popup-content')
|
||||
const errors = reader.querySelector('.qrcode-reader--popup-errors')
|
||||
|
||||
expect(popup.classList.contains('closed')).toBe(false)
|
||||
expect(popup.classList.contains('error')).toBe(true)
|
||||
expect(title.innerText).toBe('invalid_title')
|
||||
expect(content.innerText).toBe('invalid_qrcode')
|
||||
expect(errors.innerText).toBe('invalid_qrcode')
|
||||
|
||||
const closeButton = reader.querySelector('.qrcode-reader--close-popup-button')
|
||||
closeButton.dispatchEvent(new Event('click'))
|
||||
|
|
@ -182,13 +178,11 @@ qrcodeReaderTest('qrcode reader shows error on invalid signature', async ({mock}
|
|||
await scan(invalidSignatureData)
|
||||
|
||||
const popup = reader.querySelector('.qrcode-reader--popup')
|
||||
const title = reader.querySelector('.qrcode-reader--popup-title')
|
||||
const content = reader.querySelector('.qrcode-reader--popup-content')
|
||||
const errors = reader.querySelector('.qrcode-reader--popup-errors')
|
||||
|
||||
expect(popup.classList.contains('closed')).toBe(false)
|
||||
expect(popup.classList.contains('error')).toBe(true)
|
||||
expect(title.innerText).toBe('invalid_title')
|
||||
expect(content.innerText).toBe('invalid_signature')
|
||||
expect(errors.innerText).toBe('invalid_signature')
|
||||
|
||||
const closeButton = reader.querySelector('.qrcode-reader--close-popup-button')
|
||||
closeButton.dispatchEvent(new Event('click'))
|
||||
|
|
@ -233,12 +227,10 @@ qrcodeReaderTest('qrcode reader accepts certificate without validity dates', asy
|
|||
await scan(certificateWithoutValidity)
|
||||
|
||||
const popup = reader.querySelector('.qrcode-reader--popup')
|
||||
const title = popup.querySelector('.qrcode-reader--popup-title')
|
||||
const validity = popup.querySelector('.qrcode-reader--validity')
|
||||
|
||||
expect(popup.classList.contains('closed')).toBe(false)
|
||||
expect(popup.classList.contains('error')).toBe(false)
|
||||
expect(title.innerText).toBe('valid')
|
||||
expect(validity.innerText.trim().split(/\s+/)).toStrictEqual(["from", ":", "always", "to", ":", "never"])
|
||||
})
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue