chore(ui-react-native): Add RN Authenticator fields validations (#4107)

aws-amplify · Jul 17, 2023 · 6d14bf3 · 6d14bf3
1 parent 7ab4713
commit 6d14bf3
Show file tree

Hide file tree

Showing 31 changed files with 343 additions and 14 deletions.
diff --git a/.changeset/rotten-lies-promise.md b/.changeset/rotten-lies-promise.md
@@ -0,0 +1,6 @@
+---
+'@aws-amplify/ui-react-native': patch
+'@aws-amplify/ui-react-core': patch
+---
+
+chore(ui-react-native): Add Authenticator fields validations
diff --git a/packages/e2e/features/ui/components/authenticator/sign-up-with-email.feature b/packages/e2e/features/ui/components/authenticator/sign-up-with-email.feature
@@ -51,6 +51,13 @@ Scenario: Sign up with a new email & password
   And I click the "Create Account" button
   Then I see "Confirmation Code"
 
+@react-native
+Scenario: Sign up using invalid email
+  When I type a new "email" with value ''
+  Then I see "This field is required"
+  When I type a new "email" with value 'inv'
+  Then I see "Please enter a valid email"
+
   @angular @react @vue
   Scenario: Email field autocompletes username
 

diff --git a/packages/react-core/src/Authenticator/hooks/types.ts b/packages/react-core/src/Authenticator/hooks/types.ts
@@ -95,18 +95,21 @@ export type ConfirmSignInBaseProps<FieldType = {}> = {
   challengeName: AuthChallengeName;
   toSignIn: UseAuthenticator['toSignIn'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type ConfirmSignUpBaseProps<FieldType = {}> = {
   codeDeliveryDetails: UseAuthenticator['codeDeliveryDetails'];
   resendCode: UseAuthenticator['resendCode'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type ConfirmVerifyUserProps<FieldType = {}> = {
   skipVerification: UseAuthenticator['skipVerification'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type ForceResetPasswordBaseProps<FieldType = {}> = {
   toSignIn: UseAuthenticator['toSignIn'];
@@ -117,21 +120,24 @@ export type ForceResetPasswordBaseProps<FieldType = {}> = {
 export type ResetPasswordBaseProps<FieldType = {}> = {
   toSignIn: UseAuthenticator['toSignIn'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type SetupTOTPBaseProps<FieldType = {}> = {
   toSignIn: UseAuthenticator['toSignIn'];
   totpSecretCode: UseAuthenticator['totpSecretCode'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type SignInBaseProps<FieldType = {}> = {
   hideSignUp?: boolean;
   toFederatedSignIn: UseAuthenticator['toFederatedSignIn'];
   toResetPassword: UseAuthenticator['toResetPassword'];
   toSignUp: UseAuthenticator['toSignUp'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export type SignUpBaseProps<FieldType = {}> = {
   hideSignIn?: boolean;
@@ -144,7 +150,8 @@ export type SignUpBaseProps<FieldType = {}> = {
 export type VerifyUserProps<FieldType = {}> = {
   skipVerification: UseAuthenticator['skipVerification'];
 } & CommonRouteProps &
-  ComponentSlots<FieldType>;
+  ComponentSlots<FieldType> &
+  ValidationProps;
 
 export interface DefaultProps<FieldType = {}> {
   ConfirmSignIn: ConfirmSignInBaseProps<FieldType>;

diff --git a/packages/react-native/jest.config.js b/packages/react-native/jest.config.js
@@ -1,6 +1,7 @@
 module.exports = {
   preset: 'react-native',
   modulePathIgnorePatterns: ['<rootDir>/dist/'],
+  collectCoverage: true,
   collectCoverageFrom: [
     '<rootDir>/src/**/*.{js,jsx,ts,tsx}',
     '!<rootDir>/src/**/*{c,C}onstants.ts',

diff --git a/...ges/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx b/...ges/react-native/src/Authenticator/Defaults/ConfirmResetPassword/ConfirmResetPassword.tsx
@@ -28,18 +28,21 @@ const ConfirmResetPassword = ({
   hasValidationErrors,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
 }: DefaultConfirmResetPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -72,6 +75,7 @@ const ConfirmResetPassword = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignIn/ConfirmSignIn.tsx
@@ -28,18 +28,21 @@ const ConfirmSignIn = ({
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
 }: DefaultConfirmSignInProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getChallengeText(challengeName);
@@ -71,6 +74,7 @@ const ConfirmSignIn = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/...es/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx b/...es/react-native/src/Authenticator/Defaults/ConfirmSignIn/__tests__/ConfirmSignIn.spec.tsx
@@ -21,6 +21,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmSignIn.Header,
   isPending: false,
   toSignIn: jest.fn(),

diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmSignUp/ConfirmSignUp.tsx
@@ -29,18 +29,21 @@ const ConfirmSignUp = ({
   handleSubmit,
   isPending,
   resendCode,
+  validationErrors,
   ...rest
 }: DefaultConfirmSignUpProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getDeliveryMethodText(codeDeliveryDetails);
@@ -74,6 +77,7 @@ const ConfirmSignUp = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/...es/react-native/src/Authenticator/Defaults/ConfirmSignUp/__tests__/ConfirmSignUp.spec.tsx b/...es/react-native/src/Authenticator/Defaults/ConfirmSignUp/__tests__/ConfirmSignUp.spec.tsx
@@ -16,6 +16,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmSignUp.Header,
   isPending: false,
   resendCode: jest.fn(),

diff --git a/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx b/packages/react-native/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx
@@ -27,18 +27,21 @@ const ConfirmVerifyUser = ({
   handleSubmit,
   isPending,
   skipVerification,
+  validationErrors,
   ...rest
 }: DefaultConfirmVerifyUserProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getAccountRecoveryInfoText();
@@ -70,6 +73,7 @@ const ConfirmVerifyUser = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/...-native/src/Authenticator/Defaults/ConfirmVerifyUser/__tests__/ConfirmVerifyUser.spec.tsx b/...-native/src/Authenticator/Defaults/ConfirmVerifyUser/__tests__/ConfirmVerifyUser.spec.tsx
@@ -18,6 +18,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ConfirmVerifyUser.Header,
   isPending: false,
   skipVerification: jest.fn(),

diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
@@ -24,18 +24,21 @@ const ForceNewPassword = ({
   hasValidationErrors,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
 }: DefaultForceNewPasswordProps): JSX.Element => {
   const {
     disableFormSubmit,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const disabled = hasValidationErrors || disableFormSubmit;
@@ -70,6 +73,7 @@ const ForceNewPassword = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/packages/react-native/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ResetPassword/ResetPassword.tsx
@@ -26,18 +26,21 @@ const ResetPassword = ({
   handleSubmit,
   isPending,
   toSignIn,
+  validationErrors,
   ...rest
 }: DefaultResetPasswordProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getResetYourPasswordText();
@@ -69,6 +72,7 @@ const ResetPassword = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/...es/react-native/src/Authenticator/Defaults/ResetPassword/__tests__/ResetPassword.spec.tsx b/...es/react-native/src/Authenticator/Defaults/ResetPassword/__tests__/ResetPassword.spec.tsx
@@ -21,6 +21,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: ResetPassword.Header,
   isPending: false,
   toSignIn: jest.fn(),

diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/SetupTOTP.tsx
@@ -33,18 +33,21 @@ const SetupTOTP = ({
   isPending,
   toSignIn,
   totpSecretCode,
+  validationErrors,
   ...rest
 }: DefaultSetupTOTPProps): JSX.Element => {
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSetupTOTPText();
@@ -88,6 +91,7 @@ const SetupTOTP = ({
       headerText={headerText}
       fields={fieldsWithHandlers}
       isPending={isPending}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SetupTOTP/__tests__/SetupTOTP.spec.tsx
@@ -22,6 +22,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   isPending: false,
   toSignIn,
   totpSecretCode: "Let's keep it hush hush",

diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/SignIn.tsx
@@ -21,6 +21,7 @@ const SignIn = ({
   hideSignUp,
   toResetPassword,
   toSignUp,
+  validationErrors,
   ...rest
 }: DefaultSignInProps): JSX.Element => {
   const {
@@ -33,13 +34,15 @@ const SignIn = ({
   const {
     disableFormSubmit: disabled,
     fields: fieldsWithHandlers,
+    fieldValidationErrors,
     handleFormSubmit,
   } = useFieldValues({
     componentName: COMPONENT_NAME,
     fields,
     handleBlur,
     handleChange,
     handleSubmit,
+    validationErrors,
   });
 
   const headerText = getSignInTabText();
@@ -75,6 +78,7 @@ const SignIn = ({
       buttons={buttons}
       fields={fieldsWithHandlers}
       headerText={headerText}
+      validationErrors={fieldValidationErrors}
     />
   );
 };

diff --git a/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx b/packages/react-native/src/Authenticator/Defaults/SignIn/__tests__/SignIn.spec.tsx
@@ -29,6 +29,7 @@ const props = {
   handleBlur: jest.fn(),
   handleChange: jest.fn(),
   handleSubmit: jest.fn(),
+  hasValidationErrors: false,
   Header: SignIn.Header,
   isPending: false,
   socialProviders: undefined,