Refactor invitation system and update UI layout

Updated invitation link generation logic to use 'invitePath' instead of 'siteURL' improving the overall invitation system. The changes also entailed multiple updates to the UI ranging from layout modifications to enhanced alerts and descriptions. Additionally, the text and styling of several components, such as the team account settings container and the layout of personal account settings page, were significantly adjusted.

packages/features/auth/src/components/sign-up-methods-container.tsx

@@ -3,6 +3,7 @@
 import type { Provider } from '@supabase/supabase-js';
 
 import { isBrowser } from '@kit/shared/utils';
+import { Alert, AlertDescription, AlertTitle } from '@kit/ui/alert';
 import { If } from '@kit/ui/if';
 import { Separator } from '@kit/ui/separator';
 
@@ -28,6 +29,16 @@ export function SignUpMethodsContainer(props: {
 
   return (
     <>
+      <If condition={props.inviteToken}>
+        <Alert variant={'info'}>
+          <AlertTitle>You have been invited to join a team</AlertTitle>
+          <AlertDescription>
+            Please sign up to continue with the invitation and create your
+            account.
+          </AlertDescription>
+        </Alert>
+      </If>
+
       <If condition={props.providers.password}>
         <EmailPasswordSignUpContainer emailRedirectTo={redirectUrl} />
       </If>

packages/features/team-accounts/src/components/invitations/accept-invitation-container.tsx

@@ -28,7 +28,7 @@ export function AcceptInvitationContainer(props: {
   };
 }) {
   return (
-    <div className={'flex flex-col items-center space-y-8'}>
+    <div className={'flex flex-col items-center space-y-4'}>
       <Heading className={'text-center'} level={5}>
         <Trans
           i18nKey={'teams:acceptInvitationHeading'}

packages/features/team-accounts/src/components/settings/team-account-danger-zone.tsx

@@ -232,7 +232,7 @@ function LeaveTeamContainer(props: {
 }) {
   return (
     <div className={'flex flex-col space-y-4'}>
-      <p>
+      <p className={'text-muted-foreground text-sm'}>
         <Trans
           i18nKey={'teams:leaveTeamDescription'}
           values={{
@@ -241,9 +241,9 @@ function LeaveTeamContainer(props: {
         />
       </p>
 
-      <div>
-        <AlertDialog>
-          <AlertDialogTrigger asChild>
+      <AlertDialog>
+        <AlertDialogTrigger asChild>
+          <div>
             <Button
               data-test={'leave-team-button'}
               type={'button'}
@@ -251,34 +251,25 @@ function LeaveTeamContainer(props: {
             >
               <Trans i18nKey={'teams:leaveTeam'} />
             </Button>
-          </AlertDialogTrigger>
+          </div>
+        </AlertDialogTrigger>
 
-          <AlertDialogContent>
-            <AlertDialogHeader>
-              <AlertDialogTitle>
-                <Trans i18nKey={'teams:leavingTeamModalHeading'} />
-              </AlertDialogTitle>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              <Trans i18nKey={'teams:leavingTeamModalHeading'} />
+            </AlertDialogTitle>
 
-              <AlertDialogDescription>
-                <Trans i18nKey={'teams:leavingTeamModalDescription'} />
-              </AlertDialogDescription>
-            </AlertDialogHeader>
+            <AlertDialogDescription>
+              <Trans i18nKey={'teams:leavingTeamModalDescription'} />
+            </AlertDialogDescription>
+          </AlertDialogHeader>
 
-            <ErrorBoundary fallback={<LeaveTeamErrorAlert />}>
-              <form action={leaveTeamAccountAction}>
-                <input type={'hidden'} value={props.account.id} name={'id'} />
-
-                <div className={'my-2 flex flex-col space-y-4'}>
-                  <Trans
-                    i18nKey={'teams:leaveTeamDisclaimer'}
-                    values={{
-                      teamName: props.account?.name,
-                    }}
-                  />
-                </div>
-              </form>
-            </ErrorBoundary>
-          </AlertDialogContent>
+          <ErrorBoundary fallback={<LeaveTeamErrorAlert />}>
+            <form action={leaveTeamAccountAction}>
+              <input type={'hidden'} value={props.account.id} name={'id'} />
+            </form>
+          </ErrorBoundary>
 
           <AlertDialogFooter>
             <AlertDialogCancel>
@@ -287,8 +278,8 @@ function LeaveTeamContainer(props: {
 
             <LeaveTeamSubmitButton />
           </AlertDialogFooter>
-        </AlertDialog>
-      </div>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
@@ -302,7 +293,7 @@ function LeaveTeamSubmitButton() {
       disabled={pending}
       variant={'destructive'}
     >
-      <Trans i18nKey={'teams:leaveOrganization'} />
+      <Trans i18nKey={'teams:leaveTeam'} />
     </Button>
   );
 }

packages/features/team-accounts/src/server/services/account-invitations.service.ts

@@ -238,6 +238,6 @@ export class AccountInvitationsService {
   }
 
   private getInvitationLink(token: string) {
-    return new URL(env.siteURL, env.siteURL).href + `?invite_token=${token}`;
+    return new URL(env.invitePath, env.siteURL).href + `?invite_token=${token}`;
   }
 }