diff --git a/src/index.js b/src/index.js index 17bfbb5..5c0f269 100644 --- a/src/index.js +++ b/src/index.js @@ -13,7 +13,7 @@ app.set('views', path.join(__dirname, 'views')) app.set('view engine', 'ejs') app.get('/', (req, res) => res.render('index')) -app.get('/form', (req, res) => res.render('form', { query: req.query })) +app.get('/form', (req, res) => res.render('form', { q: req.query })) app.get('/api/qrcode', async (req, res) => { const errors = [] @@ -32,7 +32,7 @@ app.get('/api/qrcode', async (req, res) => { check('client_address', /^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i) check('client_city', /^[a-zA-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,31}[A-Z0-9ČŠŽĐ])?$/i) check('amount', /^(?=.{11}$)[0]{1,11}[0-9]{0,11}$/) - check('payment_purpose', /^[A-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,40}[A-Z0-9ČŠŽĐ])?$/i) + check('payment_purpose', /^[A-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ\-:;_'"]{0,40}[A-Z0-9ČŠŽĐ])?$/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) diff --git a/src/views/form.ejs b/src/views/form.ejs index 115a12f..f2f2307 100644 --- a/src/views/form.ejs +++ b/src/views/form.ejs @@ -28,7 +28,7 @@ div { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); row-gap: .5rem; - column-gap: .5rem; + column-gap: 1rem; } .form > div:last-child { grid-column-end: -1; @@ -37,69 +37,49 @@ div { background-size: contain; background-position: center center; background-repeat: no-repeat; + margin: 2rem; } .card { - grid-template-columns: auto auto; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-rows: auto auto; } -.title { grid-row: 1; grid-column: span 2; } +.title { grid-row: 1; grid-column: 1 / -1; } .code { grid-row: 2; grid-column: 1; } -.form { grid-row: 2; grid-column: 2; } +.form { grid-row: 2; grid-column: 2 / -1; }
-

Form: <%= query["form-title"] %>

+

Form: <%= q["title"] %>

Create your form here: /#maker
-
-
- - " <%= query["form-client-name"] ? "readonly" : "" %> type="text" placeholder="Peter Novak" name="form-client-name"> -
-
- - " <%= query["form-client-address"] ? "readonly" : "" %> type="text" placeholder="Ravna ulica 13 a" name="form-client-address"> -
-
- - " <%= query["form-client-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-client-city"> -
-
- - " <%= query["form-amount"] ? "readonly" : "" %> type="number" placeholder="00000001132" name="form-amount"> -
-
- - " <%= query["form-code"] ? "readonly" : "" %> type="text" placeholder="OTHR" name="form-code"> -
-
- - " <%= query["form-purpose"] ? "readonly" : "" %> type="text" placeholder="moutain bike first half" name="form-purpose"> -
-
- - " <%= query["form-iban"] ? "readonly" : "" %> type="text" placeholder="SI56047500000280672" name="form-iban"> -
-
- - " <%= query["form-reference"] ? "readonly" : "" %> type="text" placeholder="SI121234567890120" name="form-reference"> -
-
- - " <%= query["form-issuer-name"] ? "readonly" : "" %> type="text" placeholder="Spletne strani na 123" name="form-issuer-name"> -
-
- - " <%= query["form-issuer-address"] ? "readonly" : "" %> type="text" placeholder="Za deveto smreko 15 k" name="form-issuer-address"> -
-
- - " <%= query["form-issuer-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-issuer-city"> -
+ <% + const items = [ + { n: "client-name", d: "Client name", p: "Peter Novak", t: "text" }, + { n: "client-address", d: "Client address", p: "Ravna Ulica 13", t: "text" }, + { n: "client-city", d: "Client city", p: "1000 Ljubljana", t: "text" }, + { n: "issuer-name", d: "Issuer name", p: "Spletne strani n'123", t: "text" }, + { n: "issuer-address", d: "Issuer address", p: "Za deveto smreko 15 k", t: "text" }, + { n: "issuer-city", d: "Issuer city", p: "1000 Ljubljana", t: "text" }, + { n: "iban", d: "IBAN", p: "SI56047500000280672", t: "text" }, + { n: "amount", d: "Amount", p: "00000001050", t: "number" }, + { n: "code", d: "Code", p: "OTHR", t: "text" }, + { n: "purpose", d: "Purpose", p: "moutain bike first half", t: "text" }, + { n: "reference", d: "Reference", p: "SI121234567890120", t: "text" } + ] + for (i of items) { + const str = String(q[i.n]) + const readonly = (str != "" && !str.includes("*") ? "readonly" : "") + const val = str.replace("*", "") + %> +
+ + type="<%= i.t %>" placeholder="<%= i.p %>" name="<%= i.n %>"> +
+ <% } %>
@@ -113,20 +93,20 @@ function val (name) { return document.getElementsByName(name)?.[0]?.value || "" } function updateQR (e) { - const querystring = [ - ["client_name", val("form-client-name")], - ["client_address", val("form-client-address")], - ["client_city", val("form-client-city")], - ["amount", val("form-amount")], - ["purpose_code", val("form-code")], - ["payment_purpose", val("form-purpose")], - ["iban", val("form-iban")], - ["reference", val("form-reference")], - ["issuer_name", val("form-issuer-name")], - ["issuer_address", val("form-issuer-address")], - ["issuer_city", val("form-issuer-city")], + const qstring = [ + ["client_name", val("client-name")], + ["client_address", val("client-address")], + ["client_city", val("client-city")], + ["amount", val("amount")], + ["purpose_code", val("code")], + ["payment_purpose", val("purpose")], + ["iban", val("iban")], + ["reference", val("reference")], + ["issuer_name", val("issuer-name")], + ["issuer_address", val("issuer-address")], + ["issuer_city", val("issuer-city")], ].map(v => `${v[0]}=${v[1]}`).join("&") - qrcode.style.setProperty('background-image', `url("/api/qrcode?${querystring}")`) + qrcode.style.setProperty('background-image', `url("/api/qrcode?${qstring}")`) } btn.addEventListener("click", updateQR) diff --git a/src/views/index.ejs b/src/views/index.ejs index 67fa519..35f9cc3 100644 --- a/src/views/index.ejs +++ b/src/views/index.ejs @@ -47,52 +47,52 @@ section div { Fill in the fields with static information and leave empty the ones that the user has to fill out.
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
- - + +
@@ -175,9 +175,9 @@ section div {
🔗 payment_purpose
- Regex: ^[A-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,40}[A-Z0-9ČŠŽĐ])?$ + Regex: ^[A-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ\-:;_'"]{0,40}[A-Z0-9ČŠŽĐ])?$
- Demo: regex101.com/r/y7kUXP/1 + Demo: regex101.com/r/egl24t/1
Description: A Can contain any character including ŠČŽĐ and space. Max length 33 characters including space.