xengi/bezahlbrudi
xengi/bezahlbrudi
Watch
1
0
Fork
You've already forked bezahlbrudi
 0
Code Issues Pull requests Releases Activity Actions

fix typos and make cookie secure

Browse source
This commit is contained in:
Ricardo (XenGi) Band 2025-01-22 15:29:36 +01:00
commit f4465a2841
No known key found for this signature in database
3 changed files with 38 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
README.md
View file

@ -1,10 +1,10 @@
# BezahlBrudi
In an effort to reduce the usage of Paypal, I created this simple web app. It can generate GiroCodes that can be used to easily transfer money between friends by showing a QR code that can be scanned by most banking apps. It will import all neccessary infos for a normal SEPA bank transfer. No third parties involved, only the banks of the friends who want to exchange money.
In an effort to reduce the usage of Paypal, I created this simple web app. It can generate GiroCodes that can be used to easily transfer money between friends by showing a QR code that can be scanned by most banking apps. It will import all necessary infos for a normal SEPA bank transfer. No third parties involved, only the banks of the friends who want to exchange money.
# How to use
Simple visit the webpage, and put in the details. The QR code will be generated automatically. You can choose to save your details in a cookie, so you don't have to input your bank details everytime. The cookie will be store on your device.
Simple visit the webpage, and put in the details. The QR code will be generated automatically. You can choose to save your details in a cookie, so you don't have to input your bank details every time.
# Data privacy

18
index.html
View file

@ -6,6 +6,19 @@
<title>BezahlBrudi</title>
<style>
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
</style>
<link rel="stylesheet" href="css/bulma.min.css">
<script src="js/qr-creator.min.js"></script>
</head>
@ -49,10 +62,9 @@
<div id="amount" class="field">
<label for="input-amount" class="label">Amount</label>
<div class="control has-icons-left has-icons-right">
<div class="control has-icons-left">
<input id="input-amount" class="input" type="number" min="0.00" step="0.01" value="0.00" pattern="[0-9]+.[0-9]{2}" required>
<span class="icon is-small is-left">&euro;</span>
<span class="icon is-small is-right"></span>
<span class="icon is-small is-left"><b>&euro;</b></span>
</div>
</div>

39
js/index.js
View file

@ -17,21 +17,7 @@ getCookie = (key) => {
setCookie = () => {
const d = new Date();
d.setTime(d.getTime() + (180*24*60*60*1000)); // 180 days
document.cookie = `name=${document.querySelector("#name input").value};iban=${document.querySelector("#iban input").value};bic=${document.querySelector("#bic input").value};expires=${d.toUTCString()};path=/`;
}
// Fill in form from cookie
const cookieName = getCookie("name");
if (cookieName !== "") {
document.querySelector("#name input").value = cookieName;
}
const cookieIban = getCookie("iban");
if (cookieIban !== "") {
document.querySelector("#iban input").value = cookieIban;
}
const cookieBic = getCookie("bic");
if (cookieBic !== "") {
document.querySelector("#bic input").value = cookieBic;
document.cookie = `name=${document.querySelector("#name input").value};iban=${document.querySelector("#iban input").value};bic=${document.querySelector("#bic input").value};expires=${d.toUTCString()};path=/;SameSite=Strict;Secure`;
}
// Field data checks
@ -108,7 +94,9 @@ validateIban = (target) => {
}
validatePurpose = (target) => {
if (target.value.length > 0 && target.value.length <= 140) {
const re = /[a-zA-Z0-9\/?:().,'+\- ]{1,140}/i;
if (re.test(target.value)) {
target.classList.remove("is-danger")
document.querySelector("#purpose div span").innerHTML = "&#x2705;";
if (document.querySelector("#purpose p")) {
@ -123,7 +111,7 @@ validatePurpose = (target) => {
if (!document.querySelector("#purpose p")) {
const help = document.createElement("p");
help.classList.add("help", "is-danger");
help.textContent = "Purpose can only have 140 characters.";
help.textContent = "Purpose can only have 140 characters and only include A-Z, a-z, 0-9, /?:().,'+- and spaces.";
document.querySelector("#purpose").appendChild(help);
}
}
@ -189,9 +177,24 @@ ${document.querySelector("#purpose input").value}
}
}
// generate qr code on first visit
// Fill in form from cookie
const cookieName = getCookie("name");
if (cookieName !== "") {
document.querySelector("#name input").value = cookieName;
}
const cookieIban = getCookie("iban");
if (cookieIban !== "") {
document.querySelector("#iban input").value = cookieIban;
}
const cookieBic = getCookie("bic");
if (cookieBic !== "") {
document.querySelector("#bic input").value = cookieBic;
}
validateName(document.querySelector("#name input"));
validateIban(document.querySelector("#iban input"));
validateBic(document.querySelector("#bic input"));
validatePurpose(document.querySelector("#purpose input"));
// generate qr code on first visit
regenerate();