feat(onboarding-ui): Required fields adjustments (#1182)

Co-authored-by: Tasso Evangelista <[email protected]>
RocketChat · Sep 28, 2023 · d5b2694 · d5b2694
1 parent 7a32bbf
commit d5b2694
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 26 deletions.
diff --git a/.changeset/hip-bats-stare.md b/.changeset/hip-bats-stare.md
@@ -0,0 +1,5 @@
+---
+"@rocket.chat/onboarding-ui": patch
+---
+
+feat(onboarding-ui): Required fields adjustments
diff --git a/packages/onboarding-ui/.i18n/en.i18n.json b/packages/onboarding-ui/.i18n/en.i18n.json
@@ -10,7 +10,6 @@
         "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>",

diff --git a/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx b/packages/onboarding-ui/src/forms/AdminInfoForm/AdminInfoForm.tsx
@@ -58,7 +58,7 @@ const AdminInfoForm = ({
   const {
     register,
     handleSubmit,
-    formState: { isValidating, isSubmitting, errors },
+    formState: { isValid, isSubmitting, errors },
     setFocus,
   } = useForm<AdminInfoPayload>({
     defaultValues: {
@@ -81,13 +81,13 @@ const AdminInfoForm = ({
       <Form.Container>
         <FieldGroup>
           <Field>
-            <Field.Label htmlFor={fullnameField}>
+            <Field.Label required htmlFor={fullnameField}>
               {t('form.adminInfoForm.fields.fullName.label')}
             </Field.Label>
             <Field.Row>
               <TextInput
                 {...register('fullname', {
-                  required: String(t('component.form.requiredField')),
+                  required: true,
                 })}
                 placeholder={t(
                   'form.adminInfoForm.fields.fullName.placeholder'
@@ -100,13 +100,13 @@ const AdminInfoForm = ({
             )}
           </Field>
           <Field>
-            <Field.Label htmlFor={usernameField}>
+            <Field.Label required htmlFor={usernameField}>
               {t('form.adminInfoForm.fields.username.label')}
             </Field.Label>
             <Field.Row>
               <TextInput
                 {...register('username', {
-                  required: String(t('component.form.requiredField')),
+                  required: true,
                   validate: validateUsername,
                 })}
                 placeholder={t(
@@ -120,13 +120,13 @@ const AdminInfoForm = ({
             )}
           </Field>
           <Field>
-            <Field.Label htmlFor={emailField}>
+            <Field.Label required htmlFor={emailField}>
               {t('form.adminInfoForm.fields.email.label')}
             </Field.Label>
             <Field.Row>
               <EmailInput
                 {...register('email', {
-                  required: String(t('component.form.requiredField')),
+                  required: true,
                   validate: validateEmail,
                 })}
                 placeholder={t('form.adminInfoForm.fields.email.placeholder')}
@@ -136,13 +136,13 @@ const AdminInfoForm = ({
             {errors.email && <Field.Error>{errors.email.message}</Field.Error>}
           </Field>
           <Field>
-            <Field.Label htmlFor={passwordField}>
+            <Field.Label required htmlFor={passwordField}>
               {t('form.adminInfoForm.fields.password.label')}
             </Field.Label>
             <Field.Row>
               <PasswordInput
                 {...register('password', {
-                  required: String(t('component.form.requiredField')),
+                  required: true,
                   validate: validatePassword,
                 })}
                 placeholder={t(
@@ -168,7 +168,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>

diff --git a/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx b/packages/onboarding-ui/src/forms/OrganizationInfoForm/OrganizationInfoForm.tsx
@@ -62,7 +62,7 @@ const OrganizationInfoForm = ({
     register,
     control,
     handleSubmit,
-    formState: { isValidating, isSubmitting, errors },
+    formState: { isValid, isSubmitting, errors },
     setFocus,
   } = useForm<OrganizationInfoPayload>({
     defaultValues: initialValues,
@@ -82,7 +82,7 @@ const OrganizationInfoForm = ({
       <Form.Container>
         <FieldGroup>
           <Field>
-            <Field.Label htmlFor={organizationNameField}>
+            <Field.Label required htmlFor={organizationNameField}>
               {t('form.organizationInfoForm.fields.organizationName.label')}
             </Field.Label>
             <Field.Row>
@@ -99,7 +99,7 @@ const OrganizationInfoForm = ({
             )}
           </Field>
           <Field>
-            <Field.Label htmlFor={organizationIndustryField}>
+            <Field.Label required htmlFor={organizationIndustryField}>
               {t('form.organizationInfoForm.fields.organizationIndustry.label')}
             </Field.Label>
             <Field.Row>
@@ -124,7 +124,7 @@ const OrganizationInfoForm = ({
             )}
           </Field>
           <Field>
-            <Field.Label htmlFor={organizationSizeField}>
+            <Field.Label required htmlFor={organizationSizeField}>
               {t('form.organizationInfoForm.fields.organizationSize.label')}
             </Field.Label>
             <Field.Row>
@@ -149,7 +149,7 @@ const OrganizationInfoForm = ({
             )}
           </Field>
           <Field>
-            <Field.Label htmlFor={countryField}>
+            <Field.Label required htmlFor={countryField}>
               {t('form.organizationInfoForm.fields.country.label')}
             </Field.Label>
             <Field.Row>
@@ -183,7 +183,7 @@ const OrganizationInfoForm = ({
             </Button>
           )}
 
-          <Button type='submit' primary disabled={isValidating || isSubmitting}>
+          <Button type='submit' primary disabled={!isValid || isSubmitting}>
             {nextStep ?? t('component.form.action.next')}
           </Button>
 

diff --git a/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx b/packages/onboarding-ui/src/forms/RegisterServerForm/RegisterServerForm.tsx
@@ -5,6 +5,7 @@ import {
   Field,
   EmailInput,
   CheckBox,
+  Label,
 } from '@rocket.chat/fuselage';
 import { useUniqueId, useBreakpoints } from '@rocket.chat/fuselage-hooks';
 import { Form, ActionLink } from '@rocket.chat/layout';
@@ -62,7 +63,7 @@ const RegisterServerForm = ({
 
   const {
     register,
-    formState: { isValidating, isSubmitting, isValid, errors },
+    formState: { isSubmitting, isValid, errors },
     handleSubmit,
   } = form;
 
@@ -77,6 +78,7 @@ const RegisterServerForm = ({
           <Form.Container>
             <Field>
               <Field.Label
+                required
                 display='flex'
                 alignItems='center'
                 htmlFor={emailField}
@@ -126,7 +128,7 @@ const RegisterServerForm = ({
                 <Box mie={8}>
                   <CheckBox {...register('agreement', { required: true })} />{' '}
                 </Box>
-                <Box is='label' htmlFor='agreement' withRichContent>
+                <Label htmlFor='agreement' withRichContent required>
                   <Trans i18nKey='component.form.termsAndConditions'>
                     I agree with
                     <a
@@ -145,7 +147,7 @@ const RegisterServerForm = ({
                       Privacy Policy
                     </a>
                   </Trans>
-                </Box>
+                </Label>
               </Box>
             </Box>
           </Form.Container>
@@ -160,16 +162,11 @@ const RegisterServerForm = ({
         <Form.Footer>
           <Box display='flex' flexDirection='column'>
             <ButtonGroup vertical={isMobile} flexGrow={1}>
-              <Button
-                type='submit'
-                primary
-                disabled={isValidating || isSubmitting || !isValid}
-              >
+              <Button type='submit' primary disabled={isSubmitting || !isValid}>
                 {offline
                   ? t('component.form.action.registerNow')
                   : t('component.form.action.register')}
               </Button>
-
               {offline && (
                 <ButtonGroup flexGrow={1} align='end' withTruncatedText>
                   <ActionLink onClick={onClickRegisterLater}>