import { useEffect, useState } from 'react';
import { useCallOnce } from '#/lib/hooks/use-call-once';
import { completeOAuthCallback } from '#/state/session';
import { InactiveAccountError } from '#/state/session/agent';
import { ErrorBoundary } from '#/components/ErrorBoundary';
import { Spinner } from '#/components/Spinner';
import { Text } from '#/components/Text';
import * as Toast from '#/components/Toast';
import { m } from '#/paraglide/messages';
import * as css from './OAuthCallback.css';
export function OAuthCallback() {
const [error, setError] = useState('');
const runOnce = useCallOnce();
useEffect(() => {
runOnce(() => {
const params = new URLSearchParams(window.location.hash.slice(1));
history.replaceState(null, '', window.location.pathname);
completeOAuthCallback(params)
.then(() => {
history.replaceState(null, '', '/');
window.location.reload();
})
.catch((e) => {
console.error('OAuth callback failed', e);
if (e instanceof InactiveAccountError) {
Toast.show(m['view.auth.signIn.accountInactiveError'](), { type: 'warning' });
} else {
setError(m['view.auth.signIn.failedError']());
}
});
});
}, [runOnce]);
return (
<div className={css.container}>
<ErrorBoundary>
{error ? (
<Text color="textContrastHigh" size="md">
{error}
</Text>
) : (
<>
<Spinner color="default" label={m['common.status.loading']()} size="_2xl" />
<Text color="textContrastHigh" size="md">
{m['view.auth.signIn.inProgress']()}
</Text>
</>
)}
</ErrorBoundary>
</div>
);
}