From f4a17582dd8e1adf4d0b3ba120b3fa62f0c469da Mon Sep 17 00:00:00 2001
From: MasterZydra <david-hein196@web.de>
Date: Thu, 29 Feb 2024 18:20:15 +0100
Subject: [PATCH] Added frontend validation to check if given IBAN is valid

Fixes #50
---
 CHANGELOG.md                             |  1 +
 public/js/validateIBAN.js                | 35 ++++++++++++++++++++++++
 resources/Lang/de.php                    |  2 ++
 resources/Lang/en.php                    |  2 ++
 resources/Views/about.php                |  2 +-
 resources/Views/settings/editInvoice.php | 23 +++++++++++++++-
 6 files changed, 63 insertions(+), 2 deletions(-)
 create mode 100644 public/js/validateIBAN.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0b061a8..ea62eef 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -10,6 +10,7 @@ Types of changes: `Added`, `Changed`, `Deprecate`, `Removed`, `Fixed`, `Secruity
 
 ### Added
 - Added subdistrict recommendations to the create and edit form for plot
+- Added frontend validation to check if given IBAN is valid
 
 ## v2.2.1 - 27.02.2024 - Added developer setting
 
diff --git a/public/js/validateIBAN.js b/public/js/validateIBAN.js
new file mode 100644
index 0000000..010a14d
--- /dev/null
+++ b/public/js/validateIBAN.js
@@ -0,0 +1,35 @@
+/** 
+ * Check if the given IBAN is valid. It only supports support for German IBANs
+ *
+ * Calculation steps from https://www.hettwer-beratung.de/sepa-spezialwissen/sepa-kontoverbindungsdaten/iban-pr%C3%BCfziffer-berechnung/
+ */
+function validateIBAN(iban)
+{
+    // A = 10, B = 11, ...
+    function charToNum(char)
+    {
+        return char - 64 + 9
+    }
+
+    // Enforce uppercase
+    iban = iban.toUpperCase();
+
+    // Remove leading and trailing spaces as well as all spaces inside
+    iban = iban.trim().replaceAll(' ', '');
+
+    // Check length
+    if (iban.length !== 22) {
+        return false;
+    }
+
+    // BBAN = "Bank code" + "Account number"
+    let bban = iban.slice(4, 22);
+    // e.g. DE = 131400
+    let countryCode = charToNum(iban.charCodeAt(0)).toString() + charToNum(iban.charCodeAt(1)) + "00";
+    let checkNumber = bban.toString() + countryCode.toString();
+    let checkSum = Number(BigInt(checkNumber) % BigInt(97));
+    console.log("checkSum", checkSum);
+    let ibanCheckSum = (98 - checkSum).toString().padStart(2, '0');
+
+    return iban.slice(2, 4) === ibanCheckSum;
+}
diff --git a/resources/Lang/de.php b/resources/Lang/de.php
index 0962d3c..a3d82fd 100644
--- a/resources/Lang/de.php
+++ b/resources/Lang/de.php
@@ -54,6 +54,8 @@
     'German' => 'Deutsch',
     'Home' => 'Startseite',
     'IBAN' => 'IBAN',
+    'IbanIsNotValid' => 'IBAN ist nicht gültig',
+    'IbanIsValid' => 'IBAN ist gültig',
     'Imprint' => 'Impressum',
     'InsertSearchText' => 'Suchtext eingeben...',
     'InvalidDataTypeForField' => 'Ungültiger Datentyp für das Feld "%s"',
diff --git a/resources/Lang/en.php b/resources/Lang/en.php
index a1a78f5..8cffad7 100644
--- a/resources/Lang/en.php
+++ b/resources/Lang/en.php
@@ -54,6 +54,8 @@
     'German' => 'German',
     'Home' => 'Home',
     'IBAN' => 'IBAN',
+    'IbanIsNotValid' => 'IBAN is not valid',
+    'IbanIsValid' => 'IBAN is valid',
     'Imprint' => 'Imprint',
     'InsertSearchText' => 'Insert search text...',
     'InvalidDataTypeForField' => 'Invalid data type for field "%s"',
diff --git a/resources/Views/about.php b/resources/Views/about.php
index 2b99eac..fbf3d5c 100644
--- a/resources/Views/about.php
+++ b/resources/Views/about.php
@@ -5,7 +5,7 @@
 <table class="scrollable">
     <tr>
         <td>Bio-Manager Version</td>
-        <td class="right">2.2.1</td>
+        <td class="right">2.2.2</td>
     </tr>
     <tr>
         <td><?= __('Developer') ?></td>
diff --git a/resources/Views/settings/editInvoice.php b/resources/Views/settings/editInvoice.php
index f1263f5..411c470 100644
--- a/resources/Views/settings/editInvoice.php
+++ b/resources/Views/settings/editInvoice.php
@@ -26,7 +26,8 @@
     <input id="invoiceBankName" name="invoiceBankName" type="text" value="<?= setting('invoiceBankName') ?>" required><br>
 
     <label for="invoiceIBAN" class="required"><?= __('IBAN') ?>:</label><br>
-    <input id="invoiceIBAN" name="invoiceIBAN" type="text" value="<?= setting('invoiceIBAN') ?>" required><br>
+    <input id="invoiceIBAN" name="invoiceIBAN" type="text" value="<?= setting('invoiceIBAN') ?>" onchange="validateIbanInput()" required><br>
+    <div style="margin-bottom: 8px;"><span id="ibanValidMsg"></span></div>
 
     <label for="invoiceBIC" class="required"><?= __('BIC') ?>:</label><br>
     <input id="invoiceBIC" name="invoiceBIC" type="text" value="<?= setting('invoiceBIC') ?>" required><br>
@@ -42,4 +43,24 @@
     <button><?= __('Save') ?></button>
 </form>
 
+<script src="js/validateIBAN.js"></script>
+<script>
+
+function validateIbanInput()
+{
+    let msgSpan = document.getElementById('ibanValidMsg');
+    if (validateIBAN(document.getElementById('invoiceIBAN').value)) {
+        console.log("yes");
+        msgSpan.style = 'color: #4a8a16;';
+        msgSpan.textContent = '<?= __('IbanIsValid') ?>';
+    } else {
+        console.log("no");
+        msgSpan.style = 'color: #b01c1c;';
+        msgSpan.textContent = '<?= __('IbanIsNotValid') ?>';
+    }
+}
+
+validateIbanInput();
+</script>
+
 <?= component('layout.footer') ?>
\ No newline at end of file