ToyShare/src/app/[locale]/admin/layout.tsx

73 lines
2.4 KiB
TypeScript

'use client';
import AdminSidebar from '@/components/layout/AdminSidebar';
import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Loader2, ShieldOff } from 'lucide-react';
import { useCurrentLocale, useI18n } from '@/locales/client';
import { Button } from '@/components/ui/button';
import Link from 'next/link';
const ADMIN_EMAIL = 'user@example.com'; // Or 'admin@example.com' if you updated login
export default function AdminLayout({
children,
}: {
children: React.ReactNode;
}) {
const router = useRouter();
const locale = useCurrentLocale();
const t = useI18n();
const [isAuthenticating, setIsAuthenticating] = useState(true);
const [isAuthorized, setIsAuthorized] = useState(false);
useEffect(() => {
const isAuthenticated = localStorage.getItem('isToyShareAuthenticated') === 'true';
const userEmail = localStorage.getItem('userEmail');
if (!isAuthenticated) {
router.replace(`/${locale}/login?redirect=/${locale}/admin`);
} else if (userEmail !== ADMIN_EMAIL && userEmail !== 'admin@example.com') { // Allow both for flexibility
setIsAuthorized(false);
setIsAuthenticating(false);
} else {
setIsAuthorized(true);
setIsAuthenticating(false);
}
}, [router, locale]);
if (isAuthenticating) {
return (
<div className="flex justify-center items-center h-screen bg-background">
<Loader2 className="h-12 w-12 animate-spin text-primary" />
<p className="ml-4 text-lg text-muted-foreground">{t('admin.layout.loading')}</p>
</div>
);
}
if (!isAuthorized) {
return (
<div className="flex flex-col justify-center items-center h-screen bg-background text-center p-4">
<ShieldOff className="h-24 w-24 text-destructive mb-6" />
<h1 className="text-3xl font-bold text-destructive mb-3">{t('admin.layout.unauthorized_title')}</h1>
<p className="text-muted-foreground mb-8 max-w-md">{t('admin.layout.unauthorized_description')}</p>
<Link href={`/${locale}/`} passHref>
<Button variant="outline" size="lg">
{t('admin.layout.back_to_home_button')}
</Button>
</Link>
</div>
);
}
return (
<div className="flex min-h-[calc(100vh-4rem)]"> {/* Assuming header height is 4rem */}
<AdminSidebar />
<main className="flex-1 p-6 lg:p-8 bg-muted/30 overflow-auto">
{children}
</main>
</div>
);
}