93 lines
3.5 KiB
TypeScript
93 lines
3.5 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState, useEffect, useRef } from 'react';
|
||
|
|
import { useRouter } from 'next/navigation';
|
||
|
|
import { clearTokens } from '@/lib/api';
|
||
|
|
import { useI18n } from '@/lib/i18n';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Decodes the email from a JWT access token stored in localStorage.
|
||
|
|
* Returns null if no token is present or the payload cannot be parsed.
|
||
|
|
*/
|
||
|
|
function decodeEmailFromToken(token: string | null): string | null {
|
||
|
|
if (!token) return null;
|
||
|
|
const parts = token.split('.');
|
||
|
|
if (parts.length !== 3) return null;
|
||
|
|
try {
|
||
|
|
const payload = JSON.parse(atob(parts[1]));
|
||
|
|
return payload.email || payload.sub || null;
|
||
|
|
} catch {
|
||
|
|
return null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
export function UserMenu() {
|
||
|
|
const router = useRouter();
|
||
|
|
const { t } = useI18n();
|
||
|
|
const [email, setEmail] = useState<string | null>(null);
|
||
|
|
const [open, setOpen] = useState(false);
|
||
|
|
const menuRef = useRef<HTMLDivElement>(null);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
const token = localStorage.getItem('access_token');
|
||
|
|
setEmail(decodeEmailFromToken(token));
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
function handleClickOutside(e: MouseEvent) {
|
||
|
|
if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
|
||
|
|
setOpen(false);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
document.addEventListener('mousedown', handleClickOutside);
|
||
|
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
function handleLogout() {
|
||
|
|
clearTokens();
|
||
|
|
router.push('/login');
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative" ref={menuRef} data-testid="user-menu">
|
||
|
|
<button
|
||
|
|
onClick={() => setOpen((v) => !v)}
|
||
|
|
className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-primary/10 transition-colors text-text"
|
||
|
|
aria-label={t('nav.logout')}
|
||
|
|
data-testid="user-menu-toggle"
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
||
|
|
</svg>
|
||
|
|
<span className="text-sm font-medium hidden sm:inline" data-testid="user-email">
|
||
|
|
{email || '—'}
|
||
|
|
</span>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
{open && (
|
||
|
|
<div
|
||
|
|
className="absolute right-0 mt-2 w-56 bg-surface border border-border rounded-lg shadow-lg py-1 z-50"
|
||
|
|
data-testid="user-menu-dropdown"
|
||
|
|
>
|
||
|
|
<div className="px-4 py-2 border-b border-border">
|
||
|
|
<p className="text-xs text-text-muted">{t('nav.settings')}</p>
|
||
|
|
<p className="text-sm font-medium text-text truncate">{email || '—'}</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
onClick={handleLogout}
|
||
|
|
className="w-full text-left px-4 py-2 text-sm text-error hover:bg-error/10 transition-colors flex items-center gap-2"
|
||
|
|
data-testid="logout-button"
|
||
|
|
>
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
||
|
|
</svg>
|
||
|
|
{t('nav.logout')}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|