72 lines
1.6 KiB
Vue

<template>
<div class="space-y-4 max-w-md">
<FormKit
type="select"
v-model="auth.type"
:options="[
{ value: 'none', label: 'No Auth' },
{ value: 'bearer', label: 'Bearer Token' },
{ value: 'basic', label: 'Basic Auth' },
{ value: 'apiKey', label: 'API Key' }
]"
outer-class="!mb-0"
/>
<div v-if="auth.type === 'bearer'" class="space-y-3">
<FormKit
type="text"
v-model="auth.bearer"
placeholder="Token"
label="Bearer Token"
/>
</div>
<div v-if="auth.type === 'basic'" class="space-y-3">
<FormKit
type="text"
v-model="auth.basic.username"
placeholder="Username"
label="Username"
/>
<FormKit
type="password"
v-model="auth.basic.password"
placeholder="Password"
label="Password"
/>
</div>
<div v-if="auth.type === 'apiKey'" class="space-y-3">
<FormKit
type="text"
v-model="auth.apiKey.key"
placeholder="Key"
label="Key"
/>
<FormKit
type="text"
v-model="auth.apiKey.value"
placeholder="Value"
label="Value"
/>
<FormKit
type="select"
v-model="auth.apiKey.addTo"
:options="[
{ value: 'header', label: 'Header' },
{ value: 'query', label: 'Query Params' }
]"
label="Add to"
/>
</div>
</div>
</template>
<script setup>
const props = defineProps({
auth: {
type: Object,
required: true
}
})
</script>