Add Kavita setting

website/app/components/KavitaModal.vue

@@ -0,0 +1,51 @@
+<template>
+    <UModal v-bind="$props" title="Connect Kavita">
+        <template #body>
+            <UFormField label="URL">
+                <UInput v-model="requestData.url" placeholder="https://" class="w-full" :disabled="busy" />
+            </UFormField>
+            <UFormField label="Username">
+                <UInput v-model="requestData.username" class="w-full" :disabled="busy" />
+            </UFormField>
+            <UFormField label="Password">
+                <UInput v-model="requestData.password" type="password" class="w-full" :disabled="busy" />
+            </UFormField>
+            <UButton
+                icon="i-lucide-link"
+                :class="['mt-2 float-right', success == false ? 'animate-[shake_0.2s] bg-error' : '']"
+                :loading="busy"
+                :disabled="busy || !allowSend"
+                @click="connect"
+                >Connect</UButton
+            >
+        </template>
+    </UModal>
+</template>
+
+<script setup lang="ts">
+import type { components } from '#open-fetch-schemas/api';
+type CreateLibraryConnectorRecord = components['schemas']['CreateLibraryConnectorRecord'];
+const { $api } = useNuxtApp();
+
+const requestData = ref<CreateLibraryConnectorRecord>({ libraryType: 'Kavita', url: '', username: '', password: '' });
+
+const allowSend = computed(() => requestData.value.url && requestData.value.username && requestData.value.password);
+
+const busy = ref<boolean>(false);
+const success = ref<boolean | undefined>(undefined);
+const emit = defineEmits<{ close: [boolean] }>();
+const connect = async () => {
+    busy.value = true;
+    try {
+        await $api('/v2/LibraryConnector', { method: 'PUT', body: requestData.value });
+        await refreshNuxtData(FetchKeys.Libraries.All);
+        emit('close', false);
+        success.value = true;
+    } catch {
+        success.value = false;
+        setTimeout(() => (success.value = undefined), 200);
+    } finally {
+        busy.value = false;
+    }
+};
+</script>