59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
import React from 'react';
|
|
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 { useAuth } from '../auth/context';
|
|
import { ADMIN_PUBLIC_LANDING_PATH } from '../constants';
|
|
import { useAdminTheme } from './theme';
|
|
import { useDocumentTitle } from './hooks/useDocumentTitle';
|
|
|
|
export default function LogoutPage() {
|
|
const { logout } = useAuth();
|
|
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('logout.title', 'Signing out …'));
|
|
|
|
React.useEffect(() => {
|
|
logout({ redirect: ADMIN_PUBLIC_LANDING_PATH });
|
|
}, [logout]);
|
|
|
|
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}>
|
|
Abmeldung wird vorbereitet ...
|
|
</Text>
|
|
<Text fontSize="$xs" color={muted}>
|
|
Bitte einen Moment Geduld.
|
|
</Text>
|
|
</YStack>
|
|
</Card>
|
|
</YStack>
|
|
);
|
|
}
|