feat(onboarding-ui): add oauth auth page (#586)

* feat(onboarding-ui): add Oauth Auth Page

* chore: update loki screenshots

* chore: remove tag cloud from logo

* chore: update loki screenshots

Author: PedroRorato

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

@@ -74,6 +74,14 @@
         "label": "New here? <1>Create account</1>"
       }
     },
+    "oauthAuthorizationPage": {
+      "title": "Authorization",
+      "allowLogin": "Do you wish to allow <1>{{name}}</1> to login with your Rocket.Chat Cloud Account?",
+      "buttons": {
+        "authorize": "Authorize",
+        "goBack": "Go Back"
+      }
+    },
     "newAccountForm": {
       "title": "Register new account"
     }

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

@@ -13,3 +13,4 @@ export { default as RequestTrialPage } from './pages/RequestTrialPage';
 export { default as DarkModeProvider } from './common/DarkModeProvider';
 export { default as LoginPage } from './pages/LoginPage';
 export { default as CreateNewAccountPage } from './pages/CreateNewAccountPage';
+export { default as OauthAuthorizationPage } from './pages/OauthAuthorizationPage';

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

@@ -0,0 +1,19 @@
+import ReactDOM from 'react-dom';
+
+import OauthAuthorizationPage from './OauthAuthorizationPage';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <OauthAuthorizationPage
+      clientName={undefined}
+      onClickAuthorizeOAuth={() => undefined}
+      error={{
+        message: undefined,
+        onGoBack: () => undefined,
+      }}
+    />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

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

@@ -0,0 +1,28 @@
+import type { Story, Meta } from '@storybook/react';
+import type { ComponentProps } from 'react';
+
+import OauthAuthorizationPage from './OauthAuthorizationPage';
+
+type Args = ComponentProps<typeof OauthAuthorizationPage>;
+
+export default {
+  title: 'pages/OauthAuthorizationPage',
+  component: OauthAuthorizationPage,
+  parameters: {
+    actions: { argTypesRegex: '^on.*' },
+    layout: 'fullscreen',
+  },
+  args: {
+    clientName: 'Rocket.Chat',
+    error: {
+      message: '',
+      onGoBack: () => console.log('Back'),
+    },
+  },
+} as Meta<Args>;
+
+export const _OauthAuthorizationPage: Story<Args> = (args) => (
+  <OauthAuthorizationPage {...args} />
+);
+
+_OauthAuthorizationPage.storyName = 'OauthAuthorizationPage';

packages/onboarding-ui/src/index.ts

@@ -0,0 +1,90 @@
+import { Box, Button } from '@rocket.chat/fuselage';
+import colors from '@rocket.chat/fuselage-tokens/colors.json';
+import type { ReactElement } from 'react';
+import { Trans, useTranslation } from 'react-i18next';
+
+import BackgroundLayer from '../../common/BackgroundLayer';
+import { OnboardingLogo } from '../../common/OnboardingLogo';
+
+type OauthAuthorizationPageProps = {
+  clientName?: string;
+  onClickAuthorizeOAuth: () => void;
+  error: {
+    message?: string;
+    onGoBack?: () => void;
+  };
+};
+
+const OauthAuthorizationPage = ({
+  clientName,
+  onClickAuthorizeOAuth,
+  error,
+}: OauthAuthorizationPageProps): ReactElement => {
+  const { t } = useTranslation();
+
+  const name = clientName || '...loading...';
+
+  return (
+    <BackgroundLayer>
+      <Box
+        display='flex'
+        flexDirection='column'
+        alignItems='center'
+        textAlign='center'
+        width='100%'
+        maxWidth={576}
+        paddingBlock={32}
+        paddingInline={16}
+      >
+        <OnboardingLogo />
+        <Box
+          fontWeight={500}
+          width='100%'
+          mbs='x24'
+          mbe='x36'
+          fontSize='x57'
+          lineHeight='x62'
+          fontFamily='sans'
+        >
+          {t('page.oauthAuthorizationPage.title')}
+        </Box>
+        <Box width='full' backgroundColor='white'>
+          <Box fontScale='p1' p='x40' textAlign='start' color={colors.n900}>
+            {error.message ? (
+              <>
+                <Box fontScale='h1' mbe='x18'>
+                  Error
+                </Box>
+                {error.message}
+                <Box mbs='x24'>
+                  <Button onClick={error.onGoBack} primary>
+                    {t('page.oauthAuthorizationPage.buttons.goBack')}
+                  </Button>
+                </Box>
+              </>
+            ) : (
+              <>
+                <Trans
+                  i18nKey='page.oauthAuthorizationPage.allowLogin'
+                  name={name}
+                >
+                  Do you wish to allow
+                  <strong>{{ name }}</strong>
+                  to login with your Rocket.Chat Cloud Account?
+                </Trans>
+
+                <Box mbs='x24'>
+                  <Button onClick={onClickAuthorizeOAuth} primary>
+                    {t('page.oauthAuthorizationPage.buttons.authorize')}
+                  </Button>
+                </Box>
+              </>
+            )}
+          </Box>
+        </Box>
+      </Box>
+    </BackgroundLayer>
+  );
+};
+
+export default OauthAuthorizationPage;

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

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