From 88d9050b88629077e5f8009bade3b4ede3e324a2 Mon Sep 17 00:00:00 2001
From: Tiago Evangelista Pinto <tiago.evangelista@rocket.chat>
Date: Tue, 3 Oct 2023 17:05:50 -0300
Subject: [PATCH] new design changes

---
 packages/onboarding-ui/.i18n/en.i18n.json     |  11 +-
 packages/onboarding-ui/package.json           |   1 +
 .../RegisterOfflineForm.stories.tsx           |   4 +-
 .../RegisterOfflineForm.tsx                   | 125 +++------------
 .../RegisterOfflineForm/steps/CopyStep.tsx    | 146 ++++++++++++++++++
 .../RegisterOfflineForm/steps/PasteStep.tsx   |  75 +++++++++
 .../RegisterOfflinePage.tsx                   |   1 +
 yarn.lock                                     |  42 +++++
 8 files changed, 301 insertions(+), 104 deletions(-)
 create mode 100644 packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx
 create mode 100644 packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/PasteStep.tsx

diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json
index e56b07e6e2..5e47bcd8e1 100644
--- a/packages/onboarding-ui/.i18n/en.i18n.json
+++ b/packages/onboarding-ui/.i18n/en.i18n.json
@@ -9,7 +9,9 @@
         "registerWorkspace": "Register workspace",
         "register": "Register",
         "registerOffline": "Register offline",
-        "confirm": "Confirm"
+        "confirm": "Confirm",
+        "pasteHere": "Paste here...",
+        "completeRegistration": "Complete registration"
       },
       "termsAndConditions": "I agree with <1>Terms and Conditions</1> and <3>Privacy Policy</3>"
     },
@@ -213,7 +215,12 @@
     },
     "registerOfflineForm": {
       "title": "Register Offline",
-      "description": "If for any reason your workspace can’t be connected to the internet, follow these steps:<1></1>1. Go to: <2>cloud.rocket.chat > Workspaces</2> and click “<3>Register self-managed</3>”<4></4>2. Copy the token and paste it below",
+      "copyStep": {
+        "description": "If for any reason your workspace can’t be connected to the internet, follow these steps:<1></1>1. Go to: <2>cloud.rocket.chat > Workspaces</2> and click “<3>Register self-managed</3>”<4></4>2. Click “<5>Continue offline</5>”<6></6>3. In the <7>Register offline workspace</7> dialog in cloud.rocket.chat, paste the token in the box below"
+      },
+      "pasteStep": {
+        "description": "1. In <1>cloud.rocket.chat</1> get the generated text and paste below to complete your registration process"
+      },
       "fields": {
         "registrationToken": {
           "inputLabel": "Registration token"
diff --git a/packages/onboarding-ui/package.json b/packages/onboarding-ui/package.json
index 85d1094814..8725bb6bc2 100644
--- a/packages/onboarding-ui/package.json
+++ b/packages/onboarding-ui/package.json
@@ -80,6 +80,7 @@
     "typescript": "~5.0.4"
   },
   "dependencies": {
+    "clipboard": "~2.0.11",
     "i18next": "~21.6.16",
     "react-hook-form": "~7.27.1"
   },
diff --git a/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.stories.tsx b/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.stories.tsx
index b4e4823cb7..122fc4892b 100644
--- a/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.stories.tsx
+++ b/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.stories.tsx
@@ -13,8 +13,8 @@ export default {
     actions: { argTypesRegex: '^on.*' },
   },
   args: {
-    currentStep: 1,
-    stepCount: 1,
+    clientKey:
+      'AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
   },
 } as Meta<Args>;
 
diff --git a/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.tsx b/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.tsx
index 6e37fa8913..9b5360a959 100644
--- a/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.tsx
+++ b/packages/onboarding-ui/src/forms/RegisterOfflineForm/RegisterOfflineForm.tsx
@@ -1,21 +1,11 @@
-import {
-  Box,
-  ButtonGroup,
-  Button,
-  Field,
-  CheckBox,
-  FieldLabel,
-  FieldRow,
-  FieldError,
-  TextInput,
-  Label,
-} from '@rocket.chat/fuselage';
-import { useUniqueId, useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import { Form } from '@rocket.chat/layout';
-import type { ReactElement } from 'react';
+import { useState, type ReactElement } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
-import { useTranslation, Trans } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+
+import CopyStep from './steps/CopyStep';
+import PasteStep from './steps/PasteStep';
 
 export type RegisterOfflinePayload = {
   token: string;
@@ -25,21 +15,26 @@ export type RegisterOfflinePayload = {
 type RegisterOfflineFormProps = {
   termsHref: string;
   policyHref: string;
+  clientKey: string;
   onSubmit: SubmitHandler<RegisterOfflinePayload>;
   onBackButtonClick: () => void;
 };
 
+export const Steps = {
+  COPY: 'copy',
+  PASTE: 'paste',
+};
+
 const RegisterOfflineForm = ({
   termsHref,
   policyHref,
+  clientKey,
   onSubmit,
   onBackButtonClick,
 }: RegisterOfflineFormProps): ReactElement => {
   const { t } = useTranslation();
-  const emailField = useUniqueId();
 
-  const breakpoints = useBreakpoints();
-  const isMobile = !breakpoints.includes('md');
+  const [step, setStep] = useState(Steps.COPY);
 
   const form = useForm<RegisterOfflinePayload>({
     mode: 'onChange',
@@ -49,11 +44,7 @@ const RegisterOfflineForm = ({
     },
   });
 
-  const {
-    register,
-    formState: { isSubmitting, isValid, errors },
-    handleSubmit,
-  } = form;
+  const { handleSubmit } = form;
 
   return (
     <FormProvider {...form}>
@@ -61,83 +52,17 @@ const RegisterOfflineForm = ({
         <Form.Header>
           <Form.Title>{t('form.registerOfflineForm.title')}</Form.Title>
         </Form.Header>
-        <Form.Container>
-          <Box mbe='24px' fontScale='p2'>
-            <Trans key={'form.registerOfflineForm.description'}>
-              If for any reason your workspace can’t be connected to the
-              internet, follow these steps:
-              <Box mbe='24px' />
-              1. Go to: <strong>{'cloud.rocket.chat > Workspaces'}</strong> and
-              click “<strong>Register self-managed</strong>”<br />
-              2. Copy the token and paste it below"
-            </Trans>
-          </Box>
-          <Field>
-            <FieldLabel
-              required
-              display='flex'
-              alignItems='center'
-              htmlFor={emailField}
-            >
-              {t(
-                'form.registerOfflineForm.fields.registrationToken.inputLabel'
-              )}
-            </FieldLabel>
-            <FieldRow>
-              <TextInput
-                {...register('token', {
-                  required: true,
-                })}
-                id={emailField}
-              />
-            </FieldRow>
-            {errors.token && (
-              <FieldError>{t('component.form.requiredField')}</FieldError>
-            )}
-          </Field>
-          <Box mbs={24}>
-            <Box
-              display='flex'
-              flexDirection='row'
-              alignItems='flex-start'
-              color='default'
-              fontScale='c1'
-              lineHeight={20}
-            >
-              <Box mie={8}>
-                <CheckBox {...register('agreement', { required: true })} />{' '}
-              </Box>
-              <Label required htmlFor='agreement' withRichContent>
-                <Trans i18nKey='component.form.termsAndConditions'>
-                  I agree with
-                  <a href={termsHref} target='_blank' rel='noopener noreferrer'>
-                    Terms and Conditions
-                  </a>
-                  and
-                  <a
-                    href={policyHref}
-                    target='_blank'
-                    rel='noopener noreferrer'
-                  >
-                    Privacy Policy
-                  </a>
-                </Trans>
-              </Label>
-            </Box>
-          </Box>
-        </Form.Container>
-        <Form.Footer>
-          <Box display='flex' flexDirection='column'>
-            <ButtonGroup vertical={isMobile} flexGrow={1}>
-              <Button type='submit' primary disabled={isSubmitting || !isValid}>
-                {t('component.form.action.register')}
-              </Button>
-              <Button type='button' onClick={onBackButtonClick}>
-                {t('component.form.action.back')}
-              </Button>
-            </ButtonGroup>
-          </Box>
-        </Form.Footer>
+        {step === Steps.COPY ? (
+          <CopyStep
+            termsHref={termsHref}
+            policyHref={policyHref}
+            clientKey={clientKey}
+            setStep={setStep}
+            onBackButtonClick={onBackButtonClick}
+          />
+        ) : (
+          <PasteStep setStep={setStep} />
+        )}
       </Form>
     </FormProvider>
   );
diff --git a/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx b/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx
new file mode 100644
index 0000000000..a7482922d2
--- /dev/null
+++ b/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx
@@ -0,0 +1,146 @@
+import {
+  Box,
+  Button,
+  ButtonGroup,
+  CheckBox,
+  Label,
+  Scrollable,
+} from '@rocket.chat/fuselage';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import { Form } from '@rocket.chat/layout';
+import Clipboard from 'clipboard';
+import { useRef, type ReactElement, useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Steps } from '../RegisterOfflineForm';
+
+type CopyStepProps = {
+  termsHref: string;
+  policyHref: string;
+  clientKey: string;
+  onBackButtonClick: () => void;
+  setStep: (step: string) => void;
+};
+
+const CopyStep = ({
+  termsHref,
+  policyHref,
+  clientKey,
+  setStep,
+  onBackButtonClick,
+}: CopyStepProps): ReactElement => {
+  const { t } = useTranslation();
+  const breakpoints = useBreakpoints();
+  const isMobile = !breakpoints.includes('md');
+  const copyRef = useRef<HTMLButtonElement>(null);
+  const {
+    register,
+    formState: { isValid },
+  } = useFormContext();
+
+  useEffect(() => {
+    if (!copyRef.current) {
+      return;
+    }
+
+    const clipboard = new Clipboard(copyRef.current);
+
+    return (): void => {
+      clipboard.destroy();
+    };
+  }, []);
+
+  return (
+    <>
+      <Form.Container>
+        <Box mbe='24px' fontScale='p2'>
+          <Trans key={'form.registerOfflineForm.copyStep.description'}>
+            If for any reason your workspace can’t be connected to the internet,
+            follow these steps:
+            <Box mbe='24px' />
+            1. Go to: <strong>{'cloud.rocket.chat > Workspaces'}</strong> and
+            click “<strong>Register self-managed</strong>”<br />
+            2. Click “<strong>Continue offline</strong>”
+            <br />
+            3. In the <strong>Register offline workspace</strong> dialog in
+            cloud.rocket.chat, paste the token in the box below
+          </Trans>
+        </Box>
+        <Box
+          display='flex'
+          flexDirection='column'
+          alignItems='stretch'
+          padding={16}
+          flexGrow={1}
+          backgroundColor='dark'
+        >
+          <Scrollable vertical>
+            <Box
+              height='x108'
+              fontFamily='mono'
+              fontScale='p2'
+              color='white'
+              style={{ wordBreak: 'break-all' }}
+            >
+              {clientKey}
+            </Box>
+          </Scrollable>
+          <Button
+            icon='copy'
+            ref={copyRef}
+            primary
+            data-clipboard-text={clientKey}
+          />
+        </Box>
+        <Box mbs={24}>
+          <Box
+            display='flex'
+            flexDirection='row'
+            alignItems='flex-start'
+            color='default'
+            fontScale='c1'
+            lineHeight={20}
+          >
+            <Box mie={8}>
+              <CheckBox {...register('agreement', { required: true })} />{' '}
+            </Box>
+            <Label required htmlFor='agreement' withRichContent>
+              <Trans i18nKey='component.form.termsAndConditions'>
+                I agree with
+                <a href={termsHref} target='_blank' rel='noopener noreferrer'>
+                  Terms and Conditions
+                </a>
+                and
+                <a href={policyHref} target='_blank' rel='noopener noreferrer'>
+                  Privacy Policy
+                </a>
+              </Trans>
+            </Label>
+          </Box>
+        </Box>
+      </Form.Container>
+      <Form.Footer>
+        <Box display='flex' flexDirection='column'>
+          <ButtonGroup vertical={isMobile} flexGrow={1}>
+            <Button
+              type='button'
+              primary
+              disabled={!isValid}
+              onClick={() => {
+                setStep(Steps.PASTE);
+              }}
+            >
+              {t('component.form.action.next')}
+            </Button>
+            <Button type='button' onClick={onBackButtonClick}>
+              {t('component.form.action.back')}
+            </Button>
+          </ButtonGroup>
+        </Box>
+      </Form.Footer>
+    </>
+  );
+};
+
+export default CopyStep;
diff --git a/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/PasteStep.tsx b/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/PasteStep.tsx
new file mode 100644
index 0000000000..30d6838a95
--- /dev/null
+++ b/packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/PasteStep.tsx
@@ -0,0 +1,75 @@
+import { Box, Button, ButtonGroup, Scrollable } from '@rocket.chat/fuselage';
+import { useBreakpoints } from '@rocket.chat/fuselage-hooks';
+import { Form } from '@rocket.chat/layout';
+import type { ReactElement } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { Trans, useTranslation } from 'react-i18next';
+
+import { Steps } from '../RegisterOfflineForm';
+
+type PasteStepProps = {
+  setStep: (step: string) => void;
+};
+
+const PasteStep = ({ setStep }: PasteStepProps): ReactElement => {
+  const { t } = useTranslation();
+  const breakpoints = useBreakpoints();
+  const isMobile = !breakpoints.includes('md');
+  const {
+    register,
+    formState: { isSubmitting, isValid },
+  } = useFormContext();
+
+  return (
+    <>
+      <Form.Container>
+        <Box mbe='24px' fontScale='p2'>
+          <Trans key={'form.registerOfflineForm.pasteStep.description'}>
+            1. In <strong>cloud.rocket.chat</strong> get the generated text and
+            paste below to complete your registration process
+          </Trans>
+        </Box>
+        <Box
+          display='flex'
+          flexDirection='column'
+          alignItems='stretch'
+          padding={16}
+          flexGrow={1}
+          backgroundColor='dark'
+        >
+          <Scrollable vertical>
+            <Box
+              {...register('token', { required: true })}
+              is='textarea'
+              backgroundColor={'dark'}
+              height='x108'
+              fontFamily='mono'
+              fontScale='p2'
+              color='white'
+              style={{ wordBreak: 'break-all', resize: 'none' }}
+              placeholder={t('component.form.action.pasteHere')}
+              autoComplete='off'
+              autoCorrect='off'
+              autoCapitalize='off'
+              spellCheck='false'
+            />
+          </Scrollable>
+        </Box>
+      </Form.Container>
+      <Form.Footer>
+        <Box display='flex' flexDirection='column'>
+          <ButtonGroup vertical={isMobile} flexGrow={1}>
+            <Button type='submit' primary disabled={isSubmitting || !isValid}>
+              {t('component.form.action.completeRegistration')}
+            </Button>
+            <Button type='button' onClick={() => setStep(Steps.COPY)}>
+              {t('component.form.action.back')}
+            </Button>
+          </ButtonGroup>
+        </Box>
+      </Form.Footer>
+    </>
+  );
+};
+
+export default PasteStep;
diff --git a/packages/onboarding-ui/src/pages/RegisterOfflinePage/RegisterOfflinePage.tsx b/packages/onboarding-ui/src/pages/RegisterOfflinePage/RegisterOfflinePage.tsx
index 116c5ec8ed..2ae4138ced 100644
--- a/packages/onboarding-ui/src/pages/RegisterOfflinePage/RegisterOfflinePage.tsx
+++ b/packages/onboarding-ui/src/pages/RegisterOfflinePage/RegisterOfflinePage.tsx
@@ -10,6 +10,7 @@ import type { RegisterOfflinePayload } from '../../forms/RegisterOfflineForm/Reg
 type RegisterOfflinePageProps = {
   termsHref: string;
   policyHref: string;
+  clientKey: string;
   onSubmit: SubmitHandler<RegisterOfflinePayload>;
   onBackButtonClick: () => void;
 };
diff --git a/yarn.lock b/yarn.lock
index dfee1fc0c4..1746647c84 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6824,6 +6824,7 @@ __metadata:
     "@types/react": ~17.0.57
     "@types/react-dom": ^17.0.19
     bump: "workspace:~"
+    clipboard: ~2.0.11
     countries-list: ^2.6.1
     eslint: ~8.38.0
     i18next: ~21.6.16
@@ -12486,6 +12487,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clipboard@npm:~2.0.11":
+  version: 2.0.11
+  resolution: "clipboard@npm:2.0.11"
+  dependencies:
+    good-listener: ^1.2.2
+    select: ^1.1.2
+    tiny-emitter: ^2.0.0
+  checksum: 413055a6038e43898e0e895216b58ed54fbf386f091cb00188875ef35b186cefbd258acdf4cb4b0ac87cbc00de936f41b45dde9fe1fd1a57f7babb28363b8748
+  languageName: node
+  linkType: hard
+
 "cliui@npm:^6.0.0":
   version: 6.0.0
   resolution: "cliui@npm:6.0.0"
@@ -14053,6 +14065,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"delegate@npm:^3.1.2":
+  version: 3.2.0
+  resolution: "delegate@npm:3.2.0"
+  checksum: d943058fe05897228b158cbd1bab05164df28c8f54127873231d6b03b0a5acc1b3ee1f98ac70ccc9b79cd84aa47118a7de111fee2923753491583905069da27d
+  languageName: node
+  linkType: hard
+
 "delegates@npm:^1.0.0":
   version: 1.0.0
   resolution: "delegates@npm:1.0.0"
@@ -16802,6 +16821,15 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"good-listener@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "good-listener@npm:1.2.2"
+  dependencies:
+    delegate: ^3.1.2
+  checksum: f39fb82c4e41524f56104cfd2d7aef1a88e72f3f75139115fbdf98cc7d844e0c1b39218b2e83438c6188727bf904ed78c7f0f2feff67b32833bc3af7f0202b33
+  languageName: node
+  linkType: hard
+
 "gopd@npm:^1.0.1":
   version: 1.0.1
   resolution: "gopd@npm:1.0.1"
@@ -25706,6 +25734,13 @@ fsevents@^1.2.7:
   languageName: unknown
   linkType: soft
 
+"select@npm:^1.1.2":
+  version: 1.1.2
+  resolution: "select@npm:1.1.2"
+  checksum: 4346151e94f226ea6131e44e68e6d837f3fdee64831b756dd657cc0b02f4cb5107f867cb34a1d1216ab7737d0bf0645d44546afb030bbd8d64e891f5e4c4814e
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.6.0, semver@npm:^5.7.1":
   version: 5.7.1
   resolution: "semver@npm:5.7.1"
@@ -27645,6 +27680,13 @@ fsevents@^1.2.7:
   languageName: node
   linkType: hard
 
+"tiny-emitter@npm:^2.0.0":
+  version: 2.1.0
+  resolution: "tiny-emitter@npm:2.1.0"
+  checksum: fbcfb5145751a0e3b109507a828eb6d6d4501352ab7bb33eccef46e22e9d9ad3953158870a6966a59e57ab7c3f9cfac7cab8521db4de6a5e757012f4677df2dd
+  languageName: node
+  linkType: hard
+
 "tiny-glob@npm:^0.2.9":
   version: 0.2.9
   resolution: "tiny-glob@npm:0.2.9"