-
Notifications
You must be signed in to change notification settings - Fork 167
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
ea788da
commit 88d9050
Showing
8 changed files
with
301 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
packages/onboarding-ui/src/forms/RegisterOfflineForm/steps/CopyStep.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
Oops, something went wrong.