chore(ui-react): refactor Authenticator related FormField and FormFields components (#1828)

Author: calebpollman

packages/react/src/components/Authenticator/ConfirmSignIn/ConfirmSignIn.tsx

@@ -45,7 +45,7 @@ export const ConfirmSignIn = ({
           <Header />
 
           <Flex direction="column">
-            <FormFields route="confirmSignIn" />
+            <FormFields />
             <RemoteErrorMessage />
           </Flex>
 

packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx

@@ -69,7 +69,7 @@ export function ConfirmSignUp({ className, variation }: RouteProps) {
               {subtitleText}
             </Text>
 
-            <FormFields route="confirmSignUp" />
+            <FormFields />
 
             <RemoteErrorMessage />
 

packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx

@@ -71,4 +71,4 @@ export const ForceNewPassword = ({
   );
 };
 
-ForceNewPassword.FormFields = () => <FormFields route="forceNewPassword" />;
+ForceNewPassword.FormFields = () => <FormFields />;

packages/react/src/components/Authenticator/ResetPassword/ConfirmResetPassword.tsx

@@ -40,7 +40,7 @@ export const ConfirmResetPassword = ({
           <Header />
 
           <Flex direction="column">
-            <FormFields route="confirmResetPassword" />
+            <FormFields />
           </Flex>
 
           <RemoteErrorMessage />

packages/react/src/components/Authenticator/ResetPassword/ResetPassword.tsx

@@ -39,7 +39,7 @@ export const ResetPassword = ({
           <Header />
 
           <Flex direction="column">
-            <FormFields route="resetPassword" />
+            <FormFields />
           </Flex>
 
           <RemoteErrorMessage />

packages/react/src/components/Authenticator/SetupTOTP/SetupTOTP.tsx

@@ -120,7 +120,7 @@ export const SetupTOTP = ({
                 </svg>
               </Flex>
             </Flex>
-            <FormFields route="setupTOTP" />
+            <FormFields />
             <RemoteErrorMessage />
           </Flex>
 

packages/react/src/components/Authenticator/SignIn/SignIn.tsx

@@ -38,7 +38,7 @@ export function SignIn() {
             <VisuallyHidden>
               <legend>{translate('Sign in')}</legend>
             </VisuallyHidden>
-            <FormFields route="signIn" />
+            <FormFields />
           </Flex>
 
           <RemoteErrorMessage />

packages/react/src/components/Authenticator/SignUp/SignUp.tsx

@@ -66,5 +66,5 @@ export function SignUp() {
 }
 
 SignUp.Header = (): JSX.Element => null;
-SignUp.FormFields = () => <FormFields route="signUp" />;
+SignUp.FormFields = () => <FormFields />;
 SignUp.Footer = (): JSX.Element => null;

packages/react/src/components/Authenticator/VerifyUser/ConfirmVerifyUser.tsx

@@ -39,7 +39,7 @@ export const ConfirmVerifyUser = ({
           <Header />
 
           <Flex direction="column">
-            <FormFields route="confirmVerifyUser" />
+            <FormFields />
           </Flex>
 
           <RemoteErrorMessage />

packages/react/src/components/Authenticator/shared/FormField.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { FormFieldOptions, getErrors } from '@aws-amplify/ui';
 
 import { PasswordField } from '../../../primitives/PasswordField';
@@ -6,32 +7,38 @@ import { TextField } from '../../../primitives/TextField';
 import { useAuthenticator } from '../hooks/useAuthenticator';
 import { ValidationErrors } from './ValidationErrors';
 
-export interface FormFieldProps {
+export interface FormFieldProps extends Omit<FormFieldOptions, 'label'> {
+  // label is a required prop for the UI field components used in FormField
+  label: string;
   name: string;
-  formFieldOptions: FormFieldOptions;
 }
-export function FormField({ name, formFieldOptions }: FormFieldProps) {
-  const { validationErrors } = useAuthenticator((context) => [
-    context.validationErrors,
+
+export function FormField({
+  autocomplete: autoComplete,
+  dialCode,
+  name,
+  type,
+  ...props
+}: FormFieldProps) {
+  const { validationErrors } = useAuthenticator(({ validationErrors }) => [
+    validationErrors,
   ]);
-  const { type } = formFieldOptions;
 
-  const errors = getErrors(validationErrors[name]);
+  const errors = React.useMemo(
+    () => getErrors(validationErrors[name]),
+    [name, validationErrors]
+  );
   const hasError = errors?.length > 0;
 
   if (type === 'tel') {
     return (
       <>
         <PhoneNumberField
+          {...props}
           name={name}
-          label={formFieldOptions.label}
-          placeholder={formFieldOptions.placeholder}
-          defaultCountryCode={formFieldOptions.dialCode}
+          defaultCountryCode={dialCode}
           countryCodeName="country_code"
-          dialCodeList={formFieldOptions.dialCodeList}
-          autoComplete={formFieldOptions.autocomplete}
-          isRequired={formFieldOptions.isRequired}
-          labelHidden={formFieldOptions.labelHidden}
+          autoComplete={autoComplete}
           hasError={hasError}
         />
         <ValidationErrors errors={errors} />
@@ -41,12 +48,9 @@ export function FormField({ name, formFieldOptions }: FormFieldProps) {
     return (
       <>
         <PasswordField
+          {...props}
           name={name}
-          label={formFieldOptions.label}
-          autoComplete={formFieldOptions.autocomplete}
-          placeholder={formFieldOptions.placeholder}
-          isRequired={formFieldOptions.isRequired}
-          labelHidden={formFieldOptions.labelHidden}
+          autoComplete={autoComplete}
           hasError={hasError}
         />
         <ValidationErrors errors={errors} />
@@ -56,12 +60,9 @@ export function FormField({ name, formFieldOptions }: FormFieldProps) {
     return (
       <>
         <TextField
+          {...props}
           name={name}
-          label={formFieldOptions.label}
-          placeholder={formFieldOptions.placeholder}
-          autoComplete={formFieldOptions.autocomplete}
-          isRequired={formFieldOptions.isRequired}
-          labelHidden={formFieldOptions.labelHidden}
+          autoComplete={autoComplete}
           hasError={hasError}
           type={type}
         />