Cleanup

packages/features/auth/src/components/magic-link-auth-container.tsx

@@ -0,0 +1,98 @@
+'use client';
+
+import type { FormEventHandler } from 'react';
+import { useCallback } from 'react';
+
+import { useTranslation } from 'react-i18next';
+import { toast } from 'sonner';
+
+import { useSignInWithOtp } from '@kit/supabase/hooks/use-sign-in-with-otp';
+import { Alert, AlertDescription } from '@kit/ui/alert';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { Input } from '@kit/ui/input';
+import { Label } from '@kit/ui/label';
+import { Trans } from '@kit/ui/trans';
+
+export function MagicLinkAuthContainer({
+  inviteCode,
+  redirectUrl,
+}: {
+  inviteCode?: string;
+  redirectUrl: string;
+}) {
+  const { t } = useTranslation();
+  const signInWithOtpMutation = useSignInWithOtp();
+
+  const onSubmit: FormEventHandler<HTMLFormElement> = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      const target = event.currentTarget;
+      const data = new FormData(target);
+      const email = data.get('email') as string;
+      const queryParams = inviteCode ? `?inviteCode=${inviteCode}` : '';
+
+      const emailRedirectTo = [redirectUrl, queryParams].join('');
+
+      const promise = signInWithOtpMutation.mutateAsync({
+        email,
+        options: {
+          emailRedirectTo,
+        },
+      });
+
+      toast.promise(promise, {
+        loading: t('auth:sendingEmailLink'),
+        success: t(`auth:sendLinkSuccessToast`),
+        error: t(`auth:errors.link`),
+      });
+    },
+    [inviteCode, redirectUrl, signInWithOtpMutation, t],
+  );
+
+  if (signInWithOtpMutation.data) {
+    return (
+      <Alert variant={'success'}>
+        <AlertDescription>
+          <Trans i18nKey={'auth:sendLinkSuccess'} />
+        </AlertDescription>
+      </Alert>
+    );
+  }
+
+  return (
+    <form className={'w-full'} onSubmit={onSubmit}>
+      <If condition={signInWithOtpMutation.error}>
+        <Alert variant={'destructive'}>
+          <AlertDescription>
+            <Trans i18nKey={'auth:errors.link'} />
+          </AlertDescription>
+        </Alert>
+      </If>
+
+      <div className={'flex flex-col space-y-4'}>
+        <Label>
+          <Trans i18nKey={'common:emailAddress'} />
+
+          <Input
+            data-test={'email-input'}
+            required
+            type="email"
+            placeholder={t('auth:emailPlaceholder')}
+            name={'email'}
+          />
+        </Label>
+
+        <Button disabled={signInWithOtpMutation.isPending}>
+          <If
+            condition={signInWithOtpMutation.isPending}
+            fallback={<Trans i18nKey={'auth:sendEmailLink'} />}
+          >
+            <Trans i18nKey={'auth:sendingEmailLink'} />
+          </If>
+        </Button>
+      </div>
+    </form>
+  );
+}