Merge branch 'feat/luhn-checker' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -144,6 +144,7 @@
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
+    "luhn-js": "^1.1.2",
     "markdown-it": "^14.0.0",
     "lodash.defaultsdeep": "^4.6.1",
     "lodash.flattendeep": "^4.4.0",

pnpm-lock.yaml

@@ -24,6 +24,7 @@ import { tool as jsonToPhpArray } from './json-to-php-array';
 import { tool as phpArrayToJson } from './php-array-to-json';
 import { tool as jsonSizeAnalyzer } from './json-size-analyzer';
 import { tool as jsonToCsharp } from './json-to-csharp';
+import { tool as luhnValidator } from './luhn-validator';
 
 import { tool as cssXpathConverter } from './css-xpath-converter';
 import { tool as cssSelectorsMemo } from './css-selectors-memo';
@@ -316,7 +317,11 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Data',
-    components: [phoneParserAndFormatter, ibanValidatorAndParser],
+    components: [
+      phoneParserAndFormatter,
+      ibanValidatorAndParser,
+      luhnValidator,
+    ],
   },
 ];
 

src/tools/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/index.ts

@@ -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>