dev: automated commit - 2026-03-08 11:35:37

frontend/src/components/AddZoneDialog.vue

@@ -17,6 +17,7 @@ import { toast } from 'vue-sonner'
 import { api } from '@/api/client'
 import type { Zone } from '@/api/types'
 import { ref, watch } from 'vue'
+import { Eye, EyeOff } from 'lucide-vue-next'
 import SpinnerLoader from '@/components/SpinnerLoader.vue'
 
 const props = defineProps<{
@@ -30,6 +31,7 @@ const emit = defineEmits<{
 }>()
 
 const submitting = ref(false)
+const showApiKey = ref(false)
 const isEdit = () => !!props.zone
 
 const schema = toTypedSchema(
@@ -114,7 +116,21 @@ const onSubmit = handleSubmit(async (values) => {
           <FormItem>
             <FormLabel>API Key</FormLabel>
             <FormControl>
-              <Input v-bind="field" type="password" placeholder="Cloudflare API token" />
+              <div class="relative">
+                <Input
+                  v-bind="field"
+                  :type="showApiKey ? 'text' : 'password'"
+                  placeholder="Cloudflare API token"
+                />
+                <button
+                  type="button"
+                  class="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+                  @click="showApiKey = !showApiKey"
+                >
+                  <Eye v-if="!showApiKey" class="h-4 w-4" />
+                  <EyeOff v-else class="h-4 w-4" />
+                </button>
+              </div>
             </FormControl>
             <FormMessage />
           </FormItem>