feat(new-tool): added a basic auth generator

3 files changed, 71 insertions, 1 deletions

diff --git a/src/tools/basic-auth-generator/basic-auth-generator.vue b/src/tools/basic-auth-generator/basic-auth-generator.vue
new file mode 100644
index 0000000..8769fb0
--- /dev/null
+++ b/src/tools/basic-auth-generator/basic-auth-generator.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <n-form-item label="Username">
+      <n-input v-model:value="username" placeholder="Your username..." clearable />
+    </n-form-item>
+    <n-form-item label="Password">
+      <n-input
+        v-model:value="password"
+        placeholder="Your password..."
+        type="password"
+        show-password-on="click"
+        clearable
+      />
+    </n-form-item>
+
+    <br />
+    <n-card>
+      <n-statistic label="Authorization header:" class="header">
+        <n-scrollbar x-scrollable style="max-width: 550px; margin-bottom: -10px; padding-bottom: 10px" trigger="none">
+          {{ header }}
+        </n-scrollbar>
+      </n-statistic>
+    </n-card>
+    <br />
+    <n-space justify="center">
+      <n-button secondary @click="copy">Copy header</n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { computed, ref } from 'vue';
+
+const username = ref('');
+const password = ref('');
+const header = computed(() => `Authorization: Basic ${window.btoa(`${username.value}:${password.value}`)}`);
+
+const { copy } = useCopy({ source: header, text: 'Header copied to the clipboard' });
+</script>
+
+<style lang="less" scoped>
+::v-deep(.n-statistic-value__content) {
+  font-family: monospace;
+  font-size: 17px !important;
+  white-space: nowrap;
+}
+</style>
diff --git a/src/tools/basic-auth-generator/index.ts b/src/tools/basic-auth-generator/index.ts
new file mode 100644
index 0000000..3138b50
--- /dev/null
+++ b/src/tools/basic-auth-generator/index.ts
@@ -0,0 +1,21 @@
+import { PasswordRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Basic auth generator',
+  path: '/basic-auth-generator',
+  description: 'Generate a base64 basic auth header from an username and a password.',
+  keywords: [
+    'basic',
+    'auth',
+    'generator',
+    'username',
+    'password',
+    'base64',
+    'authentication',
+    'header',
+    'authorization',
+  ],
+  component: () => import('./basic-auth-generator.vue'),
+  icon: PasswordRound,
+});
diff --git a/src/tools/index.ts b/src/tools/index.ts
index 98bb620..18c04b7 100644
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -2,6 +2,7 @@ import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './tool';
 
 import { tool as base64Converter } from './base64-converter';
+import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as bcrypt } from './bcrypt';
 import { tool as bip39 } from './bip39-generator';
 import { tool as caseConverter } from './case-converter';
@@ -50,7 +51,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Web',
     icon: LockOpen,
-    components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation],
+    components: [urlEncoder, htmlEntities, qrCodeGenerator, urlParser, deviceInformation, basicAuthGenerator],
   },
   {
     name: 'Development',