diff --git a/README.md b/README.md index 4d5e760..4445041 100644 --- a/README.md +++ b/README.md @@ -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 diff --git a/index.html b/index.html index 03306ab..c6d0fe7 100644 --- a/index.html +++ b/index.html @@ -6,6 +6,19 @@ BezahlBrudi + @@ -49,10 +62,9 @@
-
+
- € - + €
diff --git a/js/index.js b/js/index.js index 460e04b..f4b7eec 100644 --- a/js/index.js +++ b/js/index.js @@ -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 = "✅"; 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();