hamid
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
'use client';
|
|
import { FunctionComponent } from 'react';
|
|
import { CircularProgress, Stack, Typography } from '@mui/material';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
import { AppButton } from '@/components';
|
|
import AppIcon from '@/components/common/AppIcon';
|
|
import BrandMark from './BrandMark';
|
|
|
|
interface AuthAccountErrorProps {
|
|
onRetry: () => void;
|
|
isRetrying: boolean;
|
|
}
|
|
|
|
/**
|
|
* Shown by `RoleGuard` when `/me` fails on a private route (e.g. the API is unreachable). Surfacing an
|
|
* explicit "couldn't load your account" recovery is the deliberate alternative to silently defaulting to
|
|
* the customer shell — a transient error must never downgrade a nurse/admin to the family app.
|
|
* @component AuthAccountError
|
|
*/
|
|
const AuthAccountError: FunctionComponent<AuthAccountErrorProps> = ({ onRetry, isRetrying }) => {
|
|
const t = useTranslations('auth');
|
|
return (
|
|
<Stack
|
|
sx={{ alignItems: 'center', justifyContent: 'center', minHeight: '70vh', gap: 2, px: 2, textAlign: 'center' }}
|
|
>
|
|
<BrandMark />
|
|
<AppIcon icon="warning" size={40} color="var(--bal-warning)" />
|
|
<Typography variant="h6" component="h1">
|
|
{t('account_error_title')}
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary', maxWidth: 360 }}>
|
|
{t('account_error_body')}
|
|
</Typography>
|
|
<AppButton
|
|
color="primary"
|
|
variant="contained"
|
|
onClick={onRetry}
|
|
disabled={isRetrying}
|
|
startIcon={isRetrying ? <CircularProgress size={18} color="inherit" /> : undefined}
|
|
>
|
|
{t('account_error_retry')}
|
|
</AppButton>
|
|
</Stack>
|
|
);
|
|
};
|
|
|
|
export default AuthAccountError;
|