72 lines
1.8 KiB
Vue
72 lines
1.8 KiB
Vue
<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 data-test-id="iban-info" />
|
|
|
|
<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>
|