From 53df0a2e52b7e593273d83252f703ee353d1a875 Mon Sep 17 00:00:00 2001
From: liudonghua <liudonghua123@gmail.com>
Date: Wed, 12 Jun 2024 13:07:59 +0000
Subject: [PATCH] feat: add key encoding (text or hex string) for hmac

---
 src/tools/hmac-generator/hmac-generator.vue | 30 +++++++++++++++++----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/tools/hmac-generator/hmac-generator.vue b/src/tools/hmac-generator/hmac-generator.vue
index fda3988b..561a84a5 100644
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@@ -27,6 +27,7 @@ const algos = {
 } as const;
 
 type Encoding = keyof typeof enc | 'Bin';
+type KeyEncoding = 'Text' | 'Hex';
 
 function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
   if (encoding === 'Bin') {
@@ -39,17 +40,36 @@ const plainText = ref('');
 const secret = ref('');
 const hashFunction = ref<keyof typeof algos>('SHA256');
 const encoding = ref<Encoding>('Hex');
-const hmac = computed(() =>
-  formatWithEncoding(algos[hashFunction.value](plainText.value, secret.value), encoding.value),
-);
+const keyEncoding = ref<KeyEncoding>('Text');
+const hmac = computed(() => {
+  // normalize secret according to the key encoding
+  const key = keyEncoding.value === 'Text' ? secret.value : enc.Hex.parse(secret.value);
+  return formatWithEncoding(algos[hashFunction.value](plainText.value, key), encoding.value);
+});
 const { copy } = useCopy({ source: hmac });
 </script>
 
 <template>
   <div flex flex-col gap-4>
     <c-input-text v-model:value="plainText" multiline raw-text placeholder="Plain text to compute the hash..." rows="3" autosize autofocus label="Plain text to compute the hash" />
-    <c-input-text v-model:value="secret" raw-text placeholder="Enter the secret key..." label="Secret key" clearable />
-
+    <div flex gap-2>
+      <c-input-text v-model:value="secret" placeholder="Enter the secret key..." label="Secret key" raw-text clearable flex-1 />
+      <c-select
+        v-model:value="keyEncoding" label="Key encoding"
+        flex-1
+        placeholder="Select the key encoding..."
+        :options="[
+          {
+            label: 'Plain Text',
+            value: 'Text',
+          },
+          {
+            label: 'Hexadecimal Text',
+            value: 'Hex',
+          },
+        ]"
+      />
+    </div>
     <div flex gap-2>
       <c-select
         v-model:value="hashFunction" label="Hashing function"