diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx index 5c4a6f8..de1d660 100644 --- a/frontend/src/pages/Settings.tsx +++ b/frontend/src/pages/Settings.tsx @@ -30,6 +30,7 @@ export function Settings() { const [form, setForm] = useState>({}) const [showApiKey, setShowApiKey] = useState(false) + const [showUnsplashKey, setShowUnsplashKey] = useState(false) const [saved, setSaved] = useState(false) // Popola il form quando i settings arrivano dal backend @@ -37,6 +38,7 @@ export function Settings() { if (settings) { setForm({ api_key: '', // Non pre-populare l'API key (mascherata) + unsplash_api_key: '', // Non pre-populare la Unsplash key (mascherata) llm_model: settings.llm_model, nicchie_attive: settings.nicchie_attive, lingua: settings.lingua, @@ -62,16 +64,20 @@ export function Settings() { async function handleSubmit(e: React.FormEvent) { e.preventDefault() - // Prepara il payload: non inviare api_key se vuota (evita sovrascrittura) + // Prepara il payload: non inviare api_key/unsplash_api_key se vuote (evita sovrascrittura) const payload: Partial = { ...form } if (!payload.api_key || payload.api_key.trim() === '') { delete payload.api_key } + if (!payload.unsplash_api_key || payload.unsplash_api_key.trim() === '') { + delete payload.unsplash_api_key + } try { await updateMutation.mutateAsync(payload) setSaved(true) - setForm((prev) => ({ ...prev, api_key: '' })) // Reset campo API key dopo salvataggio + // Reset campi API key dopo salvataggio + setForm((prev) => ({ ...prev, api_key: '', unsplash_api_key: '' })) setTimeout(() => setSaved(false), 3000) } catch { // L'errore è gestito da updateMutation.error @@ -141,6 +147,37 @@ export function Settings() { + {/* Immagini / Unsplash */} +
+

Immagini

+
+ +
+ setForm((p) => ({ ...p, unsplash_api_key: e.target.value }))} + placeholder={settings?.unsplash_api_key ? '••••••••••••••••' : 'Incolla la tua Access Key Unsplash'} + className="w-full px-3 py-2 pr-10 rounded-lg bg-stone-800 border border-stone-700 text-stone-100 text-sm placeholder-stone-600 focus:outline-none focus:ring-2 focus:ring-amber-500/50 focus:border-amber-500/50" + /> + +
+

+ {settings?.unsplash_api_key + ? 'API key Unsplash configurata. Le keyword verranno risolte in URL immagini reali nel CSV.' + : 'Opzionale. Registrati su unsplash.com/developers per ottenere una Access Key gratuita (50 req/h).'} +

+
+
+ {/* Brand */}

Brand

diff --git a/frontend/src/types.ts b/frontend/src/types.ts index d76cdbc..a21d19b 100644 --- a/frontend/src/types.ts +++ b/frontend/src/types.ts @@ -146,11 +146,13 @@ export interface Settings { frequenza_post: number brand_name?: string | null tono?: string | null + unsplash_api_key?: string | null } export interface SettingsStatus { api_key_configured: boolean llm_model: string + unsplash_api_key_configured: boolean } // ---------------------------------------------------------------------------