From 951143d63d5c20d5c97ee9104d03ebde98614aa0 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Sun, 1 Sep 2024 19:36:13 +0200 Subject: [PATCH] feat: handle parsing of common qr code types Fix #1224 --- components.d.ts | 4 + package.json | 1 + pnpm-lock.yaml | 24 ++- src/tools/qr-code-decoder/ical.js.d.ts | 3 + .../qr-code-decoder.service.test.ts | 151 ++++++++++++++++++ .../qr-code-decoder.service.ts | 83 ++++++++++ src/tools/qr-code-decoder/qr-code-decoder.vue | 17 ++ 7 files changed, 275 insertions(+), 8 deletions(-) create mode 100644 src/tools/qr-code-decoder/ical.js.d.ts create mode 100644 src/tools/qr-code-decoder/qr-code-decoder.service.test.ts create mode 100644 src/tools/qr-code-decoder/qr-code-decoder.service.ts diff --git a/components.d.ts b/components.d.ts index e31119b3..1b7c09fa 100644 --- a/components.d.ts +++ b/components.d.ts @@ -129,15 +129,18 @@ declare module '@vue/runtime-core' { NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default'] NCode: typeof import('naive-ui')['NCode'] NCollapseTransition: typeof import('naive-ui')['NCollapseTransition'] + NColorPicker: typeof import('naive-ui')['NColorPicker'] NConfigProvider: typeof import('naive-ui')['NConfigProvider'] NDivider: typeof import('naive-ui')['NDivider'] NEllipsis: typeof import('naive-ui')['NEllipsis'] + NForm: typeof import('naive-ui')['NForm'] NFormItem: typeof import('naive-ui')['NFormItem'] NGi: typeof import('naive-ui')['NGi'] NGrid: typeof import('naive-ui')['NGrid'] NH1: typeof import('naive-ui')['NH1'] NH3: typeof import('naive-ui')['NH3'] NIcon: typeof import('naive-ui')['NIcon'] + NImage: typeof import('naive-ui')['NImage'] NInputNumber: typeof import('naive-ui')['NInputNumber'] NLabel: typeof import('naive-ui')['NLabel'] NLayout: typeof import('naive-ui')['NLayout'] @@ -152,6 +155,7 @@ declare module '@vue/runtime-core' { PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default'] PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default'] PhoneParserAndFormatter: typeof import('./src/tools/phone-parser-and-formatter/phone-parser-and-formatter.vue')['default'] + QrCodeDecoder: typeof import('./src/tools/qr-code-decoder/qr-code-decoder.vue')['default'] QrCodeGenerator: typeof import('./src/tools/qr-code-generator/qr-code-generator.vue')['default'] RandomPortGenerator: typeof import('./src/tools/random-port-generator/random-port-generator.vue')['default'] ResultRow: typeof import('./src/tools/ipv4-range-expander/result-row.vue')['default'] diff --git a/package.json b/package.json index 37044c53..1dca2def 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "highlight.js": "^11.7.0", "iarna-toml-esm": "^3.0.5", "ibantools": "^4.3.3", + "ical.js": "^2.0.1", "json5": "^2.2.3", "jwt-decode": "^3.1.2", "libphonenumber-js": "^1.10.28", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 4a0e6939..a0d83765 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -92,6 +92,9 @@ dependencies: ibantools: specifier: ^4.3.3 version: 4.3.3 + ical.js: + specifier: ^2.0.1 + version: 2.0.1 json5: specifier: ^2.2.3 version: 2.2.3 @@ -3354,7 +3357,7 @@ packages: dependencies: '@unhead/dom': 0.5.1 '@unhead/schema': 0.5.1 - '@vueuse/shared': 10.9.0(vue@3.3.4) + '@vueuse/shared': 11.0.3(vue@3.3.4) unhead: 0.5.1 vue: 3.3.4 transitivePeerDependencies: @@ -3996,10 +3999,10 @@ packages: - vue dev: false - /@vueuse/shared@10.9.0(vue@3.3.4): - resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==} + /@vueuse/shared@11.0.3(vue@3.3.4): + resolution: {integrity: sha512-0rY2m6HS5t27n/Vp5cTDsKTlNnimCqsbh/fmT2LgE+aaU42EMfXo8+bNX91W9I7DDmxfuACXMmrd7d79JxkqWA==} dependencies: - vue-demi: 0.14.7(vue@3.3.4) + vue-demi: 0.14.10(vue@3.3.4) transitivePeerDependencies: - '@vue/composition-api' - vue @@ -6094,6 +6097,10 @@ packages: resolution: {integrity: sha512-RUTlGuFj3cU/Qfu5YIrsIZjW34/VDgKOz5fDr64Mc4NWP9b2i48vQ39r5xCl1yyFQeyEG/lASstIQHAUX18rRA==} dev: false + /ical.js@2.0.1: + resolution: {integrity: sha512-uYYb1CwTXbd9NP/xTtgQZ5ivv6bpUjQu9VM98s3X78L3XRu00uJW5ZtmnLwyxhztpf5fSiRyDpFW7ZNCePlaPw==} + dev: false + /iconv-lite@0.6.3: resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} engines: {node: '>=0.10.0'} @@ -9149,8 +9156,8 @@ packages: vue: 3.3.4 dev: false - /vue-demi@0.14.5(vue@3.3.4): - resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} + /vue-demi@0.14.10(vue@3.3.4): + resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==} engines: {node: '>=12'} hasBin: true requiresBuild: true @@ -9164,8 +9171,8 @@ packages: vue: 3.3.4 dev: false - /vue-demi@0.14.7(vue@3.3.4): - resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==} + /vue-demi@0.14.5(vue@3.3.4): + resolution: {integrity: sha512-o9NUVpl/YlsGJ7t+xuqJKx8EBGf1quRhCiT6D/J0pfwmk9zUwYkC7yrF4SZCe6fETvSM3UNL2edcbYrSyc4QHA==} engines: {node: '>=12'} hasBin: true requiresBuild: true @@ -9455,6 +9462,7 @@ packages: /workbox-google-analytics@7.0.0: resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==} + deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained dependencies: workbox-background-sync: 7.0.0 workbox-core: 7.0.0 diff --git a/src/tools/qr-code-decoder/ical.js.d.ts b/src/tools/qr-code-decoder/ical.js.d.ts new file mode 100644 index 00000000..9c60cc38 --- /dev/null +++ b/src/tools/qr-code-decoder/ical.js.d.ts @@ -0,0 +1,3 @@ +declare module "ical.js" { + export function parse(content: string): object; +} \ No newline at end of file diff --git a/src/tools/qr-code-decoder/qr-code-decoder.service.test.ts b/src/tools/qr-code-decoder/qr-code-decoder.service.test.ts new file mode 100644 index 00000000..e162313c --- /dev/null +++ b/src/tools/qr-code-decoder/qr-code-decoder.service.test.ts @@ -0,0 +1,151 @@ +import { describe, expect, test } from 'vitest'; +import { parseQRData } from './qr-code-decoder.service'; + +describe('qr-code-decoder', () => { + test('parseQRData should parse content correctly', () => { + expect(parseQRData(null)).toEqual({ + type: 'Unknown', + value: '', + }); + expect(parseQRData('')).toEqual({ + type: 'Unknown', + value: '', + }); + expect(parseQRData('TEL:+33123456')).toEqual({ + type: 'Phone', + value: '+33123456', + }); + expect(parseQRData('MATMSG:TO: email@example.com;SUB:email subject;BODY:Email text;;')).toEqual({ + type: 'Email', + value: { + body: 'Email text', + subject: 'email subject', + to: 'email@example.com', + }, + }); + expect(parseQRData('mailto:email@example.com?subject=email subject&body=Email text')).toEqual({ + type: 'Email', + value: { + body: 'Email text', + subject: 'email subject', + to: 'email@example.com', + }, + }); + expect(parseQRData('SMTP:email@example.com:email subject:Email text')).toEqual({ + type: 'Email', + value: { + body: 'Email text', + subject: 'email subject', + to: 'email@example.com', + }, + }); + expect(parseQRData('smsto:+33315555:message')).toEqual({ + type: 'SMS', + value: { + message: 'message', + to: '+33315555', + }, + }); + expect(parseQRData('WIFI:T:nopass;S:ssid;H:true;')).toEqual({ + type: 'Wifi', + value: { + authentication: 'nopass', + hidden: 'true', + name: 'ssid', + password: undefined, + }, + }); + expect(parseQRData('WIFI:T:WPA;S:ssid;P:password;H:false;')).toEqual({ + type: 'Wifi', + value: { + authentication: 'WPA', + hidden: 'false', + name: 'ssid', + password: 'password', + }, + }); + expect(parseQRData('BEGIN:VCALENDAR\nPRODID:-//xyz Corp//NONSGML PDA Calendar Version 1.0//EN\nVERSION:2.0\nBEGIN:VEVENT\nDTSTAMP:19960704T120000Z\nUID:uid1@example.com\nORGANIZER:mailto:jsmith@example.com\nDTSTART:19960918T143000Z\nDTEND:19960920T220000Z\nSTATUS:CONFIRMED\nCATEGORIES:CONFERENCE\nSUMMARY:Networld+Interop Conference\nDESCRIPTION:Networld+Interop Conference\n and Exhibit\\nAtlanta World Congress Center\\n\n Atlanta\\, Georgia\nEND:VEVENT\nEND:VCALENDAR')) + .toEqual({ + type: 'iCal', + value: [ + 'vcalendar', + [ + [ + 'prodid', + {}, + 'text', + '-//xyz Corp//NONSGML PDA Calendar Version 1.0//EN', + ], + [ + 'version', + {}, + 'text', + '2.0', + ], + ], + [ + [ + 'vevent', + [ + [ + 'dtstamp', + {}, + 'date-time', + '1996-07-04T12:00:00Z', + ], + [ + 'uid', + {}, + 'text', + 'uid1@example.com', + ], + [ + 'organizer', + {}, + 'cal-address', + 'mailto:jsmith@example.com', + ], + [ + 'dtstart', + {}, + 'date-time', + '1996-09-18T14:30:00Z', + ], + [ + 'dtend', + {}, + 'date-time', + '1996-09-20T22:00:00Z', + ], + [ + 'status', + {}, + 'text', + 'CONFIRMED', + ], + [ + 'categories', + {}, + 'text', + 'CONFERENCE', + ], + [ + 'summary', + {}, + 'text', + 'Networld+Interop Conference', + ], + [ + 'description', + {}, + 'text', + 'Networld+Interop Conference and Exhibit\nAtlanta World Congress Center\nAtlanta, Georgia', + ], + ], + [], + ], + ], + ], + }); + }); +}); diff --git a/src/tools/qr-code-decoder/qr-code-decoder.service.ts b/src/tools/qr-code-decoder/qr-code-decoder.service.ts new file mode 100644 index 00000000..5ca96038 --- /dev/null +++ b/src/tools/qr-code-decoder/qr-code-decoder.service.ts @@ -0,0 +1,83 @@ +import ICAL from 'ical.js'; + +export function parseQRData(qrContent: string | null) { + if (!qrContent) { + return { type: 'Unknown', value: '' }; + } + if (qrContent.startsWith('BEGIN:VCALENDAR')) { + return { type: 'iCal', value: ICAL.parse(qrContent?.trim()) }; + } + if (qrContent.startsWith('TEL:')) { + return { type: 'Phone', value: qrContent.substring(4)?.trim() }; + } + if (qrContent.startsWith('MATMSG:')) { + // MATMSG:TO: email@example.com;SUB:email subject;BODY:Email text;; + const parsing = /^MATMSG:(?:TO:([^;]*);)?(?:SUB:([^;]*);)?(?:BODY:([^;]*))?;;$/.exec(qrContent) || []; + return { + type: 'Email', + value: { + to: parsing[1]?.trim(), + subject: parsing[2]?.trim(), + body: parsing[3]?.trim(), + }, + }; + } + if (qrContent.startsWith('mailto:')) { + // mailto:email@example.com?subject=email subject&body=Email text + const parsing = /^mailto:([^\?]+)\?subject=([^\&]*)(?:&body=(.*))$/.exec(qrContent) || []; + return { + type: 'Email', + value: { + to: parsing[1]?.trim(), + subject: parsing[2]?.trim(), + body: parsing[3]?.trim(), + }, + }; + } + if (qrContent.startsWith('SMTP:')) { + // SMTP:email@example.com:email subject:Email text + const parsing = /^SMTP:([^:]+)(?::([^:]*))(?::([^:]*))?$/.exec(qrContent) || []; + return { + type: 'Email', + value: { + to: parsing[1]?.trim(), + subject: parsing[2]?.trim(), + body: parsing[3]?.trim(), + }, + }; + } + if (qrContent.startsWith('smsto:')) { + // smsto:${phoneNumber}:${message} + const parsing = /^smsto:([^:]+)(?::(.+))$/.exec(qrContent) || []; + return { + type: 'SMS', + value: { + to: parsing[1]?.trim(), + message: parsing[2]?.trim(), + }, + }; + } + if (qrContent.startsWith('WIFI:')) { + // WIFI:T:${authentication};S:${name};${authentication !== 'nopass' ? `P:${password};` : ''}H:${hidden}; + const parsing = /^WIFI:T:([^;]+);S:([^;]+);(?:P:([^;]+);)?(?:H:([^;]+);)?$/.exec(qrContent) || []; + return { + type: 'Wifi', + value: { + authentication: parsing[1]?.trim(), + name: parsing[2]?.trim(), + password: parsing[3]?.trim(), + hidden: parsing[4]?.trim(), + }, + }; + } + if (/\w+:\/\//.test(qrContent)) { + return { + type: 'Url', + value: qrContent, + }; + } + return { + type: 'Text', + value: qrContent, + }; +} diff --git a/src/tools/qr-code-decoder/qr-code-decoder.vue b/src/tools/qr-code-decoder/qr-code-decoder.vue index 27b1ee32..7bd07ff8 100644 --- a/src/tools/qr-code-decoder/qr-code-decoder.vue +++ b/src/tools/qr-code-decoder/qr-code-decoder.vue @@ -1,6 +1,7 @@