@aws-amplify/ui-react-native 2.4.5 → 2.5.0

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

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { DefaultRadioFormFieldsProps } from './types';
+
+import { RadioGroup } from '../../../primitives/RadioGroup';
+import { Radio } from '../../../primitives/Radio';
+
+const DefaultSelectMfaTypeFormFields = ({
+  fields = [],
+  fieldContainerStyle,
+  fieldLabelStyle,
+  isPending,
+  style,
+}: DefaultRadioFormFieldsProps): React.JSX.Element => {
+  // set initial value for radio field based on selected bool
+  const initialValue = fields.find((field) => !!field.selected)?.value;
+  return (
+    <RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
+      {fields.map(({ value, label, ...props }) => (
+        <Radio
+          {...props}
+          key={value}
+          value={value}
+          label={label}
+          labelStyle={fieldLabelStyle}
+          style={fieldContainerStyle}
+        />
+      ))}
+    </RadioGroup>
+  );
+};
+
+DefaultSelectMfaTypeFormFields.displayName = 'FormFields';
+
+export default DefaultSelectMfaTypeFormFields;

package/src/Authenticator/common/DefaultFormFields/{DefaultRadioFormFields.tsx → DefaultVerifyUserFormFields.tsx}

@@ -14,18 +14,19 @@ const attributeMap: AttributeMap = {
   phone_number: 'Phone Number',
 };
 
-const DefaultRadioFormFields = ({
-  fields,
+const DefaultVerifyUserFormFields = ({
+  fields = [],
   fieldContainerStyle,
   fieldLabelStyle,
   isPending,
   style,
 }: DefaultRadioFormFieldsProps): React.JSX.Element => {
+  // set initial value for radio field based on selected bool
+  const initialValue = fields.find((field) => !!field.selected)?.name;
   return (
-    <RadioGroup disabled={isPending} style={style}>
-      {(fields ?? []).map(({ name, value, ...props }) => {
+    <RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
+      {fields.map(({ name, value, ...props }) => {
         const attributeType = attributeMap[name as keyof AttributeMap];
-
         return (
           <Radio
             {...props}
@@ -43,6 +44,6 @@ const DefaultRadioFormFields = ({
   );
 };
 
-DefaultRadioFormFields.displayName = 'FormFields';
+DefaultVerifyUserFormFields.displayName = 'FormFields';
 
-export default DefaultRadioFormFields;
+export default DefaultVerifyUserFormFields;

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

@@ -1,3 +1,4 @@
-export { default as DefaultRadioFormFields } from './DefaultRadioFormFields';
 export { default as DefaultTextFormFields } from './DefaultTextFormFields';
+export { default as DefaultVerifyUserFormFields } from './DefaultVerifyUserFormFields';
+export { default as DefaultSelectMfaTypeFormFields } from './DefaultSelectMfaTypeFormFields';
 export { DefaultFormFieldsComponent, DefaultFormFieldsStyle } from './types';

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

@@ -2,14 +2,20 @@ import { useMemo, useState } from 'react';
 import { ConsoleLogger as Logger } from 'aws-amplify/utils';
 import { ValidationError } from '@aws-amplify/ui';
 
-import { OnChangeText, TextFieldOnBlur, TypedField } from '../types';
+import {
+  OnChangeText,
+  RadioFieldOptions,
+  TextFieldOnBlur,
+  TypedField,
+} from '../types';
 
 import { UseFieldValues, UseFieldValuesParams } from './types';
 import {
   getSanitizedTextFields,
-  getSanitizedRadioFields,
   isRadioFieldOptions,
   runFieldValidation,
+  getSanitizedVerifyUserFields,
+  getSanitizedSelectMfaTypeFields,
 } from './utils';
 
 const logger = new Logger('Authenticator');
@@ -22,11 +28,32 @@ export default function useFieldValues<FieldType extends TypedField>({
   handleSubmit,
   validationErrors,
 }: UseFieldValuesParams<FieldType>): UseFieldValues<FieldType> {
-  const [values, setValues] = useState<Record<string, string>>({});
   const [touched, setTouched] = useState<Record<string, boolean>>({});
   const [fieldValidationErrors, setFieldValidationErrors] =
     useState<ValidationError>({});
-  const isRadioFieldComponent = componentName === 'VerifyUser';
+  const isVerifyUserRoute = componentName === 'VerifyUser';
+  const isSelectMfaTypeRoute = componentName === 'SelectMfaType';
+  const isRadioFieldComponent = isVerifyUserRoute || isSelectMfaTypeRoute;
+
+  // initialize values based on route
+  // select mfa type screen should auto select first radio option
+  const [values, setValues] = useState(() => {
+    const result: Record<string, string> = {};
+    if (isSelectMfaTypeRoute) {
+      const initialValue = fields[0]?.value;
+      if (initialValue) {
+        result.mfa_type = initialValue;
+      }
+    }
+    if (isVerifyUserRoute) {
+      const initialValue = fields[0]?.name;
+      if (initialValue) {
+        result.unverifiedAttr = initialValue;
+      }
+    }
+
+    return result;
+  });
 
   const sanitizedFields = useMemo(() => {
     if (!Array.isArray(fields)) {
@@ -36,12 +63,16 @@ export default function useFieldValues<FieldType extends TypedField>({
       return [];
     }
 
-    if (isRadioFieldComponent) {
-      return getSanitizedRadioFields(fields, componentName);
+    if (isVerifyUserRoute) {
+      return getSanitizedVerifyUserFields(fields);
+    }
+
+    if (isSelectMfaTypeRoute) {
+      return getSanitizedSelectMfaTypeFields(fields);
     }
 
     return getSanitizedTextFields(fields, componentName);
-  }, [componentName, fields, isRadioFieldComponent]);
+  }, [componentName, fields, isVerifyUserRoute, isSelectMfaTypeRoute]);
 
   const fieldsWithHandlers = sanitizedFields.map((field) => {
     if (isRadioFieldOptions(field)) {
@@ -49,11 +80,31 @@ export default function useFieldValues<FieldType extends TypedField>({
         // call `onChange` passed as radio `field` option
         field.onChange?.(value);
 
-        // set `name` as value of 'unverifiedAttr'
-        setValues({ unverifiedAttr: value });
+        // on VerifyUser route, set `name` as value of 'unverifiedAttr'
+        // on SelectMfaTYpe route, set `name` as value of 'mfa_type'
+        const fieldName = isVerifyUserRoute
+          ? 'unverifiedAttr'
+          : isSelectMfaTypeRoute
+          ? 'mfa_type'
+          : field.name;
+
+        setValues((prev) => ({ ...prev, [fieldName]: value }));
+      };
+
+      const result: RadioFieldOptions = {
+        ...field,
+        onChange,
       };
 
-      return { ...field, onChange };
+      // bind selected boolean attribute for radio field
+      if (isSelectMfaTypeRoute) {
+        result.selected = values.mfa_type === field.value;
+      }
+      if (isVerifyUserRoute) {
+        result.selected = values.unverifiedAttr === field.name;
+      }
+
+      return result;
     }
 
     const { name, label, labelHidden, ...rest } = field;
@@ -100,18 +151,11 @@ export default function useFieldValues<FieldType extends TypedField>({
     };
   }) as FieldType[];
 
-  const disableFormSubmit = isRadioFieldComponent
+  const disableFormSubmit = isVerifyUserRoute
     ? !values.unverifiedAttr
-    : fieldsWithHandlers.some(({ required, value }) => {
-        if (!required) {
-          return false;
-        }
-
-        if (value) {
-          return false;
-        }
-        return true;
-      });
+    : isSelectMfaTypeRoute
+    ? !values.mfa_type
+    : fieldsWithHandlers.some(({ required, value }) => required && !value);
 
   const handleFormSubmit = () => {
     const submitValue = isRadioFieldComponent

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

@@ -31,16 +31,15 @@ export const isRadioFieldOptions = (
   field: TypedField
 ): field is RadioFieldOptions => field?.type === 'radio';
 
-export const getSanitizedRadioFields = (
-  fields: TypedField[],
-  componentName: AuthenticatorRouteComponentName
+export const getSanitizedVerifyUserFields = (
+  fields: TypedField[]
 ): TypedField[] => {
   const values: Record<string, boolean> = {};
 
   return fields.filter((field) => {
     if (!isRadioFieldOptions(field)) {
       logger.warn(
-        `${componentName} component does not support text fields. field with type ${field.type} has been ignored.`
+        `VerifyUser component does not support text fields. field with type ${field.type} has been ignored.`
       );
       return false;
     }
@@ -77,6 +76,39 @@ export const getSanitizedRadioFields = (
   });
 };
 
+export const getSanitizedSelectMfaTypeFields = (
+  fields: TypedField[]
+): TypedField[] => {
+  const values: Record<string, boolean> = {};
+
+  return fields.filter((field) => {
+    const { value } = field;
+
+    if (!isRadioFieldOptions(field)) {
+      logger.warn(
+        `SelectMfaType component does not support non-radio fields; field with type "${field.type}" has been ignored.`
+      );
+      return false;
+    }
+
+    if (!value) {
+      logger.warn('Each field must have a value; field has been ignored.');
+      return false;
+    }
+
+    if (values[value]) {
+      logger.warn(
+        `Each field value must be unique; field with duplicate value of "${value}" has been ignored.`
+      );
+      return false;
+    }
+
+    values[value] = true;
+
+    return true;
+  });
+};
+
 export const getSanitizedTextFields = (
   fields: TypedField[],
   componentName: AuthenticatorRouteComponentName
@@ -180,9 +212,12 @@ export function getRouteTypedFields({
 
   // `VerifyUser` does not require additional updates to the shape of `fields`
   const isVerifyUserRoute = route === 'verifyUser';
+  const isSelectMfaTypeRoute = route === 'selectMfaType';
   const radioFields = fields as TypedField[];
 
-  return isVerifyUserRoute ? radioFields : getTypedFields(fields);
+  return isVerifyUserRoute || isSelectMfaTypeRoute
+    ? radioFields
+    : getTypedFields(fields);
 }
 
 /**

package/src/Authenticator/index.ts

@@ -7,6 +7,8 @@ export {
   ConfirmVerifyUserProps,
   ForceNewPasswordProps,
   ForgotPasswordProps,
+  SelectMfaTypeProps,
+  SetupEmailProps,
   SetupTotpProps,
   SignInProps,
   SignUpProps,

package/src/index.ts

@@ -11,6 +11,8 @@ export {
   ConfirmVerifyUserProps,
   ForceNewPasswordProps,
   ForgotPasswordProps,
+  SelectMfaTypeProps,
+  SetupEmailProps,
   SetupTotpProps,
   SignInProps,
   SignUpProps,

package/src/primitives/RadioGroup/RadioGroup.tsx

@@ -19,6 +19,8 @@ import { RadioProps } from '../Radio';
 import { getThemedStyles } from './styles';
 import { RadioGroupProps } from './types';
 
+export const RADIO_GROUP_CONTAINER_TEST_ID = 'amplify__radio-group__container';
+
 export default function RadioGroup<T>({
   accessible = true,
   accessibilityRole = 'radiogroup',
@@ -73,7 +75,11 @@ export default function RadioGroup<T>({
   );
 
   return (
-    <View {...rest} style={[themedStyle.container, containerStyle, style]}>
+    <View
+      {...rest}
+      style={[themedStyle.container, containerStyle, style]}
+      testID={RADIO_GROUP_CONTAINER_TEST_ID}
+    >
       <View
         accessible={accessible}
         accessibilityRole={accessibilityRole}

package/src/version.ts

@@ -1 +1 @@
-export const VERSION = '2.4.5';
+export const VERSION = '2.5.0';