From e80c26136a9f8877415060d25f176981f0e084d2 Mon Sep 17 00:00:00 2001 From: Julien Froidefond Date: Mon, 24 Feb 2025 21:34:13 +0100 Subject: [PATCH] feat(pref): better form for Komga conf --- src/app/api/komga/test/route.ts | 10 +- src/app/settings/page.tsx | 1 + src/components/settings/ClientSettings.tsx | 226 +++++++++++++-------- 3 files changed, 146 insertions(+), 91 deletions(-) diff --git a/src/app/api/komga/test/route.ts b/src/app/api/komga/test/route.ts index cc9df9c..85540c2 100644 --- a/src/app/api/komga/test/route.ts +++ b/src/app/api/komga/test/route.ts @@ -1,14 +1,14 @@ import { NextResponse } from "next/server"; import { TestService } from "@/lib/services/test.service"; -import { ConfigDBService } from "@/lib/services/config-db.service"; -export async function POST() { +export async function POST(request: Request) { try { - const config = await ConfigDBService.getConfig(); + const { serverUrl, username, password } = await request.json(); + const authHeader = Buffer.from(`${username}:${password}`).toString("base64"); const { libraries } = await TestService.testConnection({ - serverUrl: config.url, - authHeader: config.authHeader, + serverUrl, + authHeader, }); return NextResponse.json({ diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index f0741cc..cd52a1d 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -19,6 +19,7 @@ export default async function SettingsPage() { url: mongoConfig.url, username: mongoConfig.username, userId: mongoConfig.userId, + authHeader: mongoConfig.authHeader, }; } diff --git a/src/components/settings/ClientSettings.tsx b/src/components/settings/ClientSettings.tsx index 37c3667..2bb94c9 100644 --- a/src/components/settings/ClientSettings.tsx +++ b/src/components/settings/ClientSettings.tsx @@ -15,6 +15,7 @@ interface KomgaConfig { username: string; userId: string; password?: string; + authHeader: string; } interface TTLConfigData { @@ -43,7 +44,10 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin serverUrl: initialConfig?.url || "", username: initialConfig?.username || "", password: initialConfig?.password || "", + authHeader: initialConfig?.authHeader || "", }); + const [isEditingConfig, setIsEditingConfig] = useState(false); + const [localInitialConfig, setLocalInitialConfig] = useState(initialConfig); const [ttlConfig, setTTLConfig] = useState( initialTTLConfig || { defaultTTL: 5, @@ -56,6 +60,10 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin ); const { preferences, updatePreferences } = usePreferences(); + const hasToShowEditForm = + localInitialConfig && config.serverUrl !== null && config.username !== null; + const shouldShowForm = !hasToShowEditForm || isEditingConfig; + const handleClearCache = async () => { setIsCacheClearing(true); setError(null); @@ -93,6 +101,12 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin setError(null); setSuccess(null); + const form = document.querySelector("form") as HTMLFormElement; + const formData = new FormData(form); + const serverUrl = formData.get("serverUrl") as string; + const username = formData.get("username") as string; + const password = formData.get("password") as string; + try { const response = await fetch("/api/komga/test", { method: "POST", @@ -100,9 +114,9 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin "Content-Type": "application/json", }, body: JSON.stringify({ - serverUrl: config.serverUrl, - username: config.username, - password: config.password, + serverUrl: serverUrl.trim(), + username, + password: password || config.password, }), }); @@ -142,6 +156,7 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin serverUrl: serverUrl.trim(), username, password, + authHeader: config.authHeader, }; try { @@ -162,19 +177,16 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin throw new Error(data.error || "Erreur lors de la sauvegarde de la configuration"); } - const komgaConfig = { - serverUrl: newConfig.serverUrl, - credentials: { - username: newConfig.username, - password: newConfig.password, - }, - }; + const savedConfig = await response.json(); setConfig(newConfig); - - // Émettre un événement pour notifier les autres composants - const configChangeEvent = new CustomEvent("komga-config-changed", { detail: komgaConfig }); - window.dispatchEvent(configChangeEvent); + setLocalInitialConfig({ + url: newConfig.serverUrl, + username: newConfig.username, + userId: savedConfig.userId, + authHeader: savedConfig.authHeader, + }); + setIsEditingConfig(false); toast({ title: "Configuration sauvegardée", @@ -389,84 +401,126 @@ export function ClientSettings({ initialConfig, initialTTLConfig }: ClientSettin

- {/* Formulaire de configuration */} -
-
-
- - + {!shouldShowForm ? ( +
+
+
+ +

{config.serverUrl}

+
+
+ +

{config.username}

+
+
+ +

••••••••

+
-
- - -
-
- - -
-
-
-
- + ) : ( +
+
+
+ + +
+
+ + +
+
+ + +
+
+
+ + + {initialConfig && ( + + )} +
+
+ )}