68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { useEffect } from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Card } from '@tamagui/card';
|
|
import { YStack } from '@tamagui/stacks';
|
|
import { SizableText as Text } from '@tamagui/text';
|
|
import { Spinner } from 'tamagui';
|
|
import { ADMIN_LOGIN_PATH } from '../constants';
|
|
import { useAdminTheme } from './theme';
|
|
import { useDocumentTitle } from './hooks/useDocumentTitle';
|
|
|
|
export default function LoginStartPage(): React.ReactElement {
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const { t } = useTranslation('auth');
|
|
const { textStrong, muted, border, surface, shadow, appBackground } = useAdminTheme();
|
|
const safeAreaStyle: React.CSSProperties = {
|
|
paddingTop: 'calc(env(safe-area-inset-top, 0px) + 16px)',
|
|
paddingBottom: 'calc(env(safe-area-inset-bottom, 0px) + 16px)',
|
|
};
|
|
|
|
useDocumentTitle(t('redirecting', 'Redirecting to login …'));
|
|
|
|
useEffect(() => {
|
|
const params = new URLSearchParams(location.search);
|
|
const returnTo = params.get('return_to');
|
|
const target = new URL(ADMIN_LOGIN_PATH, window.location.origin);
|
|
if (returnTo) {
|
|
target.searchParams.set('return_to', returnTo);
|
|
}
|
|
|
|
navigate(`${target.pathname}${target.search}`, { replace: true });
|
|
}, [location.search, navigate]);
|
|
|
|
return (
|
|
<YStack
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
padding="$4"
|
|
style={{ minHeight: '100vh', backgroundImage: appBackground, ...safeAreaStyle }}
|
|
backgroundColor={surface}
|
|
>
|
|
<Card
|
|
borderRadius={22}
|
|
borderWidth={2}
|
|
borderColor={border}
|
|
backgroundColor={surface}
|
|
padding="$3"
|
|
shadowColor={shadow}
|
|
shadowOpacity={0.16}
|
|
shadowRadius={16}
|
|
shadowOffset={{ width: 0, height: 10 }}
|
|
>
|
|
<YStack alignItems="center" space="$2">
|
|
<Spinner size="small" color={textStrong} />
|
|
<Text fontSize="$sm" fontWeight="700" color={textStrong}>
|
|
{t('redirecting', 'Redirecting to login …')}
|
|
</Text>
|
|
<Text fontSize="$xs" color={muted}>
|
|
{t('redirectingHint', 'One moment, preparing the login screen.')}
|
|
</Text>
|
|
</YStack>
|
|
</Card>
|
|
</YStack>
|
|
);
|
|
}
|