diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json index bcffbe961b..e6c9955a80 100644 --- a/packages/onboarding-ui/.i18n/en.i18n.json +++ b/packages/onboarding-ui/.i18n/en.i18n.json @@ -74,6 +74,14 @@ "label": "New here? <1>Create account" } }, + "oauthAuthorizationPage": { + "title": "Authorization", + "allowLogin": "Do you wish to allow <1>{{name}} to login with your Rocket.Chat Cloud Account?", + "buttons": { + "authorize": "Authorize", + "goBack": "Go Back" + } + }, "newAccountForm": { "title": "Register new account" } diff --git a/packages/onboarding-ui/.loki/reference/desktop_pages_OauthAuthorizationPage_OauthAuthorizationPage.png b/packages/onboarding-ui/.loki/reference/desktop_pages_OauthAuthorizationPage_OauthAuthorizationPage.png new file mode 100644 index 0000000000..b16f2890fb Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/desktop_pages_OauthAuthorizationPage_OauthAuthorizationPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/mobile_pages_OauthAuthorizationPage_OauthAuthorizationPage.png b/packages/onboarding-ui/.loki/reference/mobile_pages_OauthAuthorizationPage_OauthAuthorizationPage.png new file mode 100644 index 0000000000..c93820202d Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/mobile_pages_OauthAuthorizationPage_OauthAuthorizationPage.png differ diff --git a/packages/onboarding-ui/.loki/reference/tablet_pages_OauthAuthorizationPage_OauthAuthorizationPage.png b/packages/onboarding-ui/.loki/reference/tablet_pages_OauthAuthorizationPage_OauthAuthorizationPage.png new file mode 100644 index 0000000000..8a606d4cee Binary files /dev/null and b/packages/onboarding-ui/.loki/reference/tablet_pages_OauthAuthorizationPage_OauthAuthorizationPage.png differ diff --git a/packages/onboarding-ui/src/index.ts b/packages/onboarding-ui/src/index.ts index 24450716dc..3ebdaf71da 100644 --- a/packages/onboarding-ui/src/index.ts +++ b/packages/onboarding-ui/src/index.ts @@ -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'; diff --git a/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.spec.tsx b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.spec.tsx new file mode 100644 index 0000000000..0c4396075b --- /dev/null +++ b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.spec.tsx @@ -0,0 +1,19 @@ +import ReactDOM from 'react-dom'; + +import OauthAuthorizationPage from './OauthAuthorizationPage'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render( + undefined} + error={{ + message: undefined, + onGoBack: () => undefined, + }} + />, + div + ); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.stories.tsx b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.stories.tsx new file mode 100644 index 0000000000..902c6d15e3 --- /dev/null +++ b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.stories.tsx @@ -0,0 +1,28 @@ +import type { Story, Meta } from '@storybook/react'; +import type { ComponentProps } from 'react'; + +import OauthAuthorizationPage from './OauthAuthorizationPage'; + +type Args = ComponentProps; + +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; + +export const _OauthAuthorizationPage: Story = (args) => ( + +); + +_OauthAuthorizationPage.storyName = 'OauthAuthorizationPage'; diff --git a/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.tsx b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.tsx new file mode 100644 index 0000000000..d9a7033313 --- /dev/null +++ b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/OauthAuthorizationPage.tsx @@ -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 ( + + + + + {t('page.oauthAuthorizationPage.title')} + + + + {error.message ? ( + <> + + Error + + {error.message} + + + + + ) : ( + <> + + Do you wish to allow + {{ name }} + to login with your Rocket.Chat Cloud Account? + + + + + + + )} + + + + + ); +}; + +export default OauthAuthorizationPage; diff --git a/packages/onboarding-ui/src/pages/OauthAuthorizationPage/index.ts b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/index.ts new file mode 100644 index 0000000000..d2721a762e --- /dev/null +++ b/packages/onboarding-ui/src/pages/OauthAuthorizationPage/index.ts @@ -0,0 +1 @@ +export { default } from './OauthAuthorizationPage';