1 files changed, 48 insertions, 0 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>