1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<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-card v-if="ibanInfo.length > 0" mt-5>
<c-key-value-list :items="ibanInfo" data-test-id="iban-info" />
</c-card>
<c-card title="Valid IBAN examples" mt-5>
<div v-for="iban in ibanExamples" :key="iban">
<c-text-copyable :value="iban" font-mono :displayed-value="friendlyFormatIBAN(iban)" />
</div>
</c-card>
</div>
</template>
|
