|
|
@@ -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>
|
