check if correct invite id was provided

Author: maciaszczykm

www/src/components/Invite.tsx

@@ -11,6 +11,7 @@ import {
   useInviteQuery,
   useRealizeInviteMutation,
   useSignupInviteMutation,
+  InviteFragment,
 } from '../generated/graphql'
 import { setToken } from '../helpers/authentication'
 
@@ -19,28 +20,13 @@ import { LoginPortal } from './users/LoginPortal'
 import { validatePassword } from './users/PasswordValidation'
 import { ConfirmPasswordField, SetPasswordField } from './users/Signup'
 import { WelcomeHeader } from './utils/WelcomeHeader'
-
-function InvalidInvite() {
-  return (
-    <Flex
-      width="100vw"
-      height="100vh"
-      justifyContent="center"
-      alignItems="center"
-    >
-      This invite code is no longer valid
-    </Flex>
-  )
-}
+import { ApolloError } from '@apollo/client/errors'
+import LoadingIndicator from './utils/LoadingIndicator'
 
 function ExistingInvite({
-  invite: { account },
-  id,
-  user,
+  invite: { id, account, user },
 }: {
-  invite: InviteT
-  id: any
-  user: User
+  invite: InviteFragment
 }) {
   const [mutation, { loading, error }] = useRealizeInviteMutation({
     variables: { id },
@@ -87,26 +73,54 @@ export default function Invite() {
   const [name, setName] = useState('')
   const [password, setPassword] = useState('')
   const [confirm, setConfirm] = useState('')
+
   const [mutation, { loading, error }] = useSignupInviteMutation({
     variables: {
       inviteId: inviteId ?? '',
-      attributes: {
-        name,
-        password,
-      },
+      attributes: { name, password },
     },
     onCompleted: ({ signup }) => {
       setToken(signup?.jwt)
       ;(window as Window).location = '/'
     },
   })
 
-  const { data, error: inviteError } = useInviteQuery({
+  const {
+    data,
+    loading: inviteLoading,
+    error: inviteError,
+  } = useInviteQuery({
     variables: { id: inviteId ?? '' },
   })
 
-  if (inviteError) return <InvalidInvite />
-  if (!data) return null
+  const invite = data?.invite
+
+  if (!data && inviteLoading) return <LoadingIndicator />
+
+  if (inviteError)
+    return (
+      <Flex
+        grow={1}
+        alignItems="center"
+        justifyContent="center"
+      >
+        <GqlError
+          error={error}
+          header="Could not load invite"
+        />
+      </Flex>
+    )
+
+  if (!invite)
+    return (
+      <Flex
+        grow={1}
+        alignItems="center"
+        justifyContent="center"
+      >
+        This invite code does not exist or is no longer valid
+      </Flex>
+    )
 
   const { disabled: passwordDisabled, error: passwordError } = validatePassword(
     password,
@@ -116,15 +130,7 @@ export default function Invite() {
   const isNameValid = name.length > 0
   const submitEnabled = isNameValid && !passwordDisabled
 
-  if (data?.invite?.user) {
-    return (
-      <ExistingInvite
-        invite={data?.invite as InviteT}
-        id={inviteId}
-        user={data?.invite?.user as User}
-      />
-    )
-  }
+  if (invite?.user) return <ExistingInvite invite={invite} />
 
   const onSubmit = (e) => {
     e.preventDefault()
@@ -145,7 +151,7 @@ export default function Invite() {
           body1
           color="text-xlight"
         >
-          {data.invite?.account?.name} invited you to join their Plural account.
+          {invite.account?.name} invited you to join their Plural account.
           Create an account to join.
         </P>
       </Div>
@@ -165,7 +171,7 @@ export default function Invite() {
         >
           <LabelledInput
             label="Email"
-            value={data?.invite?.email}
+            value={invite.email}
             disabled
           />
           <LabelledInput

www/src/generated/graphql.ts

@@ -5646,21 +5646,21 @@ export type CreateOauthIntegrationMutationVariables = Exact<{
 
 export type CreateOauthIntegrationMutation = { __typename?: 'RootMutationType', createOauthIntegration?: { __typename?: 'OauthIntegration', id: string, service: OauthService, insertedAt?: Date | null } | null };
 
-export type InviteFragment = { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, insertedAt?: Date | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null };
+export type InviteFragment = { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null };
 
 export type InviteQueryVariables = Exact<{
   id: Scalars['String']['input'];
 }>;
 
 
-export type InviteQuery = { __typename?: 'RootQueryType', invite?: { __typename?: 'Invite', id: string, email?: string | null, existing: boolean, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
+export type InviteQuery = { __typename?: 'RootQueryType', invite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
 
 export type CreateInviteMutationVariables = Exact<{
   attributes: InviteAttributes;
 }>;
 
 
-export type CreateInviteMutation = { __typename?: 'RootMutationType', createInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, insertedAt?: Date | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
+export type CreateInviteMutation = { __typename?: 'RootMutationType', createInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
 
 export type SignupInviteMutationVariables = Exact<{
   attributes: UserAttributes;
@@ -5682,7 +5682,7 @@ export type DeleteInviteMutationVariables = Exact<{
 }>;
 
 
-export type DeleteInviteMutation = { __typename?: 'RootMutationType', deleteInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, insertedAt?: Date | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
+export type DeleteInviteMutation = { __typename?: 'RootMutationType', deleteInvite?: { __typename?: 'Invite', id: string, secureId?: string | null, email?: string | null, existing: boolean, insertedAt?: Date | null, account?: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null } | null, user?: { __typename?: 'User', id: string, name: string, email: string, avatar?: string | null, provider?: Provider | null, demoed?: boolean | null, onboarding?: OnboardingState | null, emailConfirmed?: boolean | null, emailConfirmBy?: Date | null, backgroundColor?: string | null, serviceAccount?: boolean | null, hasInstallations?: boolean | null, hasShell?: boolean | null, account: { __typename?: 'Account', id: string, name?: string | null, billingCustomerId?: string | null, backgroundColor?: string | null, userCount?: string | null, trialed?: boolean | null }, onboardingChecklist?: { __typename?: 'OnboardingChecklist', dismissed?: boolean | null, status?: OnboardingChecklistState | null } | null, invites?: Array<{ __typename?: 'Invite', id: string, email?: string | null } | null> | null, roles?: { __typename?: 'Roles', admin?: boolean | null } | null, groups?: Array<{ __typename?: 'Group', id: string, name: string, global?: boolean | null, description?: string | null } | null> | null, impersonationPolicy?: { __typename?: 'ImpersonationPolicy', id: string, bindings?: Array<{ __typename?: 'ImpersonationPolicyBinding', id: string, group?: { __typename?: 'Group', id: string, name: string } | null, user?: { __typename?: 'User', id: string, name: string, email: string } | null } | null> | null } | null } | null } | null };
 
 export type KeyBackupUserFragment = { __typename?: 'User', email: string };
 
@@ -7306,17 +7306,35 @@ export const ZoomMeetingFragmentDoc = gql`
   password
 }
     `;
+export const AccountFragmentDoc = gql`
+    fragment Account on Account {
+  id
+  name
+  billingCustomerId
+  backgroundColor
+  userCount
+  trialed
+}
+    `;
 export const InviteFragmentDoc = gql`
     fragment Invite on Invite {
   id
   secureId
   email
+  existing
   insertedAt
+  account {
+    ...Account
+  }
   user {
     ...User
+    account {
+      ...Account
+    }
   }
 }
-    ${UserFragmentDoc}`;
+    ${AccountFragmentDoc}
+${UserFragmentDoc}`;
 export const KeyBackupUserFragmentDoc = gql`
     fragment KeyBackupUser on User {
   email
@@ -7902,16 +7920,6 @@ export const DeferredUpdateFragmentDoc = gql`
   insertedAt
 }
     `;
-export const AccountFragmentDoc = gql`
-    fragment Account on Account {
-  id
-  name
-  billingCustomerId
-  backgroundColor
-  userCount
-  trialed
-}
-    `;
 export const GroupMemberFragmentDoc = gql`
     fragment GroupMember on GroupMember {
   id
@@ -9203,22 +9211,10 @@ export type CreateOauthIntegrationMutationOptions = Apollo.BaseMutationOptions<C
 export const InviteDocument = gql`
     query Invite($id: String!) {
   invite(id: $id) {
-    id
-    email
-    existing
-    account {
-      ...Account
-    }
-    user {
-      ...User
-      account {
-        ...Account
-      }
-    }
+    ...Invite
   }
 }
-    ${AccountFragmentDoc}
-${UserFragmentDoc}`;
+    ${InviteFragmentDoc}`;
 
 /**
  * __useInviteQuery__

www/src/graph/invite.graphql

@@ -2,26 +2,22 @@ fragment Invite on Invite {
   id
   secureId
   email
+  existing
   insertedAt
+  account {
+    ...Account
+  }
   user {
     ...User
+    account {
+      ...Account
+    }
   }
 }
 
 query Invite($id: String!) {
   invite(id: $id) {
-    id
-    email
-    existing
-    account {
-      ...Account
-    }
-    user {
-      ...User
-      account {
-        ...Account
-      }
-    }
+    ...Invite
   }
 }