feat(new tool): Credit Card Checker and Info

Author: sharevb

package.json

@@ -119,6 +119,7 @@
     "countries-db": "^1.2.0",
     "country-code-lookup": "^0.1.3",
     "crc": "^4.3.2",
+    "creditcard": "^0.1.3",
     "creditcard-generator": "^0.0.7",
     "cron-parser": "^4.9.0",
     "cron-validator": "^1.3.1",

pnpm-lock.yaml

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { parse } from 'creditcard';
+import { useQueryParam } from '@/composable/queryParams';
+
+const cardNumber = useQueryParam({ tool: 'credit-card-validator', name: 'number', defaultValue: '' });
+const parsed = computed(() => {
+  if (!cardNumber.value) {
+    return null;
+  }
+  return parse(cardNumber.value);
+});
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-input-text
+      v-model:value="cardNumber"
+      label="Credit Card Number:"
+      label-position="left"
+      placeholder="e.g. 4111 1111 1111 1111"
+      mb-2
+    />
+
+    <n-alert v-if="parsed && !parsed.validates" type="error">
+      Invlid Credit Card Number
+    </n-alert>
+    <n-card v-if="parsed && parsed.validates" title="Credit Card Number Info">
+      <input-copyable label="Formatted:" label-position="left" label-width="150px" mb-1 :value="parsed.formatted" />
+      <input-copyable label="PAN Truncated:" label-position="left" label-width="150px" mb-1 :value="parsed.truncate" />
+      <input-copyable label="Scheme:" label-position="left" label-width="150px" mb-1 :value="parsed.scheme || 'Unknown'" />
+      <input-copyable label="Major Industry Identifier:" mb-1 :value="parsed.mii" />
+      <input-copyable label="Issuer Identifier Number:" mb-1 :value="parsed.iin" />
+      <input-copyable label="CVV Length:" label-position="left" label-width="150px" mb-1 :value="parsed.cvv" />
+    </n-card>
+  </div>
+</template>

src/tools/credit-card-checker/credit-card-checker.vue

@@ -0,0 +1,11 @@
+declare module 'creditcard' {
+    export function parse(creditCardNumber: string): {
+        formatted: string
+        truncate: string
+        scheme: string
+        mii: string
+        iin: string
+        validates: boolean
+        cvv: number
+    }
+}

src/tools/credit-card-checker/creditcard.d.ts

@@ -0,0 +1,13 @@
+import { CreditCard } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Credit Card Checker',
+  path: '/credit-card-checker',
+  description: 'Check a Credit Card number for validity',
+  keywords: ['credit', 'card', 'checker'],
+  component: () => import('./credit-card-checker.vue'),
+  icon: CreditCard,
+  createdAt: new Date('2025-10-03'),
+  category: 'Data',
+});