feat: add Hashing form page

libs/components/Dashboard/Settings/Forms/FileSystemForm.vue

@@ -20,7 +20,7 @@
           <div class="md:col-span-2">
             <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
               <div class="sm:col-span-3">
-                <label for="type" class="block text-sm font-medium leading-6 text-gray-900">Charset</label>
+                <label for="type" class="block text-sm font-medium leading-6 text-gray-900">Default</label>
                 <div class="mt-2">
                   <select id="type" name="type" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
                     <option selected>

libs/components/Dashboard/Settings/Forms/HashingForm.vue

@@ -0,0 +1,119 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <form>
+    <main class="border-b border-gray-900/10">
+      <!-- Settings forms -->
+      <div class="divide-y divide-gray-900/10">
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              Default Hashing Settings
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your default Hashing settings
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="type" class="block text-sm font-medium leading-6 text-gray-900">Driver</label>
+                <div class="mt-2">
+                  <select id="type" name="type" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:max-w-xs sm:text-sm sm:leading-6">
+                    <option selected>
+                      argon2
+                    </option>
+                    <option>bcrypt</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              Bcrypt Hashing
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your Bcrypt Hashing configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">rounds</label>
+                <div class="mt-2">
+                  <input id="local-driver" type="text" name="local-driver" value="10" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Cost</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="4" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="grid max-w-7xl grid-cols-1 gap-x-8 gap-y-10 py-16 md:grid-cols-3">
+          <div>
+            <h2 class="text-base font-semibold leading-7 text-gray-900 dark:text-gray-100">
+              Argon2 Hashing
+            </h2>
+            <p class="mt-1 text-sm leading-6 text-gray-600">
+              Update your Argon2 Hashing configurations
+            </p>
+          </div>
+
+          <div class="md:col-span-2">
+            <div class="w-full grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+              <div class="sm:col-span-3">
+                <label for="local-driver" class="block text-sm font-medium leading-6 text-gray-900">Memory</label>
+                <div class="mt-2">
+                  <input id="local-driver" type="text" name="local-driver" value="65596" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Threads</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="1" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+
+              <div class="sm:col-span-3">
+                <label for="local-root" class="block text-sm font-medium leading-6 text-gray-900">Time</label>
+                <div class="mt-2">
+                  <input id="local-root" type="text" name="local-root" value="1" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6">
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </main>
+    <div class="mt-6 flex items-center justify-end gap-x-6">
+      <button type="button" class="text-sm font-semibold leading-6 text-gray-900">
+        Cancel
+      </button>
+      <Button
+        type="submit"
+        class="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+      >
+        Save
+      </Button>
+    </div>
+  </form>
+</template>
+
+<style scoped>
+
+</style>

libs/components/Dashboard/Settings/SettingsFormManager.vue

@@ -9,6 +9,7 @@ import DatabaseForm from './Forms/DatabaseForm.vue'
 import DNSForm from './Forms/DNSForm.vue'
 import EmailForm from './Forms/EmailForm.vue'
 import FileSystemForm from './Forms/FileSystemForm.vue'
+import HashingForm from './Forms/HashingForm.vue'
 
 const props = defineProps({
   name: String,
@@ -128,6 +129,7 @@ const pageTitle = computed < String > (() => options.find(option => option.key =
         <template v-else-if="name === 'dns'"><DNSForm /></template>
         <template v-else-if="name === 'email'"><EmailForm /></template>
         <template v-else-if="name === 'file-system'"><FileSystemForm /></template>
+        <template v-else-if="name === 'hashing'"><HashingForm /></template>
         <template v-else>
           <div class="text-center">
             <div class="i-heroicons-cog-8-tooth text-gray-400 w-12 h-12 dark:text-gray-200 transition-all duration-150 ease-in-out" />