Added frontend validation to check if given IBAN is valid

Fixes #50

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
 

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;
+}

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"',

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"',

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>

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') ?>