feat(onboarding-ui): Magic Link Email Page (#524)

Author: dougfabris

packages/onboarding-ui/.i18n/en.i18n.json

@@ -53,6 +53,10 @@
     "requestTrial": {
       "title": "Request a 30-\u2060day Trial",
       "subtitle": "Try our enterprise solution for free"
+    },
+    "magicLinkEmail": {
+      "title": "We emailed you a magic link",
+      "subtitle": "Click the link in the email we just sent you to sign in to your workspace."
     }
   },
   "form": {

packages/onboarding-ui/.loki/reference/desktop_pages_MagicLinkEmailPage_MagicLinkEmailPage.png

@@ -7,6 +7,7 @@ export { default as ConfirmationProcessPage } from './pages/ConfirmationProcessP
 export { default as CreateCloudWorkspacePage } from './pages/CreateCloudWorkspacePage';
 export { default as EmailConfirmedPage } from './pages/EmailConfirmedPage';
 export { default as InvalidLinkPage } from './pages/InvalidLinkPage';
+export { default as MagicLinkEmailPage } from './pages/MagicLinkEmailPage';
 export { default as OrganizationInfoPage } from './pages/OrganizationInfoPage';
 export { default as RegisterServerPage } from './pages/RegisterServerPage';
 export { default as RequestTrialPage } from './pages/RequestTrialPage';

packages/onboarding-ui/.loki/reference/mobile_pages_MagicLinkEmailPage_MagicLinkEmailPage.png

@@ -0,0 +1,15 @@
+import ReactDOM from 'react-dom';
+
+import MagicLinkEmailPage from './MagicLinkEmailPage';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <MagicLinkEmailPage
+      onResendEmailRequest={() => undefined}
+      onChangeEmailRequest={() => undefined}
+    />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/onboarding-ui/.loki/reference/tablet_pages_MagicLinkEmailPage_MagicLinkEmailPage.png

@@ -0,0 +1,20 @@
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import MagicLinkEmailPage from './MagicLinkEmailPage';
+
+type Args = ComponentProps<typeof MagicLinkEmailPage>;
+
+export default {
+  title: 'pages/MagicLinkEmailPage',
+  component: MagicLinkEmailPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+} as Meta<Args>;
+
+export const _MagicLinkEmailPage: Story<Args> = (args) => (
+  <MagicLinkEmailPage {...args} />
+);
+_MagicLinkEmailPage.storyName = 'MagicLinkEmailPage';

packages/onboarding-ui/src/index.ts

@@ -0,0 +1,62 @@
+import { Box, Margins } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { useDarkMode } from '../../common/DarkModeProvider';
+import EmailCodeFallback from '../../common/EmailCodeFallback';
+import RocketChatLogo from '../../common/RocketChatLogo';
+
+type MagicLinkEmailProps = {
+  onResendEmailRequest: () => void;
+  onChangeEmailRequest: () => void;
+};
+
+const MagicLinkEmailPage = ({
+  onResendEmailRequest,
+  onChangeEmailRequest,
+}: MagicLinkEmailProps): ReactElement => {
+  const darkMode = useDarkMode();
+  const { t } = useTranslation();
+
+  return (
+    <BackgroundLayer>
+      <Box
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        textAlign='center'
+        width='100%'
+        maxWidth={576}
+        paddingBlock={32}
+        paddingInline={16}
+        color={darkMode ? colors.white : colors.n900}
+      >
+        <Margins blockEnd={32}>
+          <Box width='100%' maxWidth={180}>
+            <RocketChatLogo />
+          </Box>
+
+          <Box
+            fontWeight={800}
+            fontSize='x52'
+            lineHeight='x62'
+            fontFamily='sans'
+          >
+            {t('page.magicLinkEmail.title')}
+          </Box>
+
+          <Box fontScale='s1'>{t('page.magicLinkEmail.subtitle')}</Box>
+
+          <EmailCodeFallback
+            onResendEmailRequest={onResendEmailRequest}
+            onChangeEmailRequest={onChangeEmailRequest}
+          />
+        </Margins>
+      </Box>
+    </BackgroundLayer>
+  );
+};
+
+export default MagicLinkEmailPage;

packages/onboarding-ui/src/pages/MagicLinkEmailPage/MagicLinkEmailPage.spec.tsx

@@ -0,0 +1 @@
+export { default } from './MagicLinkEmailPage';