feat(new tool): Luhn Checker

Check kuhn identifiers

components.d.ts

@@ -119,6 +119,7 @@ declare module '@vue/runtime-core' {
     ListConverter: typeof import('./src/tools/list-converter/list-converter.vue')['default']
     LocaleSelector: typeof import('./src/modules/i18n/components/locale-selector.vue')['default']
     LoremIpsumGenerator: typeof import('./src/tools/lorem-ipsum-generator/lorem-ipsum-generator.vue')['default']
+    LuhnValidator: typeof import('./src/tools/luhn-validator/luhn-validator.vue')['default']
     MacAddressGenerator: typeof import('./src/tools/mac-address-generator/mac-address-generator.vue')['default']
     MacAddressLookup: typeof import('./src/tools/mac-address-lookup/mac-address-lookup.vue')['default']
     MathEvaluator: typeof import('./src/tools/math-evaluator/math-evaluator.vue')['default']
@@ -128,23 +129,17 @@ declare module '@vue/runtime-core' {
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
+    NAlert: typeof import('naive-ui')['NAlert']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
-    NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NForm: typeof import('naive-ui')['NForm']
-    NFormItem: typeof import('naive-ui')['NFormItem']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
-    NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSlider: typeof import('naive-ui')['NSlider']
-    NSwitch: typeof import('naive-ui')['NSwitch']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

package.json

@@ -70,6 +70,7 @@
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
+    "luhn-js": "^1.1.2",
     "marked": "^10.0.0",
     "mathjs": "^11.9.1",
     "mime-types": "^2.1.35",

pnpm-lock.yaml

@@ -110,6 +110,9 @@ dependencies:
   lodash:
     specifier: ^4.17.21
     version: 4.17.21
+  luhn-js:
+    specifier: ^1.1.2
+    version: 1.1.2
   marked:
     specifier: ^10.0.0
     version: 10.0.0
@@ -3360,7 +3363,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.11.1(vue@3.3.4)
+      '@vueuse/shared': 11.1.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,19 +3996,19 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.11.1(vue@3.3.4):
-    resolution: {integrity: sha512-LHpC8711VFZlDaYUXEBbFBCQ7GS3dVU9mjOhhMhXP6txTV4EhYQg/KGnQuvt/sPAtoUKq7VVUnL6mVtFoL42sA==}
+  /@vueuse/shared@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.10(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+  /@vueuse/shared@11.1.0(vue@3.3.4):
+    resolution: {integrity: sha512-YUtIpY122q7osj+zsNMFAfMTubGz0sn5QzE5gPzAIiCmtt2ha3uQUY1+JPyL4gRCTsLPX82Y9brNbo/aqlA91w==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.10(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -6772,6 +6775,10 @@ packages:
     dependencies:
       yallist: 4.0.0
 
+  /luhn-js@1.1.2:
+    resolution: {integrity: sha512-GdINoHY50s4Zkhvmt6Pss/8ZwVxIOLsMHuJCg6EDcT1heSt4hM2V+7aKCihemn8rI0n22+lxqomzgvWDzMyEuQ==}
+    dev: false
+
   /magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:

src/tools/index.ts

@@ -2,6 +2,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 emailNormalizer } from './email-normalizer';
+import { tool as luhnValidator } from './luhn-validator';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -182,7 +183,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+      luhnValidator,
+    ],
   },
 ];
 

src/tools/luhn-validator/index.ts

@@ -0,0 +1,12 @@
+import { Check } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Luhn Validator',
+  path: '/luhn-validator',
+  description: 'Check and generate key for identifier validated by a Luhn checknum',
+  keywords: ['luhn', 'credit-card', 'imei', 'identifier', 'validator'],
+  component: () => import('./luhn-validator.vue'),
+  icon: Check,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/luhn-validator/luhn-validator.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Luhn from 'luhn-js';
+import type { CKeyValueListItems } from '@/ui/c-key-value-list/c-key-value-list.types';
+
+const rawValue = ref('44540661970241257');
+const cleanedValue = computed(() => rawValue.value.replace(/[^\d]/g, ''));
+const isValid = computed(() => {
+  try {
+    return Luhn.isValid(cleanedValue.value);
+  }
+  catch (_) {
+    return false;
+  }
+});
+const luhnInfos = computed<CKeyValueListItems>(() => {
+  return [
+    {
+      label: 'Is valid ?',
+      value: isValid.value,
+    },
+    {
+      label: 'Luhn Key',
+      value: (isValid.value
+        ? cleanedValue.value.slice(-1)
+        : Luhn.generate(cleanedValue.value).slice(-1)) || '',
+    },
+    {
+      label: 'Value with Luhn Key',
+      value: (isValid.value
+        ? cleanedValue.value
+        : Luhn.generate(cleanedValue.value)) || '',
+    },
+  ];
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text v-model:value="rawValue" placeholder="Enter a 'Luhn validated' value..." />
+    <n-alert v-if="!isValid" type="error">
+      Invalid Luhn Key.
+      <input-copyable label="Probably correct" label-position="left" :value="Luhn.generate(cleanedValue)" disabled="true" />
+    </n-alert>
+
+    <c-card v-if="luhnInfos.length > 0" mt-5 title="Infos">
+      <c-key-value-list :items="luhnInfos" />
+    </c-card>
+  </div>
+</template>