45 lines
1.6 KiB
TypeScript
45 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import type {ReactNode} from 'react';
|
|
import {useEffect, useRef} from 'react';
|
|
import {Button, Skeleton} from 'antd';
|
|
import {LockOutlined} from '@ant-design/icons';
|
|
import {useAuth} from '@/app/context/AuthContext';
|
|
import {useLanguage} from '@/app/context/LanguageContext';
|
|
import {accountCopy} from '@/data/account';
|
|
|
|
export default function ProtectedPage({children}: {children: ReactNode}) {
|
|
const auth = useAuth();
|
|
const {locale} = useLanguage();
|
|
const copy = accountCopy[locale];
|
|
const prompted = useRef(false);
|
|
|
|
useEffect(() => {
|
|
if (auth.ready && !auth.isAuthenticated && !prompted.current) {
|
|
prompted.current = true;
|
|
auth.openLogin();
|
|
}
|
|
}, [auth]);
|
|
|
|
if (!auth.ready)
|
|
return (
|
|
<main className="max-w-5xl mx-auto min-h-[70vh] px-5 pt-32">
|
|
<Skeleton active />
|
|
</main>
|
|
);
|
|
if (!auth.isAuthenticated)
|
|
return (
|
|
<main className="max-w-3xl mx-auto min-h-[70vh] px-5 pt-32 pb-20 text-center">
|
|
<div className="rounded-3xl border border-subtle bg-surface p-10">
|
|
<LockOutlined className="text-4xl text-brand-400" />
|
|
<h1 className="text-2xl font-extrabold text-primary mt-5">{copy.protectedTitle}</h1>
|
|
<p className="text-secondary mt-3 mb-7">{copy.protectedDescription}</p>
|
|
<Button type="primary" size="large" onClick={() => auth.openLogin()}>
|
|
{copy.openLogin}
|
|
</Button>
|
|
</div>
|
|
</main>
|
|
);
|
|
return children;
|
|
}
|