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

correctly handle form inputs

Browse Source
This commit is contained in:
Aljaz S
2021-11-23 16:39:22 +01:00
parent 492a4e8203
commit fe9fb9f083
3 changed files with 71 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.js
View File

@@ -13,7 +13,7 @@ app.set('views', path.join(__dirname, 'views'))
app.set('view engine', 'ejs') app.set('view engine', 'ejs')
app.get('/', (req, res) => res.render('index')) 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) => { app.get('/api/qrcode', async (req, res) => {
const errors = [] 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_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('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('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('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)

102
src/views/form.ejs
View File

@@ -28,7 +28,7 @@ div {
display: grid; display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
row-gap: .5rem; row-gap: .5rem;
column-gap: .5rem; column-gap: 1rem;
} }
.form > div:last-child { .form > div:last-child {
grid-column-end: -1; grid-column-end: -1;
@@ -37,69 +37,49 @@ div {
background-size: contain; background-size: contain;
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
margin: 2rem;
} }
.card { .card {
grid-template-columns: auto auto; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
grid-template-rows: auto auto; 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; } .code { grid-row: 2; grid-column: 1; }
.form { grid-row: 2; grid-column: 2; } .form { grid-row: 2; grid-column: 2 / -1; }
</style> </style>
<body> <body>
<div class="card"> <div class="card">
<div class="title"> <div class="title">
<h1>Form: <%= query["form-title"] %></h1> <h1>Form: <%= q["title"] %></h1>
<span>Create your form here: <a href="/#maker">/#maker</a></span> <span>Create your form here: <a href="/#maker">/#maker</a></span>
</div> </div>
<!-- <pre><%= query ? JSON.stringify(query, null, 2) : "query: None" %></pre> -->
<div class="code" id="qrcode"> <div class="code" id="qrcode">
</div> </div>
<div class="form"> <div class="form">
<%
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("*", "")
%>
<div> <div>
<label for="form-client-name">Client name</label> <label for="<%= i.n %>"><%= i.d %></label>
<input value="<%= query["form-client-name"] %>" <%= query["form-client-name"] ? "readonly" : "" %> type="text" placeholder="Peter Novak" name="form-client-name"> <input value="<%= val %>" <%= readonly %> type="<%= i.t %>" placeholder="<%= i.p %>" name="<%= i.n %>">
</div>
<div>
<label for="form-client-address">Client address</label>
<input value="<%= query["form-client-address"] %>" <%= query["form-client-address"] ? "readonly" : "" %> type="text" placeholder="Ravna ulica 13 a" name="form-client-address">
</div>
<div>
<label for="form-client-city">Client city</label>
<input value="<%= query["form-client-city"] %>" <%= query["form-client-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-client-city">
</div>
<div>
<label for="form-amount">Amount</label>
<input value="<%= query["form-amount"] %>" <%= query["form-amount"] ? "readonly" : "" %> type="number" placeholder="00000001132" name="form-amount">
</div>
<div>
<label for="form-code">Purpose code</label>
<input value="<%= query["form-code"] %>" <%= query["form-code"] ? "readonly" : "" %> type="text" placeholder="OTHR" name="form-code">
</div>
<div>
<label for="form-purpose">Payment purpose</label>
<input value="<%= query["form-purpose"] %>" <%= query["form-purpose"] ? "readonly" : "" %> type="text" placeholder="moutain bike first half" name="form-purpose">
</div>
<div>
<label for="form-iban">IBAN</label>
<input value="<%= query["form-iban"] %>" <%= query["form-iban"] ? "readonly" : "" %> type="text" placeholder="SI56047500000280672" name="form-iban">
</div>
<div>
<label for="form-reference">Reference</label>
<input value="<%= query["form-reference"] %>" <%= query["form-reference"] ? "readonly" : "" %> type="text" placeholder="SI121234567890120" name="form-reference">
</div>
<div>
<label for="form-issuer-name">Issuer name</label>
<input value="<%= query["form-issuer-name"] %>" <%= query["form-issuer-name"] ? "readonly" : "" %> type="text" placeholder="Spletne strani na 123" name="form-issuer-name">
</div>
<div>
<label for="form-issuer-address">Issuer address</label>
<input value="<%= query["form-issuer-address"] %>" <%= query["form-issuer-address"] ? "readonly" : "" %> type="text" placeholder="Za deveto smreko 15 k" name="form-issuer-address">
</div>
<div>
<label for="form-issuer-city">Issuer city</label>
<input value="<%= query["form-issuer-city"] %>" <%= query["form-issuer-city"] ? "readonly" : "" %> type="text" placeholder="1000 Ljubljana" name="form-issuer-city">
</div> </div>
<% } %>
<div> <div>
<input type="submit" value="Update details" id="update-details"> <input type="submit" value="Update details" id="update-details">
</div> </div>
@@ -113,20 +93,20 @@ function val (name) {
return document.getElementsByName(name)?.[0]?.value || "" return document.getElementsByName(name)?.[0]?.value || ""
} }
function updateQR (e) { function updateQR (e) {
const querystring = [ const qstring = [
["client_name", val("form-client-name")], ["client_name", val("client-name")],
["client_address", val("form-client-address")], ["client_address", val("client-address")],
["client_city", val("form-client-city")], ["client_city", val("client-city")],
["amount", val("form-amount")], ["amount", val("amount")],
["purpose_code", val("form-code")], ["purpose_code", val("code")],
["payment_purpose", val("form-purpose")], ["payment_purpose", val("purpose")],
["iban", val("form-iban")], ["iban", val("iban")],
["reference", val("form-reference")], ["reference", val("reference")],
["issuer_name", val("form-issuer-name")], ["issuer_name", val("issuer-name")],
["issuer_address", val("form-issuer-address")], ["issuer_address", val("issuer-address")],
["issuer_city", val("form-issuer-city")], ["issuer_city", val("issuer-city")],
].map(v => `${v[0]}=${v[1]}`).join("&") ].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) btn.addEventListener("click", updateQR)

52
src/views/index.ejs
View File

@@ -47,52 +47,52 @@ section div {
<span>Fill in the fields with static information and leave empty the ones that the user has to fill out.</span> <span>Fill in the fields with static information and leave empty the ones that the user has to fill out.</span>
<form action="/form" method="get" class="maker"> <form action="/form" method="get" class="maker">
<div> <div>
<label for="form-title">Form title</label> <label for="title">Form title</label>
<input type="text" placeholder="First half of the bike" name="form-title"> <input type="text" placeholder="First half of the bike" name="title">
</div> </div>
<div> <div>
<label for="form-client-name">Client name</label> <label for="client-name">Client name</label>
<input type="text" placeholder="Peter Novak" name="form-client-name"> <input type="text" placeholder="Peter Novak" name="client-name">
</div> </div>
<div> <div>
<label for="form-client-address">Client address</label> <label for="client-address">Client address</label>
<input type="text" placeholder="Ravna ulica 13 a" name="form-client-address"> <input type="text" placeholder="Ravna ulica 13 a" name="client-address">
</div> </div>
<div> <div>
<label for="form-client-city">Client city</label> <label for="client-city">Client city</label>
<input type="text" placeholder="1000 Ljubljana" name="form-client-city"> <input type="text" placeholder="1000 Ljubljana" name="client-city">
</div> </div>
<div> <div>
<label for="form-amount">Amount</label> <label for="amount">Amount</label>
<input type="number" placeholder="00000001132" name="form-amount"> <input type="number" placeholder="00000001132" name="amount">
</div> </div>
<div> <div>
<label for="form-code">Purpose code</label> <label for="code">Purpose code</label>
<input type="text" placeholder="OTHR" name="form-code"> <input type="text" placeholder="OTHR" name="code">
</div> </div>
<div> <div>
<label for="form-purpose">Payment purpose</label> <label for="purpose">Payment purpose</label>
<input type="text" placeholder="moutain bike first half" name="form-purpose"> <input type="text" placeholder="moutain bike first half" name="purpose">
</div> </div>
<div> <div>
<label for="form-iban">IBAN</label> <label for="iban">IBAN</label>
<input type="text" placeholder="SI56047500000280672" name="form-iban"> <input type="text" placeholder="SI56047500000280672" name="iban">
</div> </div>
<div> <div>
<label for="form-reference">Reference</label> <label for="reference">Reference</label>
<input type="text" placeholder="SI121234567890120" name="form-reference"> <input type="text" placeholder="SI121234567890120" name="reference">
</div> </div>
<div> <div>
<label for="form-issuer-name">Issuer name</label> <label for="issuer-name">Issuer name</label>
<input type="text" placeholder="Spletne strani na 123" name="form-issuer-name"> <input type="text" placeholder="Spletne strani na 123" name="issuer-name">
</div> </div>
<div> <div>
<label for="form-issuer-address">Issuer address</label> <label for="issuer-address">Issuer address</label>
<input type="text" placeholder="Za deveto smreko 15 k" name="form-issuer-address"> <input type="text" placeholder="Za deveto smreko 15 k" name="issuer-address">
</div> </div>
<div> <div>
<label for="form-issuer-city">Issuer city</label> <label for="issuer-city">Issuer city</label>
<input type="text" placeholder="1000 Ljubljana" name="form-issuer-city"> <input type="text" placeholder="1000 Ljubljana" name="issuer-city">
</div> </div>
<div> <div>
<input type="submit" value="Create form"> <input type="submit" value="Create form">
@@ -175,9 +175,9 @@ section div {
<h5 id="api-qrcode-payment_purpose"><a href="#api-qrcode-payment_purpose">&#128279;</a> <code>payment_purpose</code></h5> <h5 id="api-qrcode-payment_purpose"><a href="#api-qrcode-payment_purpose">&#128279;</a> <code>payment_purpose</code></h5>
<div> <div>
<span>Regex: <code>^[A-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ]{0,40}[A-Z0-9ČŠŽĐ])?$</code></span> <span>Regex: <code>^[A-Z0-9ČŠŽĐ](?:[A-Z0-9 ČŠŽĐ\-:;_'"]{0,40}[A-Z0-9ČŠŽĐ])?$</code></span>
<br> <br>
<span>Demo: <a href="https://regex101.com/r/y7kUXP/1">regex101.com/r/y7kUXP/1</a></span> <span>Demo: <a href="https://regex101.com/r/egl24t/1">regex101.com/r/egl24t/1</a></span>
<br> <br>
<span>Description: A Can contain any character including ŠČŽĐ and space. Max length 33 characters including space.</span> <span>Description: A Can contain any character including ŠČŽĐ and space. Max length 33 characters including space.</span>
<br> <br>