feat: Add password generator

apps/app/app/components/project/CreateVariables.vue

@@ -191,6 +191,10 @@ const autoUppercase = useCookie<boolean>('autoUppercase', {
   watch: true,
   default: () => true,
 })
+
+const handlePasswordGenerated = (password: string, index: number) => {
+  variablesInput.value.variables[index].value = password
+}
 </script>
 
 <template>
@@ -271,14 +275,16 @@ const autoUppercase = useCookie<boolean>('autoUppercase', {
                 <ProjectVarPrefix v-model="variablesInput.variables[variable - 1]!.key" class="w-full">
                   <UInput v-model="variablesInput.variables[variable - 1]!.key" required class="w-full" placeholder="e.g. API_KEY" />
                 </ProjectVarPrefix>
-                <UTextarea
-                  v-model="variablesInput.variables[variable - 1]!.value"
-                  required
-                  :rows="1"
-                  class="w-full"
-                  autoresize
-                  placeholder="e.g. 123456"
-                />
+                <ProjectPasswordGenerator @password-generated="handlePasswordGenerated($event, variable - 1)">
+                  <UTextarea
+                    v-model="variablesInput.variables[variable - 1]!.value"
+                    required
+                    :rows="1"
+                    class="w-full"
+                    autoresize
+                    placeholder="e.g. 123456"
+                  />
+                </ProjectPasswordGenerator>
                 <UButton label="Remove" color="red" @click="removeVariable(variable - 1)" />
               </div>
             </div>

apps/app/app/components/project/PasswordGenerator.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+const length = ref(12)
+const includeSymbols = ref(true)
+const isOpen = ref(false)
+const virtualElement = ref({ getBoundingClientRect: () => ({}) })
+
+const emit = defineEmits(['passwordGenerated'])
+
+function generatePassword() {
+  const charset = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'
+  const symbols = '!@#$%^&*()_+~`|}{[]:;?><,./-='
+  let characters = charset
+  if (includeSymbols.value) {
+    characters += symbols
+  }
+
+  let password = ''
+  for (let i = 0; i < length.value; i++) {
+    const randomIndex = Math.floor(Math.random() * characters.length)
+    password += characters[randomIndex]
+  }
+
+  emit('passwordGenerated', password)
+}
+
+function onContextMenu(event: MouseEvent) {
+  const top = event.clientY
+  const left = event.clientX
+
+  virtualElement.value.getBoundingClientRect = () => ({
+    width: 0,
+    height: 0,
+    top,
+    left
+  })
+
+  isOpen.value = true
+}
+</script>
+
+<template>
+  <div class="w-full" @contextmenu.prevent="onContextMenu">
+    <div>
+      <slot />
+    </div>
+
+    <UContextMenu v-model="isOpen" :virtual-element>
+      <UCard :ui="{ base: 'w-56' }">
+        <template #header>
+          <h3 class="text-sm font-semibold">
+            Generate Password
+          </h3>
+        </template>
+        <form class="flex flex-col gap-4" @submit.prevent="generatePassword">
+          <UFormGroup :label="`Password Length (${length})`">
+            <URange v-model="length" :min="5" :max="25" />
+          </UFormGroup>
+          <UCheckbox v-model="includeSymbols" label="Include Symbols" />
+          <UDivider />
+          <UButton label="Generate" type="submit" />
+        </form>
+      </UCard>
+    </UContextMenu>
+  </div>
+</template>