Cleanup

apps/web/app/join/[code]/page.tsx

@@ -0,0 +1,127 @@
+import { headers } from 'next/headers';
+import { notFound } from 'next/navigation';
+
+import type { SupabaseClient } from '@supabase/supabase-js';
+
+import ExistingUserInviteForm from '~/join/_components/ExistingUserInviteForm';
+import NewUserInviteForm from '~/join/_components/NewUserInviteForm';
+import { withI18n } from '~/lib/i18n/with-i18n';
+
+import { Logger } from '@kit/shared/logger';
+import { getSupabaseServerComponentClient } from '@kit/supabase/server-component-client';
+import { Heading } from '@kit/ui/heading';
+import { If } from '@kit/ui/if';
+import { Trans } from '@kit/ui/trans';
+
+interface Context {
+  params: {
+    code: string;
+  };
+}
+
+export const metadata = {
+  title: `Join Organization`,
+};
+
+async function InvitePage({ params }: Context) {
+  const code = params.code;
+  const data = await loadInviteData(code);
+
+  if (!data.membership) {
+    notFound();
+  }
+
+  const organization = data.membership.organization;
+
+  return (
+    <>
+      <Heading level={4}>
+        <Trans
+          i18nKey={'auth:joinOrganizationHeading'}
+          values={{
+            organization: organization.name,
+          }}
+        />
+      </Heading>
+
+      <div>
+        <p className={'text-center'}>
+          <Trans
+            i18nKey={'auth:joinOrganizationSubHeading'}
+            values={{
+              organization: organization.name,
+            }}
+            components={{ b: <b /> }}
+          />
+        </p>
+
+        <p className={'text-center'}>
+          <If condition={!data.session}>
+            <Trans i18nKey={'auth:signUpToAcceptInvite'} />
+          </If>
+        </p>
+      </div>
+
+      <If condition={data.session} fallback={<NewUserInviteForm code={code} />}>
+        {(session) => <ExistingUserInviteForm code={code} session={session} />}
+      </If>
+    </>
+  );
+}
+
+export default withI18n(InvitePage);
+
+async function loadInviteData(code: string) {
+  const client = getSupabaseServerComponentClient();
+
+  // we use an admin client to be able to read the pending membership
+  // without having to be logged in
+  const adminClient = getSupabaseServerComponentClient({ admin: true });
+
+  const { data: membership, error } = await getInvite(adminClient, code);
+
+  // if the invite wasn't found, it's 404
+  if (error) {
+    Logger.warn(
+      {
+        code,
+        error,
+      },
+      `User navigated to invite page, but it wasn't found. Redirecting to home page...`,
+    );
+
+    notFound();
+  }
+
+  const { data: userSession } = await client.auth.getSession();
+  const session = userSession?.session;
+  const csrfToken = headers().get('x-csrf-token');
+
+  return {
+    csrfToken,
+    session,
+    membership,
+    code,
+  };
+}
+
+function getInvite(adminClient: SupabaseClient<Database>, code: string) {
+  return getMembershipByInviteCode<{
+    id: number;
+    code: string;
+    organization: {
+      name: string;
+      id: number;
+    };
+  }>(adminClient, {
+    code,
+    query: `
+      id,
+      code,
+      organization: organization_id (
+        name,
+        id
+      )
+    `,
+  });
+}

apps/web/app/join/_components/ExistingUserInviteForm.tsx

@@ -0,0 +1,87 @@
+'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;

apps/web/app/join/_components/NewUserInviteForm.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import { useCallback, useState, useTransition } from 'react';
+
+import authConfig from '~/config/auth.config';
+
+import { EmailOtpContainer } from '@kit/auth/src/components/email-otp-container';
+import { OauthProviders } from '@kit/auth/src/components/oauth-providers';
+import { PasswordSignInContainer } from '@kit/auth/src/components/password-sign-in-container';
+import { EmailPasswordSignUpContainer } from '@kit/auth/src/components/password-sign-up-container';
+import { isBrowser } from '@kit/shared/utils';
+import { Button } from '@kit/ui/button';
+import { If } from '@kit/ui/if';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
+import { Trans } from '@kit/ui/trans';
+
+enum Mode {
+  SignUp,
+  SignIn,
+}
+
+function NewUserInviteForm(
+  props: React.PropsWithChildren<{
+    code: string;
+  }>,
+) {
+  const [mode, setMode] = useState<Mode>(Mode.SignUp);
+  const [isSubmitting, startTransition] = useTransition();
+  const oAuthReturnUrl = isBrowser() ? window.location.pathname : '';
+
+  const onInviteAccepted = useCallback(
+    async (userId?: string) => {
+      startTransition(async () => {
+        await acceptInviteAction({
+          code: props.code,
+          userId,
+        });
+      });
+    },
+    [props.code],
+  );
+
+  return (
+    <>
+      <If condition={isSubmitting}>
+        <LoadingOverlay fullPage>
+          Accepting invite. Please wait...
+        </LoadingOverlay>
+      </If>
+
+      <OauthProviders inviteCode={props.code} returnUrl={oAuthReturnUrl} />
+
+      <If condition={authConfig.providers.password}>
+        <If condition={mode === Mode.SignUp}>
+          <div className={'flex w-full flex-col items-center space-y-4'}>
+            <EmailPasswordSignUpContainer
+              emailRedirectTo={emailRedirectTo}
+              onSignUp={onInviteAccepted}
+            />
+
+            <Button
+              className={'w-full'}
+              variant={'ghost'}
+              size={'sm'}
+              onClick={() => setMode(Mode.SignIn)}
+            >
+              <Trans i18nKey={'auth:alreadyHaveAccountStatement'} />
+            </Button>
+          </div>
+        </If>
+
+        <If condition={mode === Mode.SignIn}>
+          <div className={'flex w-full flex-col items-center space-y-4'}>
+            <PasswordSignInContainer onSignIn={onInviteAccepted} />
+
+            <Button
+              className={'w-full'}
+              variant={'ghost'}
+              size={'sm'}
+              onClick={() => setMode(Mode.SignUp)}
+            >
+              <Trans i18nKey={'auth:doNotHaveAccountStatement'} />
+            </Button>
+          </div>
+        </If>
+      </If>
+
+      <If condition={authConfig.providers.magicLink}>
+        <MagicLinkAuth inviteCode={props.code} />
+      </If>
+
+      <If condition={authConfig.providers.otp}>
+        <EmailOtpContainer
+          inviteCode={props.code}
+          shouldCreateUser={true}
+          onSuccess={onInviteAccepted}
+        />
+      </If>
+    </>
+  );
+}
+
+export default NewUserInviteForm;

apps/web/app/join/layout.tsx

@@ -0,0 +1,9 @@
+import { AppLogo } from '~/components/app-logo';
+
+import { AuthLayoutShell } from '@kit/auth/shared';
+
+function InvitePageLayout({ children }: React.PropsWithChildren) {
+  return <AuthLayoutShell Logo={AppLogo}>{children}</AuthLayoutShell>;
+}
+
+export default InvitePageLayout;