56 lines
2.0 KiB
TypeScript
56 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { useLocation, useNavigate } from 'react-router-dom';
|
|
import { Loader2 } from 'lucide-react';
|
|
|
|
import { useAuth } from '../auth/context';
|
|
import { ADMIN_DEFAULT_AFTER_LOGIN_PATH } from '../constants';
|
|
import { buildAdminOAuthStartPath, buildMarketingLoginUrl, resolveReturnTarget, storeLastDestination } from '../lib/returnTo';
|
|
|
|
export default function LoginStartPage(): JSX.Element {
|
|
const { status, login } = useAuth();
|
|
const location = useLocation();
|
|
const navigate = useNavigate();
|
|
const searchParams = React.useMemo(() => new URLSearchParams(location.search), [location.search]);
|
|
|
|
const rawReturnTo = searchParams.get('return_to');
|
|
const { finalTarget, encodedFinal } = React.useMemo(
|
|
() => resolveReturnTarget(rawReturnTo, ADMIN_DEFAULT_AFTER_LOGIN_PATH),
|
|
[rawReturnTo]
|
|
);
|
|
|
|
const [hasStarted, setHasStarted] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
if (status === 'authenticated') {
|
|
navigate(finalTarget, { replace: true });
|
|
return;
|
|
}
|
|
|
|
if (hasStarted || status === 'loading') {
|
|
return;
|
|
}
|
|
|
|
setHasStarted(true);
|
|
storeLastDestination(finalTarget);
|
|
login(finalTarget);
|
|
}, [finalTarget, hasStarted, login, navigate, status]);
|
|
|
|
React.useEffect(() => {
|
|
if (status !== 'unauthenticated' || !hasStarted) {
|
|
return;
|
|
}
|
|
|
|
const oauthStartPath = buildAdminOAuthStartPath(finalTarget, encodedFinal);
|
|
const marketingLoginUrl = buildMarketingLoginUrl(oauthStartPath);
|
|
window.location.replace(marketingLoginUrl);
|
|
}, [encodedFinal, finalTarget, hasStarted, status]);
|
|
|
|
return (
|
|
<div className="flex min-h-screen flex-col items-center justify-center gap-4 bg-slate-950 p-6 text-center text-white/70">
|
|
<Loader2 className="h-6 w-6 animate-spin text-white" aria-hidden />
|
|
<p className="text-sm font-medium">Melde dich an …</p>
|
|
<p className="max-w-xs text-xs text-white/50">Wir verbinden dich automatisch mit deinem Event-Dashboard.</p>
|
|
</div>
|
|
);
|
|
}
|