🪟 🎉 Adjust login page headings to reflect user invitation (#11710)

Co-authored-by: Vladimir <[email protected]>
airbytehq · Mar 19, 2024 · bec0aa6 · bec0aa6
1 parent f492104
commit bec0aa6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 4 deletions.
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -1494,6 +1494,8 @@
   "login.returnToLogin": "Return to login",
   "login.signup.submitButton": "Sign up",
   "login.loginTitle": "Log in to Airbyte",
+  "login.acceptInvite": "You've been invited to collaborate on Airbyte",
+  "login.acceptInvite.subtitle": "Log in or sign up to get started",
   "login.resendEmail": "Didn't receive the email? Send it again",
   "login.yourEmail": "Your work email*",
   "login.inviteEmail": "For security, re-enter your invite email*",

diff --git a/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx b/airbyte-webapp/src/packages/cloud/views/auth/LoginPage/LoginPage.tsx
@@ -9,7 +9,7 @@ import { HeadTitle } from "components/common/HeadTitle";
 import { Form, FormControl } from "components/forms";
 import { Box } from "components/ui/Box";
 import { Button } from "components/ui/Button";
-import { FlexContainer } from "components/ui/Flex";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { Heading } from "components/ui/Heading";
 import { Link } from "components/ui/Link";
 import { Text } from "components/ui/Text";
@@ -56,6 +56,7 @@ export const LoginPage: React.FC = () => {
   const [searchParams] = useSearchParams();
   const [keycloakAuthEnabled] = useLocalStorage("airbyte_keycloak-auth-ui", false);
   const loginRedirectString = searchParams.get("loginRedirect");
+  const isAcceptingInvitation = loginRedirectString?.includes("accept-invite");
 
   const navigate = useNavigate();
 
@@ -98,9 +99,18 @@ export const LoginPage: React.FC = () => {
   return (
     <FlexContainer direction="column" gap="xl" className={styles.container}>
       <HeadTitle titles={[{ id: "login.login" }]} />
-      <Heading as="h1" size="xl" color="blue">
-        <FormattedMessage id="login.loginTitle" />
-      </Heading>
+      <FlexItem>
+        <Heading as="h1" size="xl" color="blue">
+          <FormattedMessage id={isAcceptingInvitation ? "login.acceptInvite" : "login.loginTitle"} />
+        </Heading>
+        {isAcceptingInvitation && (
+          <Box pt="md">
+            <Heading as="h2" size="md" color="darkBlue">
+              <FormattedMessage id="login.acceptInvite.subtitle" />
+            </Heading>
+          </Box>
+        )}
+      </FlexItem>
 
       {loginWithOAuth && (
         <>