feat(onboarding-ui): Add TOTP Form

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

@@ -309,6 +309,27 @@
       "button": {
         "text": "Save new password"
       }
+    },
+    "totpForm": {
+      "fields": {
+        "totpCode": {
+          "label": "TOTP Code",
+          "placeholder": "TOTP Code"
+        },
+        "backupCode": {
+          "label": "Backup Code",
+          "placeholder": "Backup Code"
+        }
+      },
+      "button": {
+        "text": "Log in"
+      },
+      "buttonBackupCode": {
+        "text": "Need to use backup code?"
+      },
+      "buttonTotpCode": {
+        "text": "Use TOTP code."
+      }
     }
   }
 }

packages/onboarding-ui/src/forms/TotpForm/Totp.stories.tsx

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

packages/onboarding-ui/src/forms/TotpForm/TotpForm.spec.tsx

@@ -0,0 +1,16 @@
+import ReactDOM from 'react-dom';
+
+import TotpForm from './TotpForm';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(
+    <TotpForm
+      onChangeTotpForm={() => undefined}
+      isBackupCode={false}
+      onSubmit={() => undefined}
+    />,
+    div
+  );
+  ReactDOM.unmountComponentAtNode(div);
+});

packages/onboarding-ui/src/forms/TotpForm/TotpForm.styles.tsx

@@ -0,0 +1,27 @@
+import styled from '@rocket.chat/styled';
+
+export const TotpActionsWrapper = styled('div')`
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: flex-start;
+  justify-content: stretch;
+
+  a {
+    margin-block-start: 16px;
+  }
+
+  @media (min-width: 1440px) {
+    flex-flow: row nowrap;
+    padding: 0;
+    width: 100%;
+    align-items: center;
+    max-width: 1152px;
+
+    a {
+      padding-inline: 8px;
+      margin-block-start: 0;
+    }
+  }
+`;

packages/onboarding-ui/src/forms/TotpForm/TotpForm.tsx

@@ -0,0 +1,104 @@
+import {
+  FieldGroup,
+  Field,
+  NumberInput,
+  TextInput,
+  Button,
+} from '@rocket.chat/fuselage';
+import type { ReactElement } from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import ActionLink from '../../common/ActionLink';
+import Form from '../../common/Form';
+import { TotpActionsWrapper } from './TotpForm.styles';
+
+export type TotpFormPayload = {
+  totpCode: string;
+  backupCode: string;
+};
+
+type TotpFormProps = {
+  initialValues?: TotpFormPayload;
+  onChangeTotpForm: () => void;
+  isBackupCode?: boolean;
+  formError?: string;
+  onSubmit: SubmitHandler<TotpFormPayload>;
+};
+
+const TotpForm = ({
+  onSubmit,
+  initialValues,
+  isBackupCode = false,
+  onChangeTotpForm,
+}: TotpFormProps): ReactElement => {
+  const { t } = useTranslation();
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isValidating, isSubmitting },
+  } = useForm<TotpFormPayload>({
+    defaultValues: {
+      ...initialValues,
+    },
+  });
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form.Container>
+        <FieldGroup>
+          <Field>
+            {isBackupCode ? (
+              <Field.Label>
+                {t('form.totpForm.fields.backupCode.label')}
+              </Field.Label>
+            ) : (
+              <Field.Label>
+                {t('form.totpForm.fields.totpCode.label')}
+              </Field.Label>
+            )}
+            <Field.Row>
+              {isBackupCode ? (
+                <TextInput
+                  {...register('backupCode', {
+                    required: String(t('component.form.requiredField')),
+                  })}
+                  placeholder={t('form.totpForm.fields.backupCode.placeholder')}
+                />
+              ) : (
+                <NumberInput
+                  {...register('totpCode', {
+                    required: String(t('component.form.requiredField')),
+                  })}
+                  placeholder={t('form.totpForm.fields.totpCode.placeholder')}
+                />
+              )}
+            </Field.Row>
+            {errors.backupCode && (
+              <Field.Error>{errors.backupCode.message}</Field.Error>
+            )}
+            {errors.totpCode && (
+              <Field.Error>{errors.totpCode.message}</Field.Error>
+            )}
+          </Field>
+        </FieldGroup>
+      </Form.Container>
+      <Form.Footer>
+        <TotpActionsWrapper>
+          <Button type='submit' disabled={isValidating || isSubmitting} primary>
+            {t('form.totpForm.button.text')}
+          </Button>
+          <ActionLink fontScale='p2' onClick={onChangeTotpForm}>
+            {isBackupCode
+              ? t('form.totpForm.buttonTotpCode.text')
+              : t('form.totpForm.buttonBackupCode.text')}
+          </ActionLink>
+        </TotpActionsWrapper>
+      </Form.Footer>
+    </Form>
+  );
+};
+
+export default TotpForm;

packages/onboarding-ui/src/forms/TotpForm/index.ts

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

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

@@ -6,6 +6,7 @@ it('renders without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(
     <LoginPage
+      isMfa={false}
       initialValues={undefined}
       onChangeForm={() => undefined}
       onResetPassword={() => undefined}

packages/onboarding-ui/src/pages/LoginPage/LoginPage.tsx

@@ -8,14 +8,26 @@ import BackgroundLayer from '../../common/BackgroundLayer';
 import { OnboardingLogo } from '../../common/OnboardingLogo';
 import LoginForm from '../../forms/LoginForm';
 import type { LoginFormPayload } from '../../forms/LoginForm/LoginForm';
+import TotpForm from '../../forms/TotpForm';
+import type { TotpFormPayload } from '../../forms/TotpForm/TotpForm';
+
+type TotpFormProps = {
+  initialValues?: TotpFormPayload;
+  onChangeTotpForm: () => void;
+  isBackupCode?: boolean;
+  formError?: string;
+  onSubmit: SubmitHandler<TotpFormPayload>;
+};
 
 type LoginPageProps = {
   initialValues?: Omit<LoginFormPayload, 'password'>;
   onChangeForm: () => void;
   onResetPassword: () => void;
   formError?: string;
   isPasswordLess: boolean;
+  isMfa: boolean;
   onCreateAccount: () => void;
+  mfaProps?: TotpFormProps;
   onSubmit: SubmitHandler<LoginFormPayload>;
 };
 
@@ -24,6 +36,7 @@ const LoginPage = ({
   ...props
 }: LoginPageProps): ReactElement => {
   const { t } = useTranslation();
+  const { isMfa, mfaProps } = props;
 
   return (
     <BackgroundLayer>
@@ -51,20 +64,26 @@ const LoginPage = ({
 
         <Box width='full' backgroundColor='white'>
           <Box fontScale='c1'>
-            <LoginForm {...props} />
+            {isMfa && !!mfaProps ? (
+              <TotpForm {...mfaProps} />
+            ) : (
+              <LoginForm {...props} />
+            )}
           </Box>
         </Box>
         <Box mb='x30' fontScale='p2'>
-          <Trans i18nKey='page.loginPage.createAccount.label'>
-            New here?
-            <ActionLink
-              fontWeight={400}
-              fontScale='p2'
-              onClick={onCreateAccount}
-            >
-              Create account
-            </ActionLink>
-          </Trans>
+          {!isMfa && (
+            <Trans i18nKey='page.loginPage.createAccount.label'>
+              New here?
+              <ActionLink
+                fontWeight={400}
+                fontScale='p2'
+                onClick={onCreateAccount}
+              >
+                Create account
+              </ActionLink>
+            </Trans>
+          )}
         </Box>
       </Box>
     </BackgroundLayer>