rob/upn-qr
1
0
Fork 0
mirror of https://gitplac.si/aljaxus/upn-qr.git synced 2025-12-16 19:50:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'aljaxus-master-patch-64624' into 'master'

Browse Source 
Handle dot in issuer_name, show QR code in form maker

See merge request aljaxus/upn-qr!3
This commit is contained in:
Aljaž Starc
2022-08-18 11:52:19 +00:00
parent 552266bca6 cb95d6bb6f
commit 27e8137b9c
3 changed files with 53 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.js
View File

@@ -38,7 +38,7 @@ app.get('/api/qrcode', async (req, res) => {
check('payment_purpose', /^.{1,42}$/i) check('payment_purpose', /^.{1,42}$/i)
check('iban', /^[A-Z]{2}\d{17}$/) check('iban', /^[A-Z]{2}\d{17}$/)
check('reference', /^[A-Z]{2}[0-9\-]{1,24}$/) 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_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) check('issuer_city', /^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i)

5
src/views/form.ejs
View File

@@ -39,8 +39,7 @@ div {
grid-template-rows: auto auto; grid-template-rows: auto auto;
grid-template-columns: auto; grid-template-columns: auto;
row-gap: 1rem; row-gap: 1rem;
}
.code {
background-size: contain; background-size: contain;
background-position: top center; background-position: top center;
background-repeat: no-repeat; background-repeat: no-repeat;
@@ -142,4 +141,4 @@ for (el of document.getElementsByTagName("input")) {
updateQR() updateQR()
</script> </script>
</html> </html>

54
src/views/index.ejs
View File

@@ -25,8 +25,23 @@ section div {
row-gap: .5rem; row-gap: .5rem;
column-gap: .5rem; column-gap: .5rem;
} }
.maker > div:nth-last-child(1) { grid-column-end: -1; } .maker button,
.maker > div:nth-last-child(2) { grid-column-end: -2; } .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;
}
</style> </style>
<body> <body>
<section> <section>
@@ -93,6 +108,7 @@ section div {
<label for="issuer-city">Issuer city</label> <label for="issuer-city">Issuer city</label>
<input type="text" placeholder="1000 Ljubljana" name="issuer-city"> <input type="text" placeholder="1000 Ljubljana" name="issuer-city">
</div> </div>
<div class="code" id="qrcode"></div>
<div> <div>
<button id="copyurl" type="button">Copy image URL</button> <button id="copyurl" type="button">Copy image URL</button>
</div> </div>
@@ -146,6 +162,36 @@ function copyUrl () {
}, 750) }, 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()
</script> </script>
<section> <section>
<h1 id="api"><a href="#api">&#128279;</a> API</h1> <h1 id="api"><a href="#api">&#128279;</a> API</h1>
@@ -256,9 +302,9 @@ function copyUrl () {
<h5 id="api-qrcode-issuer_name"><a href="#api-qrcode-issuer_name">&#128279;</a> <code>issuer_name</code></h5> <h5 id="api-qrcode-issuer_name"><a href="#api-qrcode-issuer_name">&#128279;</a> <code>issuer_name</code></h5>
<div> <div>
<span>Regex: <code>^[a-zA-Z0-9ČŠŽĐ'](?:[A-Z0-9 ČŠŽĐ']{0,31}[A-Z0-9ČŠŽĐ'])?$/i</code></span> <span>Regex: <code>^[a-zA-Z0-9ČŠŽĐ.'](?:[A-Z0-9 ČŠŽĐ.']{0,31}[A-Z0-9ČŠŽĐ.'])?$/i</code></span>
<br> <br>
<span>Demo: <a href="https://regex101.com/r/JW7Ywq/1">regex101.com/r/JW7Ywq/1</a></span> <span>Demo: <a href="https://regex101.com/r/ubDgZL/1">regex101.com/r/ubDgZL/1</a></span>
<br> <br>
<span>Description: Name and surname of the issuer or company name. Max length 33 characters including spaces and numbers.</span> <span>Description: Name and surname of the issuer or company name. Max length 33 characters including spaces and numbers.</span>
<br> <br>