Skip to content

Commit

Permalink
Merge branch 'main' of github.com:RocketChat/fuselage into refactor/F…
Browse files Browse the repository at this point in the history
…ield
  • Loading branch information
tassoevan committed Oct 2, 2023
2 parents 6c92f8a + c3835a6 commit 0ff8022
Show file tree
Hide file tree
Showing 21 changed files with 244 additions and 163 deletions.
5 changes: 5 additions & 0 deletions .changeset/hip-bats-stare.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/onboarding-ui": patch
---

feat(onboarding-ui): Required fields adjustments
5 changes: 5 additions & 0 deletions .changeset/stupid-mayflies-look.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/onboarding-ui": patch
---

refactor(onboarding-ui): Rewrite `AwaitingConfirmationPage` page
5 changes: 5 additions & 0 deletions .changeset/thin-candles-doubt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@rocket.chat/fuselage": patch
---

Fixed tooltip not being displayed on `PaginatedSelect` options
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ export const PaginatedSelect = ({
</PaginatedSelectWrapper>
<PositionAnimated visible={visible} anchor={containerRef}>
<_Options
{...(withTitle && { title: withTitle })}
withTitle={withTitle}
width={borderBoxSize.inlineSize}
role='listbox'
filter={filter}
Expand Down
33 changes: 15 additions & 18 deletions packages/onboarding-ui/.i18n/en.i18n.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,16 @@
"registerNow": "Register now",
"confirm": "Confirm"
},
"requiredField": "This field is required",
"termsAndConditions": "I agree with <1>Terms and Conditions</1> and <3>Privacy Policy</3>"
},
"emailCodeFallback": "Didn’t receive email? <1>Resend</1> or <3>Change email</3>",
"emailCodeFallback": "Didn’t receive email? <1>Resend</1> or <3>Change email</3>.",
"manageWorkspaceFallback": "Already have an account? <1>Manage your workspaces.</1>",
"createNewAccountPage": "Already registered? <1>Go to login</1>",
"wantToLogin": "Want to log in? <1>Go to login</1>"
},
"page": {
"form": {
"title": "Let's <1>Launch</1> Your Workspace"
},
"awaitingConfirmation": {
"title": "Awaiting confirmation",
"subtitle": "We have sent you an email to {{emailAddress}} with a confirmation link. Please verify that the security code below matches the one in the email."
"title": "Let's launch your workspace"
},
"emailConfirmed": {
"title": "Email Confirmed!",
Expand Down Expand Up @@ -66,10 +61,6 @@
"title": "We emailed you a login link",
"subtitle": "Click the link in the email we just sent you to sign in to your workspace. <1>The link will expire in 30 minutes.</1>"
},
"organizationInfoPage": {
"title": "A few more details...",
"subtitle": "These will help us to personalize your workspace."
},
"loginPage": {
"title": {
"cloud": "Cloud Login"
Expand Down Expand Up @@ -126,7 +117,7 @@
"form": {
"adminInfoForm": {
"title": "Admin Info",
"subtitle": "We need this to create an admin profile inside your workspace",
"subtitle": "We need this information to create an admin profile for your workspace.",
"fields": {
"fullName": {
"label": "Full name",
Expand All @@ -151,7 +142,7 @@
},
"organizationInfoForm": {
"title": "Organization Info",
"subtitle": "Please, bear with us. This info will help us personalize your workspace",
"subtitle": "We need to know who you are.",
"fields": {
"organizationName": {
"label": "Organization name",
Expand All @@ -176,23 +167,22 @@
}
},
"registeredServerForm": {
"title": "Register Your Server",
"title": "Register your workspace",
"included": {
"push": "Mobile push notifications",
"externalProviders": "Integration with external providers (WhatsApp, Facebook, Telegram, Twitter)",
"apps": "Access to marketplace apps"
},
"fields": {
"accountEmail": {
"inputLabel": "Cloud account email",
"tooltipLabel": "To register your server, we need to connect it to your cloud account. If you already have one - we wll link it automatically. Otherwise, a new account will be created",
"inputPlaceholder": "Please enter your Email"
"inputLabel": "Admin email",
"inputPlaceholder": "Insert your email to continue"
}
},
"keepInformed": "Keep me informed about news and events",
"registerLater": "Register later",
"notConnectedToInternet": "The server is not connected to the internet, so you’ll have to do an offline registration for this workspace.",
"agreeToReceiveUpdates": "By registering I agree to receive relevant product and security updates"
"registrationEngagement": "Registration allows automatic license updates, notifications of critical vulnerabilities and access to Rocket.Chat Cloud services. No sensitive workspace data is shared; statistics sent to Rocket.Chat are made visible to you within the administration area."
},
"standaloneServerForm": {
"title": "Standalone Server Confirmation",
Expand Down Expand Up @@ -253,6 +243,13 @@
"description": "Please use the email address associated with your cloud account"
}
},
"awaitConfirmationForm": {
"title": "Awaiting confirmation",
"content": {
"securityCode": "Security code",
"sentEmail": "Email sent to <1>{{email}}</1> with a confirmation link.Please verify that the security code below matches the one in the email."
}
},
"loginForm": {
"content": {
"default": "Enter your password to continue.",
Expand Down
15 changes: 3 additions & 12 deletions packages/onboarding-ui/src/common/FormPageLayout.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import {
FormPageLayout,
HorizontalWizardLayout,
HorizontalWizardLayoutAside,
HorizontalWizardLayoutTitle,
Expand All @@ -8,7 +7,7 @@ import {
HorizontalWizardLayoutContent,
} from '@rocket.chat/layout';
import type { ReactElement, ReactNode } from 'react';
import { Trans, useTranslation } from 'react-i18next';
import { useTranslation } from 'react-i18next';

// import { OnboardingLogo } from './OnboardingLogo';
import type { FormPageLayoutStyleProps } from '../Types';
Expand All @@ -29,20 +28,12 @@ const FormPageLayoutOnboard = ({
description,
children,
}: FormPageLayoutProps): ReactElement => {
useTranslation();
const { t } = useTranslation();
return (
<HorizontalWizardLayout>
<HorizontalWizardLayoutAside>
<HorizontalWizardLayoutTitle>
{title || (
<Trans i18nKey='page.form.title'>
Let's
<FormPageLayout.TitleHighlight>
Launch
</FormPageLayout.TitleHighlight>
Your Workspace
</Trans>
)}
{title || t('page.form.title')}
</HorizontalWizardLayoutTitle>
{subtitle && (
<HorizontalWizardLayoutSubtitle>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,6 @@ export const SelfHostedRegistration: Story = ({ offline }) => {
agreement: serverRegistration?.agreement,
}),
}}
onBackButtonClick={() => navigateTo('/org-info')}
onSubmit={handleRegisterServerSubmit}
offline={offline}
onClickRegisterLater={() => navigateTo('/standalone-confirmation')}
Expand Down Expand Up @@ -160,6 +159,8 @@ export const SelfHostedRegistration: Story = ({ offline }) => {

return (
<AwaitingConfirmationPage
currentStep={4}
stepCount={4}
emailAddress={serverRegistration.cloudAccountEmail}
securityCode={serverRegistration.securityCode}
onChangeEmailRequest={() => navigateTo('/admin-info')}
Expand Down
20 changes: 10 additions & 10 deletions packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ const AdminInfoForm = ({
const {
register,
handleSubmit,
formState: { isValidating, isSubmitting, errors },
formState: { isValid, isSubmitting, errors },
setFocus,
} = useForm<AdminInfoPayload>({
defaultValues: {
Expand All @@ -85,13 +85,13 @@ const AdminInfoForm = ({
<Form.Container>
<FieldGroup>
<Field>
<FieldLabel htmlFor={fullnameField}>
<FieldLabel required htmlFor={fullnameField}>
{t('form.adminInfoForm.fields.fullName.label')}
</FieldLabel>
<FieldRow>
<TextInput
{...register('fullname', {
required: String(t('component.form.requiredField')),
required: true,
})}
placeholder={t(
'form.adminInfoForm.fields.fullName.placeholder'
Expand All @@ -104,13 +104,13 @@ const AdminInfoForm = ({
)}
</Field>
<Field>
<FieldLabel htmlFor={usernameField}>
<FieldLabel required htmlFor={usernameField}>
{t('form.adminInfoForm.fields.username.label')}
</FieldLabel>
<FieldRow>
<TextInput
{...register('username', {
required: String(t('component.form.requiredField')),
required: true,
validate: validateUsername,
})}
placeholder={t(
Expand All @@ -124,13 +124,13 @@ const AdminInfoForm = ({
)}
</Field>
<Field>
<FieldLabel htmlFor={emailField}>
<FieldLabel required htmlFor={emailField}>
{t('form.adminInfoForm.fields.email.label')}
</FieldLabel>
<FieldRow>
<EmailInput
{...register('email', {
required: String(t('component.form.requiredField')),
required: true,
validate: validateEmail,
})}
placeholder={t('form.adminInfoForm.fields.email.placeholder')}
Expand All @@ -140,13 +140,13 @@ const AdminInfoForm = ({
{errors.email && <FieldError>{errors.email.message}</FieldError>}
</Field>
<Field>
<FieldLabel htmlFor={passwordField}>
<FieldLabel required htmlFor={passwordField}>
{t('form.adminInfoForm.fields.password.label')}
</FieldLabel>
<FieldRow>
<PasswordInput
{...register('password', {
required: String(t('component.form.requiredField')),
required: true,
validate: validatePassword,
})}
placeholder={t(
Expand All @@ -172,7 +172,7 @@ const AdminInfoForm = ({
</Form.Container>
<Form.Footer>
<ButtonGroup flexGrow={1}>
<Button type='submit' primary disabled={isValidating || isSubmitting}>
<Button type='submit' primary disabled={!isValid || isSubmitting}>
{t('component.form.action.next')}
</Button>
</ButtonGroup>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import ReactDOM from 'react-dom';

import AwaitConfirmationForm from './AwaitConfirmationForm';

it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(
<AwaitConfirmationForm
currentStep={4}
stepCount={4}
securityCode='Funny Tortoise In The Hat'
emailAddress='[email protected]'
onResendEmailRequest={() => true}
onChangeEmailRequest={() => true}
/>,
div
);
ReactDOM.unmountComponentAtNode(div);
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import type { Story, Meta } from '@storybook/react';
import type { ComponentProps } from 'react';

import AwaitConfirmationForm from './AwaitConfirmationForm';

type Args = ComponentProps<typeof AwaitConfirmationForm>;

export default {
title: 'forms/AwaitConfirmationForm',
component: AwaitConfirmationForm,
parameters: {
actions: { argTypesRegex: '^on.*' },
layout: 'centered',
},
argTypes: {
onResendEmailRequest: { action: 'resetEmailRequest' },
onChangeEmailRequest: { action: 'changeEmailRequest' },
},
args: {
currentStep: 4,
stepCount: 4,
securityCode: 'Funny Tortoise In The Hat',
emailAddress: '[email protected]',
},
} as Meta<Args>;

export const _AwaitConfirmationForm: Story<Args> = (args) => (
<AwaitConfirmationForm {...args} />
);
_AwaitConfirmationForm.storyName = 'AwaitConfirmationForm';
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
import { Box, Label } from '@rocket.chat/fuselage';
import { Form } from '@rocket.chat/layout';
import type { ReactElement } from 'react';
import { Trans, useTranslation } from 'react-i18next';

import EmailCodeFallback from '../../common/EmailCodeFallback';

type AwaitingConfirmationFormProps = {
currentStep: number;
stepCount: number;
securityCode: string;
emailAddress: string;
onResendEmailRequest: () => void;
onChangeEmailRequest: () => void;
};

const AwaitingConfirmationForm = ({
currentStep,
stepCount,
securityCode,
emailAddress,
onResendEmailRequest,
onChangeEmailRequest,
}: AwaitingConfirmationFormProps): ReactElement => {
const { t } = useTranslation();

return (
<Form>
<Form.Header>
<Form.Steps currentStep={currentStep} stepCount={stepCount} />
<Form.Title>{t('form.awaitConfirmationForm.title')}</Form.Title>
</Form.Header>
<Form.Container>
<Box fontScale='c1' mbe={24}>
<Trans i18nKey='form.awaitConfirmationForm.content.sentEmail'>
Email sent to <strong>{{ emailAddress }}</strong> with a
confirmation link.Please verify that the security code below matches
the one in the email.
</Trans>
</Box>
<Label>
{t('form.awaitConfirmationForm.content.securityCode')}
<Box
padding='12px'
width='full'
fontScale='p2b'
lineHeight='20px'
backgroundColor='tint'
elevation='1'
>
{securityCode}
</Box>
</Label>
</Form.Container>
<Form.Footer>
<EmailCodeFallback
onResendEmailRequest={onResendEmailRequest}
onChangeEmailRequest={onChangeEmailRequest}
/>
</Form.Footer>
</Form>
);
};

export default AwaitingConfirmationForm;
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './AwaitConfirmationForm';
Loading

0 comments on commit 0ff8022

Please sign in to comment.