feat(new tool): CRC calculator

Fix #815

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',