@aws-amplify/ui-react-native 1.2.20 → 1.2.21

package/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx

@@ -8,7 +8,7 @@ import {
   DefaultRadioFormFields,
 } from '../../common';
 import { useFieldValues } from '../../hooks';
-import { DefaultVerifyUserComponent } from '../types';
+import { DefaultVerifyUserProps } from '../types';
 
 const COMPONENT_NAME = 'VerifyUser';
 
@@ -19,17 +19,19 @@ const {
   getAccountRecoveryInfoText,
 } = authenticatorTextUtil;
 
-const VerifyUser: DefaultVerifyUserComponent = ({
+const VerifyUser = ({
   fields,
   handleBlur,
   handleChange,
   handleSubmit,
   skipVerification,
+  validationErrors,
   ...rest
-}) => {
+}: DefaultVerifyUserProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
@@ -37,6 +39,7 @@ const VerifyUser: DefaultVerifyUserComponent = ({
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getVerifyContactText();
@@ -59,6 +62,7 @@ const VerifyUser: DefaultVerifyUserComponent = ({
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

package/src/Authenticator/Defaults/VerifyUser/__tests__/VerifyUser.spec.tsx

@@ -44,6 +44,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit,
+  hasValidationErrors: false,
   Header: VerifyUser.Header,
   isPending: false,
   skipVerification: jest.fn(),

package/src/Authenticator/Defaults/types.ts

@@ -21,55 +21,69 @@ export type DefaultComponents<
   Props = {}
 > = AuthenticatorComponentDefaults<FieldType, Props>;
 
-export type DefaultConfirmResetPasswordComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmResetPasswordStyle }
->['ConfirmResetPassword'];
-
-export type DefaultConfirmSignInComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmSignInStyle }
->['ConfirmSignIn'];
-
-export type DefaultConfirmSignUpComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmSignUpStyle }
->['ConfirmSignUp'];
-
-export type DefaultConfirmVerifyUserComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ConfirmVerifyUserStyle }
->['ConfirmVerifyUser'];
-
-export type DefaultForceNewPasswordComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ForceNewPasswordStyle }
->['ForceNewPassword'];
-
-export type DefaultResetPasswordComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: ResetPasswordStyle }
->['ResetPassword'];
-
-export type DefaultSetupTOTPComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: SetupTOTPStyle }
->['SetupTOTP'];
-
-export type DefaultSignInComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: SignInStyle }
->['SignIn'];
-
-export type DefaultSignUpComponent = DefaultComponents<
-  TextFieldOptionsType,
-  { style?: SignUpStyle }
->['SignUp'];
-
-export type DefaultVerifyUserComponent = DefaultComponents<
-  RadioFieldOptions,
-  { style?: VerifyUserStyle }
->['VerifyUser'];
+export type DefaultConfirmResetPasswordProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmResetPasswordStyle }
+  >['ConfirmResetPassword']
+>;
+
+export type DefaultConfirmSignInProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmSignInStyle }
+  >['ConfirmSignIn']
+>;
+
+export type DefaultConfirmSignUpProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmSignUpStyle }
+  >['ConfirmSignUp']
+>;
+
+export type DefaultConfirmVerifyUserProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ConfirmVerifyUserStyle }
+  >['ConfirmVerifyUser']
+>;
+
+export type DefaultForceNewPasswordProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ForceNewPasswordStyle }
+  >['ForceNewPassword']
+>;
+
+export type DefaultResetPasswordProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: ResetPasswordStyle }
+  >['ResetPassword']
+>;
+
+export type DefaultSetupTOTPProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    TextFieldOptionsType,
+    { style?: SetupTOTPStyle }
+  >['SetupTOTP']
+>;
+
+export type DefaultSignInProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<TextFieldOptionsType, { style?: SignInStyle }>['SignIn']
+>;
+
+export type DefaultSignUpProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<TextFieldOptionsType, { style?: SignUpStyle }>['SignUp']
+>;
+
+export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef<
+  DefaultComponents<
+    RadioFieldOptions,
+    { style?: VerifyUserStyle }
+  >['VerifyUser']
+>;
 
 /**
  * Custom Authenticator components

package/src/Authenticator/__tests__/Authenticator.spec.tsx

@@ -81,30 +81,27 @@ describe('Authenticator', () => {
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it.each(['authenticated', 'signOut'])(
-    'handles the %s route as expected with children',
-    (route) => {
-      useAuthenticatorSpy.mockImplementation(
-        () => ({ route } as unknown as UseAuthenticator)
-      );
+  it('handles `authStatus` of authenticated as expected', () => {
+    useAuthenticatorSpy.mockImplementation(
+      () => ({ authStatus: 'authenticated' } as unknown as UseAuthenticator)
+    );
 
-      const { getByTestId, toJSON } = render(
-        <Authenticator>
-          <TestChildren />
-        </Authenticator>
-      );
+    const { getByTestId, toJSON } = render(
+      <Authenticator>
+        <TestChildren />
+      </Authenticator>
+    );
 
-      const children = getByTestId(CHILD_TEST_ID);
+    const children = getByTestId(CHILD_TEST_ID);
 
-      expect(children.type).toBe('Text');
-      expect(children.props.children).toBe(CHILD_CONTENT);
+    expect(children.type).toBe('Text');
+    expect(children.props.children).toBe(CHILD_CONTENT);
 
-      expect(toJSON()).toMatchSnapshot();
-    }
-  );
+    expect(toJSON()).toMatchSnapshot();
+  });
 
-  it.each(['authenticated', 'signOut'])(
-    'handles the %s route as expected without children',
+  it.each(['unauthenticated', 'configuring'])(
+    'handles an authStatus of %s as expected',
     (route) => {
       useAuthenticatorSpy.mockImplementation(
         () => ({ route } as unknown as UseAuthenticator)

package/src/Authenticator/__tests__/__snapshots__/Authenticator.spec.tsx.snap

@@ -59,15 +59,7 @@ exports[`Authenticator behaves as expected in the happy path 1`] = `
 </SafeAreaProvider>
 `;
 
-exports[`Authenticator handles the authenticated route as expected with children 1`] = `
-<Text
-  testID="child-test-id"
->
-  Test Children
-</Text>
-`;
-
-exports[`Authenticator handles the signOut route as expected with children 1`] = `
+exports[`Authenticator handles \`authStatus\` of authenticated as expected 1`] = `
 <Text
   testID="child-test-id"
 >

package/src/Authenticator/__tests__/withAuthenticator.spec.tsx

@@ -61,7 +61,7 @@ describe('withAuthenticator', () => {
     useAuthenticatorSpy.mockImplementation(
       () =>
         ({
-          route: 'authenticated',
+          authStatus: 'authenticated',
         } as unknown as UIReactCoreModule.UseAuthenticator)
     );
 

package/src/Authenticator/common/DefaultContent/types.ts

@@ -60,10 +60,7 @@ export type DefaultContentProps<
     | TextFieldOptionsType
     | RadioFieldOptions
     | unknown = unknown
-> = Pick<
-  DefaultComponentProps<FieldsType>,
-  'error' | 'Footer' | 'isPending'
-> & {
+> = Pick<DefaultComponentProps<FieldsType>, 'error' | 'isPending'> & {
   buttons: DefaultButtons;
   body?: React.ReactNode;
   fields: FieldsType[];

package/src/Authenticator/common/DefaultFormFields/DefaultRadioFormFields.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { censorAllButFirstAndLast, censorPhoneNumber } from '@aws-amplify/ui';
 
 import { Radio, RadioGroup } from '../../../primitives';
-import { DefaultRadioFormFieldsComponent } from './types';
+import { DefaultRadioFormFieldsProps } from './types';
 
 const censorContactInformation = (name: string, value: string): string => {
   let censoredVal = value;
@@ -17,16 +17,16 @@ const censorContactInformation = (name: string, value: string): string => {
   return censoredVal;
 };
 
-const DefaultFormFields: DefaultRadioFormFieldsComponent = ({
+const DefaultRadioFormFields = ({
   fields,
-  isPending,
   fieldContainerStyle,
   fieldLabelStyle,
+  isPending,
   style,
-}) => {
+}: DefaultRadioFormFieldsProps): JSX.Element => {
   return (
     <RadioGroup disabled={isPending} style={style}>
-      {fields.map(({ name, value, ...props }) => (
+      {(fields ?? []).map(({ name, value, ...props }) => (
         <Radio
           {...props}
           key={value}
@@ -42,4 +42,6 @@ const DefaultFormFields: DefaultRadioFormFieldsComponent = ({
   );
 };
 
-export default DefaultFormFields;
+DefaultRadioFormFields.displayName = 'FormFields';
+
+export default DefaultRadioFormFields;

package/src/Authenticator/common/DefaultFormFields/DefaultTextFormFields.tsx

@@ -5,19 +5,22 @@ import { getErrors } from '@aws-amplify/ui';
 
 import Field from './Field';
 import { FieldErrors } from './FieldErrors';
-import { DefaultTextFormFieldsComponent } from './types';
+import {
+  // DefaultTextFormFieldsComponent,
+  DefaultTextFormFieldsProps,
+} from './types';
 
-const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({
+const DefaultTextFormFields = ({
   fieldContainerStyle,
   fieldErrorsContainer,
   fieldErrorStyle,
   fieldStyle,
-  fields = [],
-  isPending,
+  fields,
+  isPending = false,
   style,
   validationErrors,
-}) => {
-  const formFields = fields.map(({ name, type, ...field }) => {
+}: DefaultTextFormFieldsProps): JSX.Element => {
+  const formFields = (fields ?? []).map(({ name, type, ...field }) => {
     const errors = validationErrors ? getErrors(validationErrors?.[name]) : [];
 
     const hasError = errors?.length > 0;
@@ -44,6 +47,6 @@ const DefaultTextFormFields: DefaultTextFormFieldsComponent = ({
   return <View style={style}>{formFields}</View>;
 };
 
-DefaultTextFormFields.displayName = 'DefaultTextFormFields';
+DefaultTextFormFields.displayName = 'FormFields';
 
 export default DefaultTextFormFields;

package/src/Authenticator/common/DefaultFormFields/types.ts

@@ -1,5 +1,8 @@
 import { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { AuthenticatorFormFieldsComponent } from '@aws-amplify/ui-react-core';
+import {
+  AuthenticatorFormFieldsComponent,
+  UseAuthenticator,
+} from '@aws-amplify/ui-react-core';
 
 import { RadioFieldOptions, TextFieldOptionsType } from '../../hooks';
 
@@ -25,8 +28,15 @@ export interface DefaultFormFieldsStyle {
 export type DefaultFormFieldsComponent<FieldsType> =
   AuthenticatorFormFieldsComponent<FieldsType, DefaultFormFieldsStyle>;
 
-export type DefaultTextFormFieldsComponent =
-  DefaultFormFieldsComponent<TextFieldOptionsType>;
+interface FormFieldsProps extends DefaultFormFieldsStyle {
+  isPending?: UseAuthenticator['isPending'];
+  validationErrors?: UseAuthenticator['validationErrors'];
+}
+
+export interface DefaultTextFormFieldsProps extends FormFieldsProps {
+  fields?: TextFieldOptionsType[];
+}
 
-export type DefaultRadioFormFieldsComponent =
-  DefaultFormFieldsComponent<RadioFieldOptions>;
+export interface DefaultRadioFormFieldsProps extends FormFieldsProps {
+  fields?: RadioFieldOptions[];
+}

package/src/Authenticator/hooks/types.ts

@@ -7,6 +7,7 @@ import {
 
 export type MachineFieldTypeKey = 'password' | 'tel';
 export type AuthenticatorFieldTypeKey =
+  | 'email'
   | 'password'
   | 'phone'
   | 'default'
@@ -23,10 +24,12 @@ type FieldOptions<FieldProps, Type extends AuthenticatorFieldTypeKey> = {
   type: Type;
 } & Omit<FieldProps, 'disabled' | 'onBlur'>;
 
+type EmailFieldOptions = FieldOptions<PhoneNumberFieldProps, 'email'>;
 type PasswordFieldOptions = FieldOptions<PasswordFieldProps, 'password'>;
 type PhoneFieldOptions = FieldOptions<PhoneNumberFieldProps, 'phone'>;
 type DefaultFieldOptions = FieldOptions<TextFieldProps, 'default'>;
 export type TextFieldOptionsType = (
+  | EmailFieldOptions
   | PasswordFieldOptions
   | PhoneFieldOptions
   | DefaultFieldOptions

package/src/Authenticator/hooks/useFieldValues/__tests__/useFieldValues.spec.ts

@@ -2,7 +2,10 @@ import { act, renderHook } from '@testing-library/react-hooks';
 import { NativeSyntheticEvent, TextInputFocusEventData } from 'react-native';
 
 import { Logger } from 'aws-amplify';
-import { UnverifiedContactMethodType } from '@aws-amplify/ui';
+import {
+  UnverifiedContactMethodType,
+  authenticatorTextUtil,
+} from '@aws-amplify/ui';
 import {
   RadioFieldOptions,
   TextFieldOptionsType,
@@ -58,6 +61,7 @@ describe('useFieldValues', () => {
           value: undefined,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -80,6 +84,7 @@ describe('useFieldValues', () => {
           value: undefined,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -95,6 +100,7 @@ describe('useFieldValues', () => {
     expect(result.current).toStrictEqual({
       disableFormSubmit: true,
       fields: [{ ...radioField, onChange: expect.any(Function) }],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -105,6 +111,7 @@ describe('useFieldValues', () => {
     expect(result.current).toStrictEqual({
       disableFormSubmit: false,
       fields: mockfields,
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -129,7 +136,9 @@ describe('useFieldValues', () => {
     const mockEvent = {
       nativeEvent: { target: 1 },
     } as NativeSyntheticEvent<TextInputFocusEventData>;
-    result.current.fields[0].onBlur?.(mockEvent);
+    act(() => {
+      result.current.fields[0].onBlur?.(mockEvent);
+    });
     expect(props.handleBlur).toHaveBeenCalledTimes(1);
     expect(props.handleBlur).toHaveBeenCalledWith({
       name: textField.name,
@@ -153,6 +162,68 @@ describe('useFieldValues', () => {
     });
   });
 
+  it('runs validations for email fields', () => {
+    const emailField = {
+      label: 'test',
+      type: 'email',
+      name: 'invalid_email',
+      value: 'test@',
+    } as TextFieldOptionsType;
+    const phoneTextField = {
+      type: 'phone',
+      name: 'testPhone',
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [emailField, phoneTextField],
+      })
+    );
+    const mockEvent = {
+      nativeEvent: { target: 1 },
+    } as NativeSyntheticEvent<TextInputFocusEventData>;
+    act(() => {
+      result.current.fields[0].onBlur?.(mockEvent);
+    });
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      name: emailField.name,
+      value: undefined,
+    });
+    expect(result.current.fieldValidationErrors).toStrictEqual({
+      [emailField.name]: [authenticatorTextUtil.getInvalidEmailText()],
+    });
+  });
+
+  it('runs validations for required fields', () => {
+    const requiredField = {
+      label: 'test',
+      type: 'password',
+      name: 'required',
+      required: true,
+    } as TextFieldOptionsType;
+    const { result } = renderHook(() =>
+      useFieldValues({
+        ...props,
+        fields: [requiredField],
+      })
+    );
+    const mockEvent = {
+      nativeEvent: { target: 1 },
+    } as NativeSyntheticEvent<TextInputFocusEventData>;
+    act(() => {
+      result.current.fields[0].onBlur?.(mockEvent);
+    });
+    expect(props.handleBlur).toHaveBeenCalledTimes(1);
+    expect(props.handleBlur).toHaveBeenCalledWith({
+      name: requiredField.name,
+      value: undefined,
+    });
+    expect(result.current.fieldValidationErrors).toStrictEqual({
+      [requiredField.name]: [authenticatorTextUtil.getRequiredFieldText()],
+    });
+  });
+
   it('calls expected handlers for radios', () => {
     const { result } = renderHook(() =>
       useFieldValues({
@@ -234,6 +305,7 @@ describe('useFieldValues', () => {
           value: undefined,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });
@@ -267,6 +339,7 @@ describe('useFieldValues', () => {
           value: mockValue,
         },
       ],
+      fieldValidationErrors: {},
       handleFormSubmit: expect.any(Function),
     });
   });

package/src/Authenticator/hooks/useFieldValues/__tests__/utils.spec.ts

@@ -1,10 +1,12 @@
 import { Logger } from 'aws-amplify';
-import { TypedField } from '../../types';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
 
+import { TextFieldOptionsType, TypedField } from '../../types';
 import {
   getRouteTypedFields,
   getSanitizedRadioFields,
   getSanitizedTextFields,
+  runFieldValidation,
 } from '../utils';
 
 const warnSpy = jest.spyOn(Logger.prototype, 'warn');
@@ -214,3 +216,67 @@ describe('getRouteTypedFields', () => {
     expect(fields).toStrictEqual(expected);
   });
 });
+
+describe('runFieldValidation', () => {
+  const { getInvalidEmailText, getRequiredFieldText } = authenticatorTextUtil;
+  const field: TextFieldOptionsType = {
+    required: true,
+    type: 'email',
+    name: 'email',
+  };
+
+  it('should return an empty array when no errors are found', () => {
+    const value = 'test@example.com';
+    const stateValidations = {};
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([]);
+  });
+
+  it('should return an array with the required field error when value is missing', () => {
+    const value = undefined;
+    const stateValidations = {};
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([getRequiredFieldText(), getInvalidEmailText()]);
+  });
+
+  it('should return an array with the invalid email error when email value is invalid', () => {
+    const value = 'invalid-email';
+    const stateValidations = {};
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([getInvalidEmailText()]);
+  });
+
+  it('should include state machine validation errors in the result', () => {
+    const value = 'test@example.com';
+    const errorMessage = 'Email already exists.';
+    const stateValidations = {
+      email: errorMessage,
+    };
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([errorMessage]);
+  });
+
+  it('should concatenate state machine validation errors with other errors', () => {
+    const value = undefined;
+    const errorMessage = 'Email already exists.';
+    const stateValidations = {
+      email: errorMessage,
+    };
+
+    const result = runFieldValidation(field, value, stateValidations);
+
+    expect(result).toEqual([
+      getRequiredFieldText(),
+      getInvalidEmailText(),
+      errorMessage,
+    ]);
+  });
+});

package/src/Authenticator/hooks/useFieldValues/types.ts

@@ -1,7 +1,9 @@
 import {
   AuthenticatorComponentDefaultProps,
   AuthenticatorRouteComponentName,
+  AuthenticatorMachineContext,
 } from '@aws-amplify/ui-react-core';
+import { ValidationError } from '@aws-amplify/ui';
 
 import { TypedField } from '../types';
 
@@ -26,10 +28,13 @@ export interface UseFieldValuesParams<FieldType extends TypedField> {
    * machine "SUBMIT"" event handler, validates `field` value against machine validation rules
    */
   handleSubmit: MachineEventHandlers['handleSubmit'];
+
+  validationErrors?: AuthenticatorMachineContext['validationErrors'];
 }
 
 export interface UseFieldValues<FieldType extends TypedField> {
   fields: FieldType[]; // return either radio or text
+  fieldValidationErrors: ValidationError | undefined;
   disableFormSubmit: boolean;
   handleFormSubmit: () => void;
 }