diff --git a/src/index.js b/src/index.js index 692bd72..eb262a3 100644 --- a/src/index.js +++ b/src/index.js @@ -38,7 +38,7 @@ app.get('/api/qrcode', async (req, res) => { check('payment_purpose', /^.{1,42}$/i) check('iban', /^[A-Z]{2}\d{17}$/) check('reference', /^[A-Z]{2}[0-9\-]{1,24}$/) - check('issuer_name', /^[a-zA-Z0-9ČŠŽĐ'](?:[A-Z0-9 ČŠŽĐ']{0,31}[A-Z0-9ČŠŽĐ'])?$/i) + check('issuer_name', /^[a-zA-Z0-9ČŠŽĐ.'](?:[A-Z0-9 ČŠŽĐ.']{0,31}[A-Z0-9ČŠŽĐ.'])?$/i) check('issuer_address', /^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i) check('issuer_city', /^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i) diff --git a/src/views/form.ejs b/src/views/form.ejs index 6062dae..7c3676c 100644 --- a/src/views/form.ejs +++ b/src/views/form.ejs @@ -39,8 +39,7 @@ div { grid-template-rows: auto auto; grid-template-columns: auto; row-gap: 1rem; -} -.code { + background-size: contain; background-position: top center; background-repeat: no-repeat; @@ -142,4 +141,4 @@ for (el of document.getElementsByTagName("input")) { updateQR() - \ No newline at end of file + diff --git a/src/views/index.ejs b/src/views/index.ejs index 76306a6..8fb3987 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -25,8 +25,23 @@ section div { row-gap: .5rem; column-gap: .5rem; } -.maker > div:nth-last-child(1) { grid-column-end: -1; } -.maker > div:nth-last-child(2) { grid-column-end: -2; } +.maker button, +.maker input[type="submit"] { + margin-bottom: auto; +} +.code { + display: grid; + grid-template-rows: auto auto; + grid-template-columns: auto; + row-gap: 1rem; + + background-size: contain; + background-position: top center; + background-repeat: no-repeat; + background-image: url("/public/invalid-content.png"); + min-height: 210px; + min-width: 210px; +}
@@ -93,6 +108,7 @@ section div { +
@@ -146,6 +162,36 @@ function copyUrl () { }, 750) } } + + +const qrcode = document.getElementById("qrcode") +function val (name) { return document.getElementsByName(name)?.[0]?.value || "" } +let debounce = null +function updateQRdeb () { + clearTimeout(debounce) + debounce = setTimeout(() => { + clearTimeout(debounce) + updateQR() + }, 500); +} +function updateQR (e) { + try { + const preloadImg = new Image(); + const newurl = getNewUrl() + preloadImg.addEventListener("load", () => qrcode.style.setProperty('background-image', `url("${newurl}"), url("/public/invalid-content.png")`)) + preloadImg.addEventListener("error", () => qrcode.style.setProperty('background-image', `url("/public/invalid-content.png")`)) + preloadImg.src=newurl; + } catch (error) { + setImgUrl(`url("/public/invalid-content.png")`) + } +} + +// Add input listener to all inputs +for (el of document.getElementsByTagName("input")) { + el.addEventListener("input", updateQRdeb) +} + +updateQR()

🔗 API

@@ -256,9 +302,9 @@ function copyUrl () {
🔗 issuer_name
- Regex: ^[a-zA-Z0-9ČŠŽĐ'](?:[A-Z0-9 ČŠŽĐ']{0,31}[A-Z0-9ČŠŽĐ'])?$/i + Regex: ^[a-zA-Z0-9ČŠŽĐ.'](?:[A-Z0-9 ČŠŽĐ.']{0,31}[A-Z0-9ČŠŽĐ.'])?$/i
- Demo: regex101.com/r/JW7Ywq/1 + Demo: regex101.com/r/ubDgZL/1
Description: Name and surname of the issuer or company name. Max length 33 characters including spaces and numbers.