Add htaccess generator tool

package.json

@@ -11,12 +11,15 @@
     "@monaco-editor/loader": "^1.4.0",
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.0",
+    "bcryptjs": "^2.4.3",
     "cronstrue": "^2.50.0",
     "easyqrcodejs": "^4.6.1",
+    "md5": "^2.3.0",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
     "pinia": "^2.1.7",
     "postcss": "^8.4.39",
+    "sha1": "^1.1.1",
     "sql-formatter": "^15.3.2",
     "tailwindcss": "^3.4.4",
     "vue": "^3.4.31",

src/components/Sidebar.vue

@@ -45,6 +45,7 @@ export default {
         'qr_code': 'QR code',
         'unix_timestamp': 'Unix timestamp',
         'sed_generator': 'Sed generator',
+        'htaccess_generator': '.htaccess generator',
       },
       'Strings': {
         'fix_ru_en_keyboard': 'Fix ru-en keyboard',

src/router/index.js

@@ -56,6 +56,11 @@ const router = createRouter({
 			name: 'sed_generator',
 			component: () => import('../views/general/SedGenerator.vue'),
 		},
+		{
+			path: '/htaccess_generator',
+			name: 'htaccess_generator',
+			component: () => import('../views/general/HtaccessGenerator.vue'),
+		},
 
 		/**
 		 * String manipulation

src/views/general/HtaccessGenerator.vue

@@ -0,0 +1,87 @@
+<template>
+  <h2 class="tool-title">.htaccess User Entry Generator</h2>
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="username">Username</label>
+    <input id="username" class="input" v-model="toolData.username" v-on:keyup="result" type="text">
+  </div>
+
+  <div class="input-group">
+    <label for="password">Password</label>
+    <input id="password" class="input" v-model="toolData.password" v-on:keyup="result" type="text">
+  </div>
+
+  <div class="input-group">
+    <label for="algorithm">Algorithm</label>
+
+    <div>
+      <select id="algorithm" v-model="toolData.algorithm" v-on:change="result">
+        <option value="MD5">MD5</option>
+        <option value="SHA1">SHA1</option>
+        <option value="BCRYPT">BCRYPT</option>
+      </select>
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5">
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor name="result" language="text" :value="toolResult"></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+import bcrypt from 'bcryptjs';
+import md5 from 'md5';
+import sha1 from 'sha1';
+
+export default {
+  components: {
+    MonacoEditor
+  },
+  data() {
+    return {
+      toolData: {
+        username: "",
+        password: "",
+        algorithm: "BCRYPT",
+      },
+      toolResult: "",
+    };
+  },
+  mounted() {
+    this.result();
+  },
+  methods: {
+    result() {
+      if (!(this.toolData.username && this.toolData.password)) {
+        this.toolResult = '';
+        return;
+      }
+
+      let encryptedPassword = '';
+
+      switch (this.toolData.algorithm) {
+        case 'MD5':
+          encryptedPassword = md5(this.toolData.password);
+          break;
+        case 'SHA1':
+          encryptedPassword = sha1(this.toolData.password);
+          break;
+        case 'BCRYPT':
+          encryptedPassword = bcrypt.hashSync(this.toolData.password, 10); // 10 salt rounds
+          break;
+      }
+
+      this.toolResult = `${this.toolData.username}:${encryptedPassword}`;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+
+</style>