Michelle
9814150ba8
All checks were successful
Build & Push Docker Image / build (push) Successful in 6m13s
86 lines
3.1 KiB
JavaScript
86 lines
3.1 KiB
JavaScript
import { Outlet } from 'react-router-dom';
|
|
import { useState, useEffect } from 'react';
|
|
import Navbar from './Navbar';
|
|
import Sidebar from './Sidebar';
|
|
import { useAuth } from '../contexts/AuthContext';
|
|
import { useLanguage } from '../contexts/LanguageContext';
|
|
import { AlertTriangle, RefreshCw } from 'lucide-react';
|
|
import api from '../services/api';
|
|
import toast from 'react-hot-toast';
|
|
|
|
export default function Layout() {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const { user } = useAuth();
|
|
const { t } = useLanguage();
|
|
const [resendCooldown, setResendCooldown] = useState(0);
|
|
const [resending, setResending] = useState(false);
|
|
|
|
// Countdown timer for resend cooldown
|
|
useEffect(() => {
|
|
if (resendCooldown <= 0) return;
|
|
const timer = setTimeout(() => setResendCooldown(c => c - 1), 1000);
|
|
return () => clearTimeout(timer);
|
|
}, [resendCooldown]);
|
|
|
|
const handleResendVerification = async () => {
|
|
if (resendCooldown > 0 || resending) return;
|
|
setResending(true);
|
|
try {
|
|
await api.post('/auth/resend-verification', { email: user.email });
|
|
toast.success(t('auth.emailVerificationResendSuccess'));
|
|
setResendCooldown(60);
|
|
} catch (err) {
|
|
const wait = err.response?.data?.waitSeconds;
|
|
if (wait) {
|
|
setResendCooldown(wait);
|
|
}
|
|
toast.error(err.response?.data?.error || t('auth.emailVerificationResendFailed'));
|
|
} finally {
|
|
setResending(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-th-bg flex">
|
|
{/* Sidebar */}
|
|
<Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 flex flex-col min-h-screen lg:ml-64">
|
|
<Navbar onMenuClick={() => setSidebarOpen(true)} />
|
|
|
|
{/* Email verification banner */}
|
|
{user && user.email_verified === 0 && (
|
|
<div className="bg-amber-500/15 border-b border-amber-500/30 px-4 py-2.5 flex items-center justify-center gap-3 text-sm">
|
|
<AlertTriangle size={15} className="text-amber-400 flex-shrink-0" />
|
|
<span className="text-amber-200">{t('auth.emailVerificationBanner')}</span>
|
|
<button
|
|
onClick={handleResendVerification}
|
|
disabled={resendCooldown > 0 || resending}
|
|
className="flex items-center gap-1.5 text-amber-400 hover:text-amber-300 underline underline-offset-2 transition-colors disabled:opacity-60 disabled:no-underline disabled:cursor-not-allowed"
|
|
>
|
|
<RefreshCw size={13} className={resending ? 'animate-spin' : ''} />
|
|
{resendCooldown > 0
|
|
? t('auth.emailVerificationResendCooldown').replace('{seconds}', resendCooldown)
|
|
: t('auth.emailVerificationResend')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<main className="flex-1 p-4 md:p-6 lg:p-8 max-w-7xl w-full mx-auto">
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
|
|
{/* Mobile overlay */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-30 lg:hidden"
|
|
onClick={() => setSidebarOpen(false)}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|