fix invitation logged out flow

a-type · Nov 11, 2024 · 4e1b7ca · 4e1b7ca
1 parent 71f26be
commit 4e1b7ca
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 8 deletions.
diff --git a/server/src/server.ts b/server/src/server.ts
@@ -78,7 +78,7 @@ router
 	.all('/gnocchi/*', rateLimit, gnocchiRouter.fetch)
 	.all('/wishWash/*', rateLimit, wishWashRouter.fetch);
 // for local dev only, add endpoint to serve user files.
-if (process.env.NODE_ENV === 'development') {
+if (process.env.NODE_ENV !== 'production') {
 	router.get('/userFiles/:dir/:id/:filename', async (req) => {
 		try {
 			const filePath = join(

diff --git a/web/src/components/plan/MembersAndInvitations.tsx b/web/src/components/plan/MembersAndInvitations.tsx
@@ -72,10 +72,10 @@ export function MembersAndInvitations() {
 				{plan?.pendingInvitations.map((invite) => (
 					<CardRoot key={invite.id}>
 						<CardMain>
-							<Avatar />
-							<div className="flex flex-col gap-2 items-start justify-start">
+							<CardTitle className="flex-row mt-0 color-gray-7">
+								<Avatar />
 								<span>Invited: {invite.email}</span>
-							</div>
+							</CardTitle>
 						</CardMain>
 						<CardFooter>
 							<CardActions>

diff --git a/web/src/pages/ClaimInvitePage.tsx b/web/src/pages/ClaimInvitePage.tsx
@@ -43,13 +43,17 @@ function ClaimInvitePage() {
 
 	const infoResult = useSuspenseQuery(claimInviteInfo, {
 		variables: { code },
+		// avoid error boundary when user is not logged in.
+		errorPolicy: 'ignore',
 	});
 
 	// redirect non-auth users to join
-	const isNotAuthenticated = infoResult.data && !infoResult.data.me;
+	const isNotAuthenticated = !infoResult.data?.me;
 	useEffect(() => {
 		if (isNotAuthenticated) {
-			navigate(`/login?returnTo=${encodeURIComponent(`/claim/${code}`)}`);
+			navigate(
+				`/login?tab=signup&returnTo=${encodeURIComponent(`/invite/${code}`)}&message=${encodeURIComponent('Sign up or log in to claim your invite.')}`,
+			);
 		}
 	}, [navigate, isNotAuthenticated, code]);
 

diff --git a/web/src/pages/LoginPage.tsx b/web/src/pages/LoginPage.tsx
@@ -40,6 +40,7 @@ export default function LoginPage() {
 	}, [error]);
 
 	const activeTab = searchParams.get('tab') ?? 'signin';
+	const message = searchParams.get('message');
 
 	const [tosAgreed, setTosAgreed] = useState(false);
 
@@ -69,6 +70,9 @@ export default function LoginPage() {
 			</div>
 			<div className="flex flex-col gap-3 p-6 items-center bg-white border-solid border border-1 border-black rounded-lg relative z-1">
 				<h1 className="font-fancy mb-0">{title}</h1>
+				{message && (
+					<P className="px-3 py-1 rounded-full bg-accent-light">{message}</P>
+				)}
 				{appReferrer && (
 					<P className="italic color-gray-7 text-sm">A Biscuits.club app</P>
 				)}
@@ -113,7 +117,7 @@ export default function LoginPage() {
 						</label>
 						<OAuthSigninButton
 							endpoint={`${CONFIG.API_ORIGIN}/auth/provider/google/login`}
-							returnTo={'/settings?tab=subscription'}
+							returnTo={returnTo || '/settings?tab=subscription'}
 							inviteId={searchParams.get('inviteId')}
 							className="mx-auto"
 							disabled={!tosAgreed}
@@ -124,7 +128,7 @@ export default function LoginPage() {
 						<Or />
 						<EmailSignupForm
 							endpoint={`${CONFIG.API_ORIGIN}/auth/begin-email-signup`}
-							returnTo={'/settings?tab=subscription'}
+							returnTo={returnTo || '/settings?tab=subscription'}
 							disabled={!tosAgreed}
 							appState={appState}
 						/>