File size: 2,894 Bytes
aa2e6af 0a765f7 aa2e6af 0a765f7 aa2e6af | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | import { useLocalize } from '~/hooks';
import { BlinkAnimation } from './BlinkAnimation';
import { TStartupConfig } from 'librechat-data-provider';
import SocialLoginRender from './SocialLoginRender';
import { ThemeSelector } from '~/components/ui';
// import Footer from './Footer';
const ErrorRender = ({ children }: { children: React.ReactNode }) => (
<div className="mt-16 flex justify-center">
<div
className="rounded-md border border-red-500 bg-red-500/10 px-3 py-2 text-sm text-gray-600 dark:text-gray-200"
role="alert"
>
{children}
</div>
</div>
);
function AuthLayout({
children,
header,
isFetching,
startupConfig,
startupConfigError,
pathname,
error,
}: {
children: React.ReactNode;
header: React.ReactNode;
isFetching: boolean;
startupConfig: TStartupConfig | null | undefined;
startupConfigError: unknown | null | undefined;
pathname: string;
error: string | null;
}) {
const localize = useLocalize();
const DisplayError = () => {
if (startupConfigError !== null && startupConfigError !== undefined) {
return <ErrorRender>{localize('com_auth_error_login_server')}</ErrorRender>;
} else if (error === 'com_auth_error_invalid_reset_token') {
return (
<ErrorRender>
{localize('com_auth_error_invalid_reset_token')}{' '}
<a className="font-semibold text-green-600 hover:underline" href="/forgot-password">
{localize('com_auth_click_here')}
</a>{' '}
{localize('com_auth_to_try_again')}
</ErrorRender>
);
} else if (error) {
return <ErrorRender>{localize(error)}</ErrorRender>;
}
return null;
};
return (
<div className="relative flex min-h-screen flex-col bg-white dark:bg-gray-900">
<BlinkAnimation active={isFetching}>
<div className="mt-12 h-24 w-full bg-cover">
<img src="/assets/logo.svg" className="h-full w-full object-contain" alt="Logo" />
</div>
</BlinkAnimation>
<DisplayError />
<div className="absolute bottom-0 left-0 md:m-4">
<ThemeSelector />
</div>
<div className="flex flex-grow items-center justify-center">
<div className="w-authPageWidth overflow-hidden bg-white px-6 py-4 dark:bg-gray-900 sm:max-w-md sm:rounded-lg">
{!startupConfigError && !isFetching && (
<h1
className="mb-4 text-center text-3xl font-semibold text-black dark:text-white"
style={{ userSelect: 'none' }}
>
{header}
</h1>
)}
{children}
{(pathname.includes('login') || pathname.includes('register')) && (
<SocialLoginRender startupConfig={startupConfig} />
)}
</div>
</div>
{/* <Footer startupConfig={startupConfig} /> */}
</div>
);
}
export default AuthLayout;
|