diff options
Diffstat (limited to 'src/tools')
5 files changed, 154 insertions, 1 deletions
diff --git a/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts b/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts new file mode 100644 index 0000000..3501543 --- /dev/null +++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.e2e.spec.ts @@ -0,0 +1,51 @@ +import { type Page, expect, test } from '@playwright/test'; +import _ from 'lodash'; + +async function extractIbanInfo({ page }: { page: Page }) { + const tdHandles = await page.locator('table tr td').elementHandles(); + const tdTextContents = await Promise.all(tdHandles.map(el => el.textContent())); + + return _.chain(tdTextContents) + .map(tdTextContent => tdTextContent?.trim().replace(' Copy to clipboard', '')) + .chunk(2) + .value(); +} + +test.describe('Tool - Iban validator and parser', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/iban-validator-and-parser'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('IBAN validator and parser - IT Tools'); + }); + + test('iban info are extracted from a valid iban', async ({ page }) => { + await page.getByTestId('iban-input').fill('DE89370400440532013000'); + + const ibanInfo = await extractIbanInfo({ page }); + + expect(ibanInfo).toEqual([ + ['Is IBAN valid ?', 'Yes'], + ['Is IBAN a QR-IBAN ?', 'No'], + ['Country code', 'DE'], + ['BBAN', '370400440532013000'], + ['IBAN friendly format', 'DE89 3704 0044 0532 0130 00'], + ]); + }); + + test('invalid iban errors are displayed', async ({ page }) => { + await page.getByTestId('iban-input').fill('FR7630006060011234567890189'); + + const ibanInfo = await extractIbanInfo({ page }); + + expect(ibanInfo).toEqual([ + ['Is IBAN valid ?', 'No'], + ['IBAN errors', 'Wrong account bank branch checksumWrong IBAN checksum Copy to clipboard'], + ['Is IBAN a QR-IBAN ?', 'No'], + ['Country code', 'N/A'], + ['BBAN', 'N/A'], + ['IBAN friendly format', 'FR76 3000 6060 0112 3456 7890 189'], + ]); + }); +}); diff --git a/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts b/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts new file mode 100644 index 0000000..bde71db --- /dev/null +++ b/src/tools/iban-validator-and-parser/iban-validator-and-parser.service.ts @@ -0,0 +1,18 @@ +import { ValidationErrorsIBAN } from 'ibantools'; + +export { getFriendlyErrors }; + +const ibanErrorToMessage = { + [ValidationErrorsIBAN.NoIBANProvided]: 'No IBAN provided', + [ValidationErrorsIBAN.NoIBANCountry]: 'No IBAN country', + [ValidationErrorsIBAN.WrongBBANLength]: 'Wrong BBAN length', + [ValidationErrorsIBAN.WrongBBANFormat]: 'Wrong BBAN format', + [ValidationErrorsIBAN.ChecksumNotNumber]: 'Checksum is not a number', + [ValidationErrorsIBAN.WrongIBANChecksum]: 'Wrong IBAN checksum', + [ValidationErrorsIBAN.WrongAccountBankBranchChecksum]: 'Wrong account bank branch checksum', + [ValidationErrorsIBAN.QRIBANNotAllowed]: 'QR-IBAN not allowed', +}; + +function getFriendlyErrors(errorCodes: ValidationErrorsIBAN[]) { + return errorCodes.map(errorCode => ibanErrorToMessage[errorCode]).filter(Boolean); +} diff --git a/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue b/src/tools/iban-validator-and-parser/iban-validator-and-parser.vue new file mode 100644 index 0000000..d5cdc02 --- /dev/null +++ b/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> diff --git a/src/tools/iban-validator-and-parser/index.ts b/src/tools/iban-validator-and-parser/index.ts new file mode 100644 index 0000000..b0cae50 --- /dev/null +++ b/src/tools/iban-validator-and-parser/index.ts @@ -0,0 +1,12 @@ +import { defineTool } from '../tool'; +import Bank from '~icons/mdi/bank'; + +export const tool = defineTool({ + name: 'IBAN validator and parser', + path: '/iban-validator-and-parser', + description: 'Validate and parse IBAN numbers. Check if IBAN is valid and get the country, BBAN, if it is a QR-IBAN and the IBAN friendly format.', + keywords: ['iban', 'validator', 'and', 'parser', 'bic', 'bank'], + component: () => import('./iban-validator-and-parser.vue'), + icon: Bank, + createdAt: new Date('2023-08-26'), +}); diff --git a/src/tools/index.ts b/src/tools/index.ts index 39b34ad..15770b5 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,6 +1,7 @@ import { tool as base64FileConverter } from './base64-file-converter'; import { tool as base64StringConverter } from './base64-string-converter'; import { tool as basicAuthGenerator } from './basic-auth-generator'; +import { tool as ibanValidatorAndParser } from './iban-validator-and-parser'; import { tool as stringObfuscator } from './string-obfuscator'; import { tool as textDiff } from './text-diff'; import { tool as emojiPicker } from './emoji-picker'; @@ -151,7 +152,7 @@ export const toolsByCategory: ToolCategory[] = [ }, { name: 'Data', - components: [phoneParserAndFormatter], + components: [phoneParserAndFormatter, ibanValidatorAndParser], }, ]; |