feat(new tool): iban validation and parser (#591)

src/tools/iban-validator-and-parser/iban-validator-and-parser.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { extractIBAN, friendlyFormatIBAN, isQRIBAN, validateIBAN } from 'ibantools';
+import { getFriendlyErrors } from './iban-validator-and-parser.service';
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const rawIban = ref('');
+
+const ibanInfo = computed<CKeyValueListItems>(() => {
+  const iban = rawIban.value.toUpperCase().replace(/\s/g, '').replace(/-/g, '');
+
+  if (iban === '') {
+    return [];
+  }
+
+  const { valid: isIbanValid, errorCodes } = validateIBAN(iban);
+  const { countryCode, bban } = extractIBAN(iban);
+  const errors = getFriendlyErrors(errorCodes);
+
+  return [
+
+    {
+      label: 'Is IBAN valid ?',
+      value: isIbanValid,
+      showCopyButton: false,
+    },
+    {
+      label: 'IBAN errors',
+      value: errors.length === 0 ? undefined : errors,
+      hideOnNil: true,
+      showCopyButton: false,
+    },
+    {
+      label: 'Is IBAN a QR-IBAN ?',
+      value: isQRIBAN(iban),
+      showCopyButton: false,
+    },
+    {
+      label: 'Country code',
+      value: countryCode,
+    },
+    {
+      label: 'BBAN',
+      value: bban,
+    },
+    {
+      label: 'IBAN friendly format',
+      value: friendlyFormatIBAN(iban),
+    },
+  ];
+});
+
+const ibanExamples = [
+  'FR7630006000011234567890189',
+  'DE89370400440532013000',
+  'GB29NWBK60161331926819',
+];
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="rawIban" placeholder="Enter an IBAN to check for validity..." test-id="iban-input" />
+
+    <c-key-value-list :items="ibanInfo" my-5 />
+
+    <c-card title="Valid IBAN examples">
+      <div v-for="iban in ibanExamples" :key="iban">
+        <c-text-copyable :value="iban" font-mono :displayed-value="friendlyFormatIBAN(iban)" />
+      </div>
+    </c-card>
+  </div>
+</template>