bezahlbrudi/js/index.js

getCookie = () => {
  let name = "brudi=";
  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 JSON.parse(c.substring(name.length, c.length));
    }
  }
  return "";
}

setCookie = () => {
  const d = new Date();
  d.setTime(d.getTime() + (180*24*60*60*1000)); // 180 days
  const data = JSON.stringify({
    name: document.querySelector("#name input").value,
    iban: document.querySelector("#iban input").value.toUpperCase(),
    bic: document.querySelector("#bic input").value.toUpperCase(),
    amount: parseFloat(document.querySelector("#amount input").value).toFixed(2),
    purpose: document.querySelector("#purpose input").value
  });
  document.cookie = `brudi=${data};expires=${d.toUTCString()};path=/;SameSite=Strict;Secure`;
}

// 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();
    }
  } 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();
    }
  } 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();
    }
  } 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);
    }
  }
}

validateAmount = (target) => {
  if (parseFloat(target.value) > 0 && target.value.toString() === parseFloat(target.value).toFixed(2).toString()) {
    target.value = parseFloat(target.value).toFixed(2);
    target.classList.remove("is-danger")
    document.querySelector("#amount div span.is-right").innerHTML = "&#x2705;";
  } else {
    target.classList.add("is-danger")
    document.querySelector("#amount div span.is-right").innerHTML = "&#x274C;";
  }
}

validatePurpose = (target) => {
  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")) {
      document.querySelector("#purpose p").remove();
    }
  } else {
    target.classList.add("is-danger")
    document.querySelector("#purpose 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 and only include A-Z, a-z, 0-9, /?:().,'+- and spaces.";
      document.querySelector("#purpose").appendChild(help);
    }
  }
}

document.querySelector("#name input").addEventListener("input", (event) => {
  validateName(event.target);
  regenerate();
});

document.querySelector("#iban input").addEventListener("input", (event) => {
  validateIban(event.target);
  regenerate();
});

document.querySelector("#bic input").addEventListener("input", (event) => {
  validateBic(event.target);
  regenerate();
});

document.querySelector("#amount input").addEventListener("input", (event) => {
  validateAmount(event.target);
  regenerate();
});

document.querySelector("#purpose input").addEventListener("input", (event) => {
  validatePurpose(event.target);
  regenerate();
});

// 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..");
  }
})

// Regenerate on color-scheme change
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (event) => {
  regenerate()
});

// qr code generator
regenerate = () => {
  document.querySelector('#qr-code').innerHTML = "";
  if (document.querySelector("#name input").classList.contains("is-danger")) {
    console.error("Error in name");
  }
  else if (document.querySelector("#iban input").classList.contains("is-danger")) {
    console.error("Error in IBAN");
  }
  else if (document.querySelector("#bic input").classList.contains("is-danger")) {
    console.error("Error in BIC");
  }
  else if (document.querySelector("#amount input").classList.contains("is-danger")) {
      console.error("Error in Amount");
  }
  else if (document.querySelector("#purpose input").classList.contains("is-danger")) {
    console.error("Error in Purpose");
  } else {
    console.log("Generating new QR code...");
    const data = `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}
`;

    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      // dark mode
      QrCreator.render({
        text: data,
        radius: 0.25,
        ecLevel: "H",
        fill: "#fff",
        background: "#000",
        size: 512
      }, document.querySelector('#qr-code'));
    } else {
      // light mode
      QrCreator.render({
        text: data,
        radius: 0.25,
        ecLevel: "H",
        fill: "#000",
        background: "#fff",
        size: 512
      }, document.querySelector('#qr-code'));
    }

    if (document.querySelector("#rememberme").checked) {
      setCookie()
    }
  }
}

// Fill in form from cookie
const cookie = getCookie();
if (cookie !== "") {
  document.querySelector("#name input").value = cookie.name;
  document.querySelector("#iban input").value = cookie.iban;
  document.querySelector("#bic input").value = cookie.bic;
  document.querySelector("#amount input").value = cookie.amount;
  document.querySelector("#purpose input").value = cookie.purpose;
  document.querySelector("#rememberme").checked = true;
}

// Validate all fields to set css properties
validateName(document.querySelector("#name input"));
validateIban(document.querySelector("#iban input"));
validateBic(document.querySelector("#bic input"));
validateAmount(document.querySelector("#amount input"));
validatePurpose(document.querySelector("#purpose input"));

// generate qr code on first visit
regenerate();