diff --git a/app/admin/page.tsx b/app/admin/page.tsx index 2b821f2..1362184 100644 --- a/app/admin/page.tsx +++ b/app/admin/page.tsx @@ -259,6 +259,13 @@ export default function AdminDashboard() { const [savingPortal, setSavingPortal] = useState(false); const [uploading, setUploading] = useState<{ [key: string]: boolean }>({}); + // Hex input per il theme color: stato locale che resta libero durante la digitazione, + // committa su portal.themeColor solo quando la stringa e' un hex completo valido. + const [hexInput, setHexInput] = useState('#1e3a8a'); + useEffect(() => { + if (portal.themeColor) setHexInput(portal.themeColor); + }, [portal.themeColor]); + // NEW UI STATES: Toast and Confirm Dialog const [toast, setToast] = useState<{ message: string; type: 'success' | 'error' } | null>(null); const [confirmDialog, setConfirmDialog] = useState<{ message: string, onConfirm: () => void } | null>(null); @@ -836,7 +843,25 @@ export default function AdminDashboard() {
setPortal({...portal, themeColor: e.target.value})} className="h-12 w-12 rounded cursor-pointer border-0 p-0" /> - {portal.themeColor || '#1e3a8a'} + { + const v = e.target.value; + setHexInput(v); + // Commit a portal.themeColor solo se la stringa e' un hex pieno e valido. + if (/^#[0-9a-fA-F]{6}$/.test(v)) setPortal({ ...portal, themeColor: v.toLowerCase() }); + }} + onBlur={() => { + // Se l'utente esce dal campo con un valore non valido, ripristina l'ultimo valore noto. + if (!/^#[0-9a-fA-F]{6}$/.test(hexInput)) setHexInput(portal.themeColor || '#1e3a8a'); + }} + maxLength={7} + spellCheck={false} + placeholder="#RRGGBB" + aria-label="Theme color hex" + className={`font-mono text-sm px-3 py-2 rounded border outline-none focus:ring-2 focus:ring-blue-500 w-32 ${/^#[0-9a-fA-F]{6}$/.test(hexInput) ? 'border-gray-300 text-gray-900' : 'border-red-500 text-red-600'}`} + />