feat(new tool): CRC calculator

Fix #815

components.d.ts

@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
     ColoredCard: typeof import('./src/components/ColoredCard.vue')['default']
     CommandPalette: typeof import('./src/modules/command-palette/command-palette.vue')['default']
     CommandPaletteOption: typeof import('./src/modules/command-palette/components/command-palette-option.vue')['default']
+    CrcCalculator: typeof import('./src/tools/crc-calculator/crc-calculator.vue')['default']
     CrontabGenerator: typeof import('./src/tools/crontab-generator/crontab-generator.vue')['default']
     CSelect: typeof import('./src/ui/c-select/c-select.vue')['default']
     'CSelect.demo': typeof import('./src/ui/c-select/c-select.demo.vue')['default']
@@ -166,6 +167,7 @@ declare module '@vue/runtime-core' {
     NProgress: typeof import('naive-ui')['NProgress']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSlider: typeof import('naive-ui')['NSlider']
+    NSpin: typeof import('naive-ui')['NSpin']
     NStatistic: typeof import('naive-ui')['NStatistic']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']

package.json

@@ -51,6 +51,7 @@
     "colord": "^2.9.3",
     "composerize-ts": "^0.6.2",
     "country-code-lookup": "^0.1.0",
+    "crc": "^4.3.2",
     "cron-validator": "^1.3.1",
     "cronstrue": "^2.26.0",
     "crypto-js": "^4.1.1",

pnpm-lock.yaml

@@ -53,6 +53,9 @@ dependencies:
   country-code-lookup:
     specifier: ^0.1.0
     version: 0.1.0
+  crc:
+    specifier: ^4.3.2
+    version: 4.3.2
   cron-validator:
     specifier: ^1.3.1
     version: 1.3.1
@@ -3374,7 +3377,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.6.1(vue@3.3.4)
+      '@vueuse/shared': 10.10.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -4007,19 +4010,19 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
+  /@vueuse/shared@10.10.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+    resolution: {integrity: sha512-2aW33Ac0Uk0U+9yo3Ypg9s5KcR42cuehRWl7vnUHadQyFvCktseyxxEPBi1Eiq4D2yBGACOnqLZpx1eMc7g5Og==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.8(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@10.6.1(vue@3.3.4):
+  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-TECVDTIedFlL0NUfHWncf3zF9Gc4VfdxfQc8JFwoVZQmxpONhLxFrlm0eHQeidHj4rdTPL3KXJa0TZCk1wnc5Q==}
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -4640,6 +4643,16 @@ packages:
     resolution: {integrity: sha512-IOI66HEG+8bXfWPy+sTzuN7161vmDZOHg1wgIPFf3WfD73FeLajnn6C+fnxOIa9RL1WRBDMXQQWW/FOaOYaQ3w==}
     dev: false
 
+  /crc@4.3.2:
+    resolution: {integrity: sha512-uGDHf4KLLh2zsHa8D8hIQ1H/HtFQhyHrc0uhHBcoKGol/Xnb+MPYfUMw7cvON6ze/GUESTudKayDcJC5HnJv1A==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      buffer: '>=6.0.3'
+    peerDependenciesMeta:
+      buffer:
+        optional: true
+    dev: false
+
   /crelt@1.0.6:
     resolution: {integrity: sha512-VQ2MBenTq1fWZUH9DJNGti7kKv6EeAuYr3cLwxUWhIu1baTaXh4Ib5W2CqHVqib4/MqbYGJqiL3Zb8GJZr3l4g==}
     dev: false
@@ -9200,8 +9213,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
+  /vue-demi@0.14.8(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9497,6 +9510,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

src/composable/queryParams.ts

@@ -1,7 +1,8 @@
 import { useRouteQuery } from '@vueuse/router';
 import { computed } from 'vue';
+import { useStorage } from '@vueuse/core';
 
-export { useQueryParam };
+export { useQueryParam, useQueryParamOrStorage };
 
 const transformers = {
   number: {
@@ -33,3 +34,31 @@ function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue:
     },
   });
 }
+
+function useQueryParamOrStorage<T>({ name, storageName, defaultValue }: { name: string; storageName: string; defaultValue?: T }) {
+  const type = typeof defaultValue;
+  const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
+
+  const storageRef = useStorage(storageName, defaultValue);
+  const storageDefaultValue = storageRef.value ?? defaultValue;
+
+  const proxy = useRouteQuery(name, transformer.toQuery(storageDefaultValue as never));
+
+  const ref = computed<T>({
+    get() {
+      return transformer.fromQuery(proxy.value) as unknown as T;
+    },
+    set(value) {
+      proxy.value = transformer.toQuery(value as never);
+    },
+  });
+
+  watch(
+    ref,
+    (newValue) => {
+      storageRef.value = newValue;
+    },
+  );
+
+  return ref;
+}

src/tools/crc-calculator/crc-calculator.vue

@@ -0,0 +1,168 @@
+<script setup lang="ts">
+import type { lib } from 'crypto-js';
+import { enc } from 'crypto-js';
+
+import crc from 'crc';
+import InputCopyable from '../../components/InputCopyable.vue';
+import { convertHexToBin } from '../hash-text/hash-text.service';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
+const text = ref('');
+const file = ref<File | null>(null);
+
+const defaultCRCValues = {
+  crc1: '',
+  crc8: '',
+  crc81wire: '',
+  crc8dvbs2: '',
+  crc16: '',
+  crc16ccitt: '',
+  crc16modbus: '',
+  crc16kermit: '',
+  crc16xmodem: '',
+  crc24: '',
+  crc32: '',
+  crc32mpeg: '',
+  crcjam: '',
+};
+type AlgoNames = keyof typeof defaultCRCValues;
+
+function getCRCs(content: Uint8Array | string) {
+  return {
+    crc1: crc.crc1(content).toString(16),
+    crc8: crc.crc8(content).toString(16),
+    crc81wire: crc.crc81wire(content).toString(16),
+    crc8dvbs2: crc.crc8dvbs2(content).toString(16),
+    crc16: crc.crc16(content).toString(16),
+    crc16ccitt: crc.crc16ccitt(content).toString(16),
+    crc16modbus: crc.crc16modbus(content).toString(16),
+    crc16kermit: crc.crc16kermit(content).toString(16),
+    crc16xmodem: crc.crc16xmodem(content).toString(16),
+    crc24: crc.crc24(content).toString(16),
+    crc32: crc.crc32(content).toString(16),
+    crc32mpeg: crc.crc32mpeg2(content).toString(16),
+    crcjam: crc.crcjam(content).toString(16),
+  };
+}
+const hashes = ref(defaultCRCValues);
+async function onUpload(uploadedFile: File) {
+  status.value = 'processing';
+
+  file.value = uploadedFile;
+  const buffer = await uploadedFile.arrayBuffer();
+
+  text.value = '';
+  try {
+    hashes.value = getCRCs(new Uint8Array(buffer));
+    status.value = 'done';
+  }
+  catch (e) {
+    status.value = 'error';
+  }
+}
+
+const algoWasmNames = Object.keys(defaultCRCValues) as AlgoNames[];
+type Encoding = keyof typeof enc | 'Bin';
+
+const encoding = useQueryParamOrStorage<Encoding>({ defaultValue: 'Hex', storageName: 'hash-text:encoding', name: 'encoding' });
+
+function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
+  if (encoding === 'Bin') {
+    return convertHexToBin(words.toString(enc.Hex));
+  }
+
+  return words.toString(enc[encoding]);
+}
+
+const CRCValues = computed(() => withDefaultOnError(() => {
+  const encodingValue = encoding.value;
+  const hashesValue = hashes.value;
+
+  const ret = defaultCRCValues;
+  for (const algo of algoWasmNames) {
+    ret[algo] = formatWithEncoding(enc.Hex.parse(hashesValue[algo]), encodingValue);
+  }
+  return ret;
+}, defaultCRCValues));
+
+watch(text,
+  (_, newValue) => {
+    if (newValue === ''){
+      return;
+    }
+
+    file.value = null;
+    hashes.value = getCRCs(newValue);
+    status.value = 'done';
+  },
+);
+</script>
+
+<template>
+  <div>
+    <c-card>
+      <c-file-upload
+        title="Drag and drop a file here, or click to select a file"
+        @file-upload="onUpload"
+      />
+
+      <p>OR</p>
+
+      <c-input-text
+        v-model:value="text"
+        multiline raw-text
+        placeholder="Paste string to CRC..." rows="3"
+        autosize autofocus label="Your text to CRC:"
+      />
+
+      <n-divider />
+
+      <c-select
+        v-model:value="encoding"
+        mb-4
+        label="Digest encoding"
+        :options="[
+          {
+            label: 'Binary (base 2)',
+            value: 'Bin',
+          },
+          {
+            label: 'Hexadecimal (base 16)',
+            value: 'Hex',
+          },
+          {
+            label: 'Base64 (base 64)',
+            value: 'Base64',
+          },
+          {
+            label: 'Base64url (base 64 with url safe chars)',
+            value: 'Base64url',
+          },
+        ]"
+      />
+    </c-card>
+
+    <div mt-3 flex justify-center>
+      <c-alert v-if="status === 'error'" type="error">
+        An error occured hashing file.
+      </c-alert>
+      <n-spin
+        v-if="status === 'processing'"
+        size="small"
+      />
+    </div>
+
+    <c-card v-if="status === 'done'" :title="file === null ? 'CRC of text' : `CRC of ${file?.name}`">
+      <div v-for="algo in algoWasmNames" :key="algo" style="margin: 5px 0">
+        <n-input-group>
+          <n-input-group-label style="flex: 0 0 120px">
+            {{ algo.toUpperCase() }}
+          </n-input-group-label>
+          <InputCopyable :value="CRCValues[algo]" readonly />
+        </n-input-group>
+      </div>
+    </c-card>
+  </div>
+</template>

src/tools/crc-calculator/index.ts

@@ -0,0 +1,24 @@
+import { EyeOff } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'CRC calculator',
+  path: '/crc-calculator',
+  description: 'Compute text or file CRC (CRC1, CRC8, CRC8 1-Wire, CRC8 DVB-S2, CRC16, CRC16 CCITT, CRC16 Modbus, CRC16 Kermit, CRC16 XModem, CRC24, CRC32, CRC32 MPEG-2, CRCJAM)',
+  keywords: ['crc', 'checksum', 'crc1',
+    'crc8',
+    'crc8 1-wire',
+    'crc8 dvb-s2',
+    'crc16',
+    'crc16 ccitt',
+    'crc16 modbus',
+    'crc16 kermit',
+    'crc16 xmodem',
+    'crc24',
+    'crc32',
+    'crc32 mpeg-2',
+    'crcjam'],
+  component: () => import('./crc-calculator.vue'),
+  icon: EyeOff,
+  createdAt: new Date('2024-05-11'),
+});

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 crcCalculator } from './crc-calculator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -79,7 +80,20 @@ import { tool as xmlFormatter } from './xml-formatter';
 export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Crypto',
-    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, ulidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator, passwordStrengthAnalyser, pdfSignatureChecker],
+    components: [
+      tokenGenerator,
+      hashText,
+      crcCalculator,
+      bcrypt,
+      uuidGenerator,
+      ulidGenerator,
+      cypher,
+      bip39,
+      hmacGenerator,
+      rsaKeyPairGenerator,
+      passwordStrengthAnalyser,
+      pdfSignatureChecker,
+    ],
   },
   {
     name: 'Converter',