fix: sticky user card in sidebar, move logout to Settings > Sicurezza
- Sidebar user card (name + plan badge) now always visible at bottom using flexShrink: 0 (nav area scrolls, footer stays fixed) - Removed logout button from sidebar (reduces accidental logouts) - Added "Esci dall'account" button in Settings > Sicurezza section - User needs 2 clicks to logout: Settings icon → Sicurezza → Esci Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -120,8 +120,8 @@ export default function Layout() {
|
|||||||
})}
|
})}
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* User card + logout */}
|
{/* User card — always visible at bottom */}
|
||||||
<div style={{ borderTop: '1px solid var(--border)' }}>
|
<div style={{ borderTop: '1px solid var(--border)', flexShrink: 0 }}>
|
||||||
{/* Admin link */}
|
{/* Admin link */}
|
||||||
{isAdmin && (
|
{isAdmin && (
|
||||||
<div style={{ padding: '0.5rem 1.25rem', borderBottom: '1px solid var(--border)' }}>
|
<div style={{ padding: '0.5rem 1.25rem', borderBottom: '1px solid var(--border)' }}>
|
||||||
@@ -172,23 +172,6 @@ export default function Layout() {
|
|||||||
</div>
|
</div>
|
||||||
<span style={{ fontSize: '0.65rem', color: 'var(--ink-muted)', flexShrink: 0 }}>⚙</span>
|
<span style={{ fontSize: '0.65rem', color: 'var(--ink-muted)', flexShrink: 0 }}>⚙</span>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{/* Logout — ben visibile */}
|
|
||||||
<button
|
|
||||||
onClick={logout}
|
|
||||||
style={{
|
|
||||||
width: '100%', padding: '0.7rem 1.25rem',
|
|
||||||
background: '#FFF0EE', border: 'none', borderTop: '1px solid var(--border)',
|
|
||||||
fontFamily: "'DM Sans', sans-serif", fontSize: '0.82rem', fontWeight: 700,
|
|
||||||
color: 'var(--accent)', cursor: 'pointer', textAlign: 'left',
|
|
||||||
transition: 'background-color 0.15s, color 0.15s',
|
|
||||||
letterSpacing: '0.02em',
|
|
||||||
}}
|
|
||||||
onMouseEnter={e => { e.currentTarget.style.backgroundColor = 'var(--accent)'; e.currentTarget.style.color = 'white' }}
|
|
||||||
onMouseLeave={e => { e.currentTarget.style.backgroundColor = '#FFF0EE'; e.currentTarget.style.color = 'var(--accent)' }}
|
|
||||||
>
|
|
||||||
→ Esci
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</aside>
|
</aside>
|
||||||
|
|
||||||
|
|||||||
@@ -163,7 +163,7 @@ const SECTIONS = [
|
|||||||
]
|
]
|
||||||
|
|
||||||
export default function SettingsPage() {
|
export default function SettingsPage() {
|
||||||
const { user, isPro } = useAuth()
|
const { user, isPro, logout } = useAuth()
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
const [searchParams] = useSearchParams()
|
const [searchParams] = useSearchParams()
|
||||||
const [activeSection, setActiveSection] = useState(searchParams.get('tab') || 'profilo')
|
const [activeSection, setActiveSection] = useState(searchParams.get('tab') || 'profilo')
|
||||||
@@ -266,7 +266,7 @@ export default function SettingsPage() {
|
|||||||
{activeSection === 'affiliati' && <AffiliateList />}
|
{activeSection === 'affiliati' && <AffiliateList />}
|
||||||
{activeSection === 'commenti' && <CommentsQueue />}
|
{activeSection === 'commenti' && <CommentsQueue />}
|
||||||
{activeSection === 'sicurezza' && (
|
{activeSection === 'sicurezza' && (
|
||||||
<SicurezzaSection user={user} saving={saving} success={success} errors={errors} setMsg={setMsg} setSaving={setSaving} />
|
<SicurezzaSection user={user} saving={saving} success={success} errors={errors} setMsg={setMsg} setSaving={setSaving} logout={logout} />
|
||||||
)}
|
)}
|
||||||
{activeSection === 'privacy' && (
|
{activeSection === 'privacy' && (
|
||||||
<PrivacySection user={user} navigate={navigate} saving={saving} success={success} errors={errors} setMsg={setMsg} setSaving={setSaving} />
|
<PrivacySection user={user} navigate={navigate} saving={saving} success={success} errors={errors} setMsg={setMsg} setSaving={setSaving} />
|
||||||
@@ -652,7 +652,7 @@ function GuideAccordion({ guide, providerName }) {
|
|||||||
|
|
||||||
// ─── Sicurezza ────────────────────────────────────────────────────────────────
|
// ─── Sicurezza ────────────────────────────────────────────────────────────────
|
||||||
|
|
||||||
function SicurezzaSection({ user, saving, success, errors, setMsg, setSaving }) {
|
function SicurezzaSection({ user, saving, success, errors, setMsg, setSaving, logout }) {
|
||||||
const [form, setForm] = useState({ current_password: '', new_password: '', confirm_password: '' })
|
const [form, setForm] = useState({ current_password: '', new_password: '', confirm_password: '' })
|
||||||
const isGoogle = user?.auth_provider === 'google'
|
const isGoogle = user?.auth_provider === 'google'
|
||||||
|
|
||||||
@@ -719,6 +719,19 @@ function SicurezzaSection({ user, saving, success, errors, setMsg, setSaving })
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Card>
|
</Card>
|
||||||
|
<Card>
|
||||||
|
<Label>Sessione</Label>
|
||||||
|
<p style={{ fontSize: '0.85rem', color: 'var(--ink-muted)', margin: '0.5rem 0 1rem', lineHeight: 1.5 }}>
|
||||||
|
Disconnettiti dal tuo account su questo dispositivo.
|
||||||
|
</p>
|
||||||
|
<button onClick={logout} style={{
|
||||||
|
padding: '0.55rem 1.25rem', backgroundColor: 'var(--error)', color: 'white',
|
||||||
|
fontFamily: "'DM Sans', sans-serif", fontWeight: 600, fontSize: '0.85rem',
|
||||||
|
border: 'none', cursor: 'pointer',
|
||||||
|
}}>
|
||||||
|
Esci dall'account
|
||||||
|
</button>
|
||||||
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user