feat(new tool): htpasswd generator

Fix CorentinTh#430 and CorentinTh#807

Author: sharevb

package.json

@@ -46,6 +46,7 @@
     "@vueuse/core": "^10.3.0",
     "@vueuse/head": "^1.0.0",
     "@vueuse/router": "^10.0.0",
+    "apache-md5": "^1.1.8",
     "bcryptjs": "^2.4.3",
     "change-case": "^4.1.2",
     "colord": "^2.9.3",

pnpm-lock.yaml

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { hashSync } from 'bcryptjs';
+import md5 from 'apache-md5';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const username = ref('');
+const password = ref('');
+const hashMethod = ref('bcrypt');
+
+const htpasswd = computed(() => {
+  if (username.value === '' || password.value === '') {
+    return '# username and password must not be empty';
+  }
+  let hash;
+  if (hashMethod.value === 'md5') {
+    hash = md5(password.value);
+  }
+  else {
+    hash = hashSync(password.value, 10);
+  }
+  return `${username.value}:${hash}`;
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="username"
+      label="Username"
+      placeholder="Your username..."
+      clearable raw-text mb-5
+    />
+    <c-input-text
+      v-model:value="password"
+      label="Password"
+      placeholder="Your password..."
+      clearable
+      raw-text
+      mb-2
+      type="password"
+    />
+
+    <c-select
+      v-model:value="hashMethod"
+      label="Hash method:"
+      :options="['bcrypt', 'md5']"
+    />
+
+    <n-divider />
+
+    <n-form-item label="htpasswd content:">
+      <TextareaCopyable :value="htpasswd" />
+    </n-form-item>
+  </div>
+</template>

src/tools/htpasswd-generator/htpasswd-generator.vue

@@ -0,0 +1,12 @@
+import { PasswordRound } from '@vicons/material';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Htpasswd/htaccess generator',
+  path: '/htpasswd-generator',
+  description: 'htpassword/htaccess user/password generator',
+  keywords: ['htpasswd', 'htaccess', 'bcrypt', 'password'],
+  component: () => import('./htpasswd-generator.vue'),
+  icon: PasswordRound,
+  createdAt: new Date('2024-02-20'),
+});

src/tools/htpasswd-generator/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 textToUnicode } from './text-to-unicode';
+import { tool as htpasswdGenerator } from './htpasswd-generator';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -113,6 +114,7 @@ export const toolsByCategory: ToolCategory[] = [
       urlParser,
       deviceInformation,
       basicAuthGenerator,
+      htpasswdGenerator,
       metaTagGenerator,
       otpCodeGeneratorAndValidator,
       mimeTypes,