root
103 lines
3.6 KiB
TypeScript
103 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { LogOut, Mail } from 'lucide-react';
|
|
import Navbar from '@/components/Navbar';
|
|
import Footer from '@/components/Footer';
|
|
import { logoUrl } from '@/lib/assets';
|
|
import { useLanguage } from '@/lib/language-context';
|
|
import { getTranslation } from '@/lib/translations';
|
|
|
|
export default function AccountPage() {
|
|
const router = useRouter();
|
|
const { language } = useLanguage();
|
|
const t = getTranslation(language);
|
|
const [email, setEmail] = useState<string | null>(null);
|
|
const [name, setName] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const loadSession = async () => {
|
|
try {
|
|
const response = await fetch('/api/auth/customer/session', { cache: 'no-store' });
|
|
const data = (await response.json()) as {
|
|
authenticated: boolean;
|
|
email: string | null;
|
|
name: string | null;
|
|
};
|
|
|
|
if (!data.authenticated || !data.email) {
|
|
router.replace('/login?tab=customer');
|
|
return;
|
|
}
|
|
|
|
setEmail(data.email);
|
|
setName(data.name);
|
|
window.dispatchEvent(new Event('shahi-customer-auth-changed'));
|
|
} catch {
|
|
router.replace('/login?tab=customer');
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
void loadSession();
|
|
}, [router]);
|
|
|
|
const handleLogout = async () => {
|
|
await fetch('/api/auth/customer/logout', { method: 'POST' });
|
|
window.dispatchEvent(new Event('shahi-customer-auth-changed'));
|
|
router.replace('/login?tab=customer');
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F5F0] flex items-center justify-center text-[#6B665F]">
|
|
{t.auth.customer.loading}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#F8F5F0] text-[#2C2A26]">
|
|
<Navbar />
|
|
|
|
<main className="max-w-2xl mx-auto px-4 sm:px-6 py-12 sm:py-16 text-center">
|
|
<div className="mx-auto mb-8 flex h-20 w-20 items-center justify-center rounded-3xl border border-[#c99a2e]/30 bg-white p-4 shadow-lg">
|
|
<img src={logoUrl()} alt="Shahi Kitchen" className="h-full w-full object-contain" />
|
|
</div>
|
|
|
|
<p className="text-xs tracking-[3px] text-[#c99a2e] mb-3">{t.auth.customer.badge}</p>
|
|
<h1 className="font-serif text-3xl sm:text-4xl tracking-[-0.8px] text-[#101724] mb-4">
|
|
{t.auth.customer.welcomeTitle}
|
|
</h1>
|
|
<p className="text-[15px] leading-relaxed text-[#6B665F] mb-8">
|
|
{t.auth.customer.welcomeSubtitle}
|
|
</p>
|
|
|
|
<div className="rounded-3xl border border-[#EDE6D9] bg-white p-5 sm:p-8 shadow-xl">
|
|
<p className="text-sm text-[#6B665F] mb-2">{t.auth.customer.loggedInAs}</p>
|
|
{name && (
|
|
<p className="font-serif text-lg sm:text-xl text-[#101724] mb-1 break-words">{name}</p>
|
|
)}
|
|
<div className="inline-flex max-w-full items-center gap-2 rounded-full bg-[#FFF6DC] px-4 sm:px-5 py-2.5 text-sm font-medium text-[#60420d]">
|
|
<Mail className="h-4 w-4 shrink-0" />
|
|
<span className="truncate" title={email ?? ''}>{email}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => void handleLogout()}
|
|
className="mt-8 inline-flex items-center gap-2 rounded-full border border-[#EDE6D9] bg-white px-6 py-3 text-sm font-medium text-[#6B665F] hover:text-[#101724] transition"
|
|
>
|
|
<LogOut className="h-4 w-4" />
|
|
{t.auth.customer.logout}
|
|
</button>
|
|
</main>
|
|
|
|
<Footer />
|
|
</div>
|
|
);
|
|
} |