88 lines
2.3 KiB
TypeScript
88 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useTransition } from 'react';
|
|
|
|
import type { Session } from '@supabase/gotrue-js';
|
|
|
|
import useRefreshRoute from '@kit/shared/hooks/use-refresh-route';
|
|
import { useSignOut } from '@kit/supabase/hooks/use-sign-out';
|
|
import { Button } from '@kit/ui/button';
|
|
import { Trans } from '@kit/ui/trans';
|
|
|
|
function ExistingUserInviteForm(
|
|
props: React.PropsWithChildren<{
|
|
session: Session;
|
|
code: string;
|
|
}>,
|
|
) {
|
|
const signOut = useSignOut();
|
|
const refresh = useRefreshRoute();
|
|
const [isSubmitting, startTransition] = useTransition();
|
|
|
|
const onSignOut = useCallback(async () => {
|
|
await signOut.mutateAsync();
|
|
refresh();
|
|
}, [refresh, signOut]);
|
|
|
|
const onInviteAccepted = useCallback(() => {
|
|
return startTransition(async () => {
|
|
await acceptInviteAction({
|
|
code: props.code,
|
|
});
|
|
});
|
|
}, [props.code, startTransition]);
|
|
|
|
return (
|
|
<>
|
|
<div className={'flex flex-col space-y-4'}>
|
|
<p className={'text-center text-sm'}>
|
|
<Trans
|
|
i18nKey={'auth:clickToAcceptAs'}
|
|
values={{ email: props.session?.user.email }}
|
|
components={{ b: <b /> }}
|
|
/>
|
|
</p>
|
|
|
|
<Button
|
|
className={'w-full'}
|
|
disabled={isSubmitting}
|
|
onClick={onInviteAccepted}
|
|
data-test={'accept-invite-submit-button'}
|
|
type={'submit'}
|
|
>
|
|
<Trans i18nKey={'auth:acceptInvite'} />
|
|
</Button>
|
|
|
|
<div>
|
|
<div className={'flex flex-col space-y-4'}>
|
|
<p className={'text-center'}>
|
|
<span
|
|
className={
|
|
'text-center text-sm text-gray-700 dark:text-gray-300'
|
|
}
|
|
>
|
|
<Trans i18nKey={'auth:acceptInviteWithDifferentAccount'} />
|
|
</span>
|
|
</p>
|
|
|
|
<div className={'flex justify-center'}>
|
|
<Button
|
|
data-test={'invite-sign-out-button'}
|
|
disabled={isSubmitting}
|
|
variant={'ghost'}
|
|
size={'sm'}
|
|
onClick={onSignOut}
|
|
type={'button'}
|
|
>
|
|
<Trans i18nKey={'auth:signOut'} />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default ExistingUserInviteForm;
|