feat(new tool): Base64 Hex Converter

Fix CorentinTh#1505

Author: sharevb

src/tools/base64-hex-converter/base64-hex-converter.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import Base64 from 'js-base64';
+import hexArray from 'hex-array';
+import { useCopy } from '@/composable/copy';
+import { isValidBase64 } from '@/utils/base64';
+
+const textInput = ref('');
+const base64Output = computed(() => {
+  try {
+    return Base64.fromUint8Array(hexArray.fromString(textInput.value));
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+const { copy: copyTextBase64 } = useCopy({ source: base64Output, text: 'Base64 Hex Array copied to the clipboard' });
+
+const uppercase = ref(false);
+const grouping = ref(0);
+const rowlength = ref(0);
+
+const base64Input = ref('');
+const textOutput = computed(() => {
+  try {
+    return hexArray.toString(Base64.toUint8Array(base64Input.value), {
+
+    });
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+},
+);
+const { copy: copyText } = useCopy({ source: textOutput, text: 'Hex Array copied to the clipboard' });
+const b64ValidationRules = [
+  {
+    message: 'Invalid base64 string',
+    validator: (value: string) => isValidBase64(value.trim()),
+  },
+];
+</script>
+
+<template>
+  <c-card title="Hex Array to Base64">
+    <c-input-text
+      v-model:value="textInput"
+      multiline
+      placeholder="Put your Hex Array here..."
+      rows="5"
+      label="Hex Array to encode"
+      raw-text
+      mb-5
+    />
+
+    <c-input-text
+      label="Base64 of Hex Array"
+      :value="base64Output"
+      multiline
+      readonly
+      placeholder="The base64 encoding of your Hex Array will be here"
+      rows="5"
+      mb-5
+    />
+
+    <div flex justify-center>
+      <c-button @click="copyTextBase64()">
+        Copy base64
+      </c-button>
+    </div>
+  </c-card>
+
+  <c-card title="Base64 to Hex Array">
+    <n-form-item label="Uppercase" label-placement="left">
+      <n-switch v-model:value="uppercase" />
+    </n-form-item>
+    <n-form-item label="Group by" label-placement="left">
+      <n-input-number v-model:value="grouping" :min="0" /> digits (0 = no grouping)
+    </n-form-item>
+    <n-form-item label="Split as rows by" label-placement="left">
+      <n-input-number v-model:value="rowlength" :min="0" /> group of digits (0 = no rows)
+    </n-form-item>
+    <c-input-text
+      v-model:value="base64Input"
+      multiline
+      placeholder="Your base64 Hex Array..."
+      rows="5"
+      :validation-rules="b64ValidationRules"
+      label="Base64 Hex Array to decode"
+      mb-5
+    />
+
+    <c-input-text
+      v-model:value="textOutput"
+      label="Decoded Hex Array"
+      placeholder="The decoded Hex Array will be here"
+      multiline
+      rows="5"
+      readonly
+      mb-5
+    />
+
+    <div flex justify-center>
+      <c-button @click="copyText()">
+        Copy decoded Hex Array
+      </c-button>
+    </div>
+  </c-card>
+</template>

src/tools/base64-hex-converter/index.ts

@@ -0,0 +1,12 @@
+import { FileDigit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Base64 Hex array encoder/decoder',
+  path: '/base64-hex-converter',
+  description: 'Simply encode and decode Hex array into a their base64 representation.',
+  keywords: ['base64', 'converter', 'conversion', 'web', 'data', 'format', 'atob', 'btoa', 'hex'],
+  component: () => import('./base64-hex-converter.vue'),
+  icon: FileDigit,
+  createdAt: new Date('2025-02-09'),
+});

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 base64HexConverter } from './base64-hex-converter';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -101,6 +102,7 @@ export const toolsByCategory: ToolCategory[] = [
       romanNumeralConverter,
       base64StringConverter,
       base64FileConverter,
+	  base64HexConverter,
       colorConverter,
       caseConverter,
       textToNatoAlphabet,