105 lines
2.5 KiB
TypeScript
105 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useRef, useState } from 'react';
|
|
|
|
import { CheckCircledIcon } from '@radix-ui/react-icons';
|
|
|
|
import { useSignUpWithEmailAndPassword } from '@kit/supabase/hooks/use-sign-up-with-email-password';
|
|
import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
|
|
import { If } from '@kit/ui/if';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
import { useCaptchaToken } from '../captcha/client';
|
|
import { AuthErrorAlert } from './auth-error-alert';
|
|
import { PasswordSignUpForm } from './password-sign-up-form';
|
|
|
|
interface EmailPasswordSignUpContainerProps {
|
|
defaultValues?: {
|
|
email: string;
|
|
};
|
|
|
|
onSignUp?: (userId?: string) => unknown;
|
|
emailRedirectTo: string;
|
|
}
|
|
|
|
export function EmailPasswordSignUpContainer({
|
|
defaultValues,
|
|
onSignUp,
|
|
emailRedirectTo,
|
|
}: EmailPasswordSignUpContainerProps) {
|
|
const { captchaToken, resetCaptchaToken } = useCaptchaToken();
|
|
|
|
const signUpMutation = useSignUpWithEmailAndPassword();
|
|
const redirecting = useRef(false);
|
|
const loading = signUpMutation.isPending || redirecting.current;
|
|
const [showVerifyEmailAlert, setShowVerifyEmailAlert] = useState(false);
|
|
|
|
const onSignupRequested = useCallback(
|
|
async (credentials: { email: string; password: string }) => {
|
|
if (loading) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const data = await signUpMutation.mutateAsync({
|
|
...credentials,
|
|
emailRedirectTo,
|
|
captchaToken,
|
|
});
|
|
|
|
setShowVerifyEmailAlert(true);
|
|
|
|
if (onSignUp) {
|
|
onSignUp(data.user?.id);
|
|
}
|
|
} catch (error) {
|
|
console.error(error);
|
|
} finally {
|
|
resetCaptchaToken();
|
|
}
|
|
},
|
|
[
|
|
captchaToken,
|
|
emailRedirectTo,
|
|
loading,
|
|
onSignUp,
|
|
resetCaptchaToken,
|
|
signUpMutation,
|
|
],
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<If condition={showVerifyEmailAlert}>
|
|
<SuccessAlert />
|
|
</If>
|
|
|
|
<If condition={!showVerifyEmailAlert}>
|
|
<AuthErrorAlert error={signUpMutation.error} />
|
|
|
|
<PasswordSignUpForm
|
|
onSubmit={onSignupRequested}
|
|
loading={loading}
|
|
defaultValues={defaultValues}
|
|
/>
|
|
</If>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function SuccessAlert() {
|
|
return (
|
|
<Alert variant={'success'}>
|
|
<CheckCircledIcon className={'w-4'} />
|
|
|
|
<AlertTitle>
|
|
<Trans i18nKey={'auth:emailConfirmationAlertHeading'} />
|
|
</AlertTitle>
|
|
|
|
<AlertDescription data-test={'email-confirmation-alert'}>
|
|
<Trans i18nKey={'auth:emailConfirmationAlertBody'} />
|
|
</AlertDescription>
|
|
</Alert>
|
|
);
|
|
}
|