version 1 ready

js/index.js

@@ -0,0 +1,197 @@
+getCookie = (key) => {
+  let name = key + "=";
+  let decodedCookie = decodeURIComponent(document.cookie);
+  let ca = decodedCookie.split(';');
+  for(let i = 0; i <ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) === ' ') {
+      c = c.substring(1);
+    }
+    if (c.indexOf(name) === 0) {
+      return c.substring(name.length, c.length);
+    }
+  }
+  return "";
+}
+
+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;
+}
+
+// Field data checks
+
+validateName = (target) => {
+  if (target.value.length > 0 && target.value.length <= 70) {
+    target.classList.remove("is-danger")
+    document.querySelector("#name div span").innerHTML = "&#x2705;";
+    if (document.querySelector("#name p")) {
+      document.querySelector("#name p").remove();
+    }
+
+    regenerate();
+  } else {
+    target.classList.add("is-danger")
+    document.querySelector("#name div span").innerHTML = "&#x274C;";
+
+    if (!document.querySelector("#name p")) {
+      const help = document.createElement("p");
+      help.classList.add("help", "is-danger");
+      help.textContent = "Name can only have 70 characters.";
+      document.querySelector("#name").appendChild(help);
+    }
+  }
+}
+
+validateBic = (target) => {
+  const re = /^[a-z]{6}[2-9a-z][0-9a-np-z]([a-z0-9]{3}|x{3})?$/i;
+
+  if (re.test(target.value)) {
+    target.classList.remove("is-danger")
+    document.querySelector("#bic div span").innerHTML = "&#x2705;";
+    if (document.querySelector("#bic p")) {
+      document.querySelector("#bic p").remove();
+    }
+
+    regenerate();
+  } else {
+    target.classList.add("is-danger")
+    document.querySelector("#bic div span").innerHTML = "&#x274C;";
+
+    if (!document.querySelector("#bic p")) {
+      const help = document.createElement("p");
+      help.classList.add("help", "is-danger");
+      help.textContent = "BIC is invalid";
+      document.querySelector("#bic").appendChild(help);
+    }
+  }
+}
+
+validateIban = (target) => {
+  // IBANs are fucking complicated. this is a hugely simplified check
+  const re = /^[a-z]{2}[0-9]{20}$/i;
+
+  if (re.test(target.value)) {
+    target.classList.remove("is-danger")
+    document.querySelector("#iban div span").innerHTML = "&#x2705;";
+    if (document.querySelector("#iban p")) {
+      document.querySelector("#iban p").remove();
+    }
+
+    regenerate();
+  } else {
+    target.classList.add("is-danger")
+    document.querySelector("#iban div span").innerHTML = "&#x274C;";
+
+    if (!document.querySelector("#iban p")) {
+      const help = document.createElement("p");
+      help.classList.add("help", "is-danger");
+      help.textContent = "IBAN is invalid";
+      document.querySelector("#iban").appendChild(help);
+    }
+  }
+}
+
+validatePurpose = (target) => {
+  if (target.value.length > 0 && target.value.length <= 140) {
+    target.classList.remove("is-danger")
+    document.querySelector("#purpose div span").innerHTML = "&#x2705;";
+    if (document.querySelector("#purpose p")) {
+      document.querySelector("#purpose p").remove();
+    }
+
+    regenerate();
+  } else {
+    target.classList.add("is-danger")
+    document.querySelector("#name div span").innerHTML = "&#x274C;";
+
+    if (!document.querySelector("#purpose p")) {
+      const help = document.createElement("p");
+      help.classList.add("help", "is-danger");
+      help.textContent = "Purpose can only have 140 characters.";
+      document.querySelector("#purpose").appendChild(help);
+    }
+  }
+}
+
+document.querySelector("#name input").addEventListener("input", (event) => {
+  validateName(event.target);
+});
+
+document.querySelector("#iban input").addEventListener("input", (event) => {
+  validateIban(event.target);
+});
+
+document.querySelector("#bic input").addEventListener("input", (event) => {
+  validateBic(event.target);
+});
+
+document.querySelector("#purpose input").addEventListener("input", (event) => {
+  validatePurpose(event.target);
+});
+
+// Remember inputs
+document.querySelector("#rememberme").addEventListener("change", (event) => {
+  if (event.target.checked) {
+    console.log("Save Name, IBAN and BIC to cookie..");
+    setCookie();
+  } else {
+    console.log("Remove Cookie..");
+  }
+})
+
+// qr code generator
+regenerate = () => {
+  if (document.querySelector("#name input").classList.contains("is-danger")
+    || document.querySelector("#iban input").classList.contains("is-danger")
+    || document.querySelector("#bic input").classList.contains("is-danger")) {
+    console.log("Error in inputs")
+  } else {
+    document.querySelector('#qr-code').innerHTML = "";
+    QrCreator.render({
+      text: `BCD
+002
+1
+SCT
+${document.querySelector("#bic input").value.toUpperCase()}
+${document.querySelector("#name input").value}
+${document.querySelector("#iban input").value.toUpperCase()}
+EUR${document.querySelector("#amount input").value}
+
+
+${document.querySelector("#purpose input").value}
+`,
+      radius: 0.25,
+      ecLevel: "H",
+      fill: "#fff",
+      background: null,
+      size: 512
+    }, document.querySelector('#qr-code'));
+
+    if (document.querySelector("#rememberme").checked) {
+      setCookie()
+    }
+  }
+}
+
+// generate qr code on first visit
+validateName(document.querySelector("#name input"));
+validateIban(document.querySelector("#iban input"));
+validateBic(document.querySelector("#bic input"));
+validatePurpose(document.querySelector("#purpose input"));
+regenerate();