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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/dist/Authenticator/Authenticator.d.ts +33 -0
  2. package/dist/Authenticator/Authenticator.js +5 -1
  3. package/dist/Authenticator/Defaults/SelectMfaType/SelectMfaType.d.ts +14 -0
  4. package/dist/Authenticator/Defaults/SelectMfaType/SelectMfaType.js +39 -0
  5. package/dist/Authenticator/Defaults/SelectMfaType/index.d.ts +1 -0
  6. package/dist/Authenticator/Defaults/SelectMfaType/index.js +1 -0
  7. package/dist/Authenticator/Defaults/SetupEmail/SetupEmail.d.ts +14 -0
  8. package/dist/Authenticator/Defaults/SetupEmail/SetupEmail.js +39 -0
  9. package/dist/Authenticator/Defaults/SetupEmail/index.d.ts +1 -0
  10. package/dist/Authenticator/Defaults/SetupEmail/index.js +1 -0
  11. package/dist/Authenticator/Defaults/VerifyUser/VerifyUser.js +2 -2
  12. package/dist/Authenticator/Defaults/index.d.ts +3 -1
  13. package/dist/Authenticator/Defaults/index.js +2 -0
  14. package/dist/Authenticator/Defaults/types.d.ts +22 -0
  15. package/dist/Authenticator/common/DefaultFormFields/DefaultSelectMfaTypeFormFields.d.ts +7 -0
  16. package/dist/Authenticator/common/DefaultFormFields/DefaultSelectMfaTypeFormFields.js +12 -0
  17. package/dist/Authenticator/common/DefaultFormFields/{DefaultRadioFormFields.d.ts → DefaultVerifyUserFormFields.d.ts} +2 -2
  18. package/dist/Authenticator/common/DefaultFormFields/{DefaultRadioFormFields.js → DefaultVerifyUserFormFields.js} +7 -5
  19. package/dist/Authenticator/common/DefaultFormFields/index.d.ts +2 -1
  20. package/dist/Authenticator/common/DefaultFormFields/index.js +2 -1
  21. package/dist/Authenticator/hooks/useFieldValues/useFieldValues.js +52 -19
  22. package/dist/Authenticator/hooks/useFieldValues/utils.d.ts +2 -1
  23. package/dist/Authenticator/hooks/useFieldValues/utils.js +26 -3
  24. package/dist/Authenticator/index.d.ts +1 -1
  25. package/dist/index.d.ts +1 -1
  26. package/dist/primitives/RadioGroup/RadioGroup.d.ts +1 -0
  27. package/dist/primitives/RadioGroup/RadioGroup.js +2 -1
  28. package/dist/version.d.ts +1 -1
  29. package/dist/version.js +1 -1
  30. package/lib/Authenticator/Authenticator.js +4 -0
  31. package/lib/Authenticator/Defaults/SelectMfaType/SelectMfaType.js +42 -0
  32. package/lib/Authenticator/Defaults/SelectMfaType/index.js +8 -0
  33. package/lib/Authenticator/Defaults/SetupEmail/SetupEmail.js +42 -0
  34. package/lib/Authenticator/Defaults/SetupEmail/index.js +8 -0
  35. package/lib/Authenticator/Defaults/VerifyUser/VerifyUser.js +1 -1
  36. package/lib/Authenticator/Defaults/index.js +5 -1
  37. package/lib/Authenticator/common/DefaultFormFields/DefaultSelectMfaTypeFormFields.js +15 -0
  38. package/lib/Authenticator/common/DefaultFormFields/{DefaultRadioFormFields.js → DefaultVerifyUserFormFields.js} +7 -5
  39. package/lib/Authenticator/common/DefaultFormFields/index.js +5 -3
  40. package/lib/Authenticator/hooks/useFieldValues/useFieldValues.js +51 -18
  41. package/lib/Authenticator/hooks/useFieldValues/utils.js +29 -5
  42. package/lib/primitives/RadioGroup/RadioGroup.js +3 -1
  43. package/lib/version.js +1 -1
  44. package/package.json +4 -4
  45. package/src/Authenticator/Authenticator.tsx +6 -0
  46. package/src/Authenticator/Defaults/SelectMfaType/SelectMfaType.tsx +87 -0
  47. package/src/Authenticator/Defaults/SelectMfaType/index.ts +1 -0
  48. package/src/Authenticator/Defaults/SetupEmail/SetupEmail.tsx +86 -0
  49. package/src/Authenticator/Defaults/SetupEmail/index.ts +1 -0
  50. package/src/Authenticator/Defaults/VerifyUser/VerifyUser.tsx +2 -2
  51. package/src/Authenticator/Defaults/index.ts +4 -0
  52. package/src/Authenticator/Defaults/types.ts +30 -0
  53. package/src/Authenticator/common/DefaultFormFields/DefaultSelectMfaTypeFormFields.tsx +35 -0
  54. package/src/Authenticator/common/DefaultFormFields/{DefaultRadioFormFields.tsx → DefaultVerifyUserFormFields.tsx} +8 -7
  55. package/src/Authenticator/common/DefaultFormFields/index.ts +2 -1
  56. package/src/Authenticator/hooks/useFieldValues/useFieldValues.ts +65 -21
  57. package/src/Authenticator/hooks/useFieldValues/utils.ts +40 -5
  58. package/src/Authenticator/index.ts +2 -0
  59. package/src/index.ts +2 -0
  60. package/src/primitives/RadioGroup/RadioGroup.tsx +7 -1
  61. package/src/version.ts +1 -1
@@ -176,5 +176,38 @@ declare namespace Authenticator {
176
176
  Header: typeof import("./common").DefaultHeader;
177
177
  displayName: string;
178
178
  };
179
+ var SetupEmail: {
180
+ ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }: import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").TextFieldOptionsType> & {
181
+ toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
182
+ } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
183
+ fields: import("./hooks").TextFieldOptionsType[];
184
+ } & {
185
+ style?: import("./Defaults/types").SetupEmailStyle | undefined;
186
+ }): React.JSX.Element;
187
+ Footer: typeof import("./common").DefaultFooter;
188
+ FormFields: {
189
+ ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending, style, validationErrors, }: import("./common/DefaultFormFields/types").DefaultTextFormFieldsProps): React.JSX.Element;
190
+ displayName: string;
191
+ };
192
+ Header: typeof import("./common").DefaultHeader;
193
+ displayName: string;
194
+ };
195
+ var SelectMfaType: {
196
+ ({ challengeName, fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }: import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ComponentSlots<import("./hooks").RadioFieldOptions> & {
197
+ challengeName: import("@aws-amplify/ui").ChallengeName | undefined;
198
+ toSignIn: (data?: import("@aws-amplify/ui").AuthEventData | undefined) => void;
199
+ } & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").CommonRouteProps & import("@aws-amplify/ui-react-core/dist/types/Authenticator/hooks").ValidationProps & {
200
+ fields: import("./hooks").RadioFieldOptions[];
201
+ } & {
202
+ style?: import("./Defaults/types").SelectMfaTypeStyle | undefined;
203
+ }): React.JSX.Element;
204
+ Footer: typeof import("./common").DefaultFooter;
205
+ FormFields: {
206
+ ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }: import("./common/DefaultFormFields/types").DefaultRadioFormFieldsProps): React.JSX.Element;
207
+ displayName: string;
208
+ };
209
+ Header: typeof import("./common").DefaultHeader;
210
+ displayName: string;
211
+ };
179
212
  }
180
213
  export default Authenticator;
@@ -5,7 +5,7 @@ import { useDeprecationWarning } from '../hooks';
5
5
  import { DefaultContainer, InnerContainer } from './common';
6
6
  import { getRouteTypedFields } from './hooks';
7
7
  import { VERSION } from '../version';
8
- import { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ForgotPassword, SetupTotp, SignIn, SignUp, VerifyUser, } from './Defaults';
8
+ import { ConfirmResetPassword, ConfirmSignIn, ConfirmSignUp, ConfirmVerifyUser, ForceNewPassword, ForgotPassword, SetupTotp, SignIn, SignUp, VerifyUser, SetupEmail, SelectMfaType, } from './Defaults';
9
9
  const DEFAULTS = {
10
10
  ConfirmResetPassword,
11
11
  ConfirmSignIn,
@@ -17,6 +17,8 @@ const DEFAULTS = {
17
17
  SignIn,
18
18
  SignUp,
19
19
  VerifyUser,
20
+ SetupEmail,
21
+ SelectMfaType,
20
22
  };
21
23
  const routePropSelector = ({ route, }) => [
22
24
  route,
@@ -69,4 +71,6 @@ Authenticator.SetupTotp = SetupTotp;
69
71
  Authenticator.SignIn = SignIn;
70
72
  Authenticator.SignUp = SignUp;
71
73
  Authenticator.VerifyUser = VerifyUser;
74
+ Authenticator.SetupEmail = SetupEmail;
75
+ Authenticator.SelectMfaType = SelectMfaType;
72
76
  export default Authenticator;
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { DefaultFooter, DefaultHeader } from '../../common';
3
+ import { DefaultSelectMfaTypeProps } from '../types';
4
+ declare const SelectMfaType: {
5
+ ({ challengeName, fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }: DefaultSelectMfaTypeProps): React.JSX.Element;
6
+ Footer: typeof DefaultFooter;
7
+ FormFields: {
8
+ ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }: import("../../common/DefaultFormFields/types").DefaultRadioFormFieldsProps): React.JSX.Element;
9
+ displayName: string;
10
+ };
11
+ Header: typeof DefaultHeader;
12
+ displayName: string;
13
+ };
14
+ export default SelectMfaType;
@@ -0,0 +1,39 @@
1
+ import React, { useMemo } from 'react';
2
+ import { authenticatorTextUtil } from '@aws-amplify/ui';
3
+ import { DefaultContent, DefaultFooter, DefaultHeader, DefaultSelectMfaTypeFormFields, } from '../../common';
4
+ import { useFieldValues } from '../../hooks';
5
+ const COMPONENT_NAME = 'SelectMfaType';
6
+ const { getSelectMfaTypeByChallengeName, getBackToSignInText, getConfirmText, getConfirmingText, } = authenticatorTextUtil;
7
+ const SelectMfaType = ({ challengeName, fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }) => {
8
+ const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({
9
+ componentName: COMPONENT_NAME,
10
+ fields,
11
+ handleBlur,
12
+ handleChange,
13
+ handleSubmit,
14
+ validationErrors,
15
+ });
16
+ const headerText = getSelectMfaTypeByChallengeName(challengeName);
17
+ const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
18
+ const secondaryButtonText = getBackToSignInText();
19
+ const buttons = useMemo(() => ({
20
+ primary: {
21
+ children: primaryButtonText,
22
+ disabled,
23
+ onPress: handleFormSubmit,
24
+ },
25
+ links: [{ children: secondaryButtonText, onPress: toSignIn }],
26
+ }), [
27
+ disabled,
28
+ handleFormSubmit,
29
+ primaryButtonText,
30
+ secondaryButtonText,
31
+ toSignIn,
32
+ ]);
33
+ return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
34
+ };
35
+ SelectMfaType.Footer = DefaultFooter;
36
+ SelectMfaType.FormFields = DefaultSelectMfaTypeFormFields;
37
+ SelectMfaType.Header = DefaultHeader;
38
+ SelectMfaType.displayName = COMPONENT_NAME;
39
+ export default SelectMfaType;
@@ -0,0 +1 @@
1
+ export { default as SelectMfaType } from './SelectMfaType';
@@ -0,0 +1 @@
1
+ export { default as SelectMfaType } from './SelectMfaType';
@@ -0,0 +1,14 @@
1
+ import React from 'react';
2
+ import { DefaultFooter, DefaultHeader } from '../../common';
3
+ import { DefaultSetupEmailProps } from '../types';
4
+ declare const SetupEmail: {
5
+ ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }: DefaultSetupEmailProps): React.JSX.Element;
6
+ Footer: typeof DefaultFooter;
7
+ FormFields: {
8
+ ({ fieldContainerStyle, fieldErrorsContainer, fieldErrorStyle, fieldStyle, fields, isPending, style, validationErrors, }: import("../../common/DefaultFormFields/types").DefaultTextFormFieldsProps): React.JSX.Element;
9
+ displayName: string;
10
+ };
11
+ Header: typeof DefaultHeader;
12
+ displayName: string;
13
+ };
14
+ export default SetupEmail;
@@ -0,0 +1,39 @@
1
+ import React, { useMemo } from 'react';
2
+ import { authenticatorTextUtil } from '@aws-amplify/ui';
3
+ import { DefaultContent, DefaultFooter, DefaultTextFormFields, DefaultHeader, } from '../../common';
4
+ import { useFieldValues } from '../../hooks';
5
+ const COMPONENT_NAME = 'SetupEmail';
6
+ const { getBackToSignInText, getConfirmText, getConfirmingText, getSetupEmailText, } = authenticatorTextUtil;
7
+ const SetupEmail = ({ fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }) => {
8
+ const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = useFieldValues({
9
+ componentName: COMPONENT_NAME,
10
+ fields,
11
+ handleBlur,
12
+ handleChange,
13
+ handleSubmit,
14
+ validationErrors,
15
+ });
16
+ const headerText = getSetupEmailText();
17
+ const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
18
+ const secondaryButtonText = getBackToSignInText();
19
+ const buttons = useMemo(() => ({
20
+ primary: {
21
+ children: primaryButtonText,
22
+ disabled,
23
+ onPress: handleFormSubmit,
24
+ },
25
+ links: [{ children: secondaryButtonText, onPress: toSignIn }],
26
+ }), [
27
+ disabled,
28
+ handleFormSubmit,
29
+ primaryButtonText,
30
+ secondaryButtonText,
31
+ toSignIn,
32
+ ]);
33
+ return (<DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
34
+ };
35
+ SetupEmail.Footer = DefaultFooter;
36
+ SetupEmail.FormFields = DefaultTextFormFields;
37
+ SetupEmail.Header = DefaultHeader;
38
+ SetupEmail.displayName = COMPONENT_NAME;
39
+ export default SetupEmail;
@@ -0,0 +1 @@
1
+ export { default as SetupEmail } from './SetupEmail';
@@ -0,0 +1 @@
1
+ export { default as SetupEmail } from './SetupEmail';
@@ -1,6 +1,6 @@
1
1
  import React, { useMemo } from 'react';
2
2
  import { authenticatorTextUtil } from '@aws-amplify/ui';
3
- import { DefaultContent, DefaultFooter, DefaultHeader, DefaultRadioFormFields, } from '../../common';
3
+ import { DefaultContent, DefaultFooter, DefaultHeader, DefaultVerifyUserFormFields, } from '../../common';
4
4
  import { useFieldValues } from '../../hooks';
5
5
  const COMPONENT_NAME = 'VerifyUser';
6
6
  const { getSkipText, getVerifyContactText, getVerifyText, getAccountRecoveryInfoText, } = authenticatorTextUtil;
@@ -24,7 +24,7 @@ const VerifyUser = ({ fields, handleBlur, handleChange, handleSubmit, skipVerifi
24
24
  return (<DefaultContent {...rest} body={bodyText} buttons={buttons} fields={fieldsWithHandlers} headerText={headerText} validationErrors={fieldValidationErrors}/>);
25
25
  };
26
26
  VerifyUser.Footer = DefaultFooter;
27
- VerifyUser.FormFields = DefaultRadioFormFields;
27
+ VerifyUser.FormFields = DefaultVerifyUserFormFields;
28
28
  VerifyUser.Header = DefaultHeader;
29
29
  VerifyUser.displayName = COMPONENT_NAME;
30
30
  export default VerifyUser;
@@ -8,4 +8,6 @@ export { SetupTotp } from './SetupTotp';
8
8
  export { SignIn } from './SignIn';
9
9
  export { SignUp } from './SignUp';
10
10
  export { VerifyUser } from './VerifyUser';
11
- export { Components, DefaultComponents, ConfirmResetPasswordProps, ConfirmSignInProps, ConfirmSignUpProps, ConfirmVerifyUserProps, ForceNewPasswordProps, ForgotPasswordProps, SetupTotpProps, SignInProps, SignUpProps, VerifyUserProps, } from './types';
11
+ export { SelectMfaType } from './SelectMfaType';
12
+ export { SetupEmail } from './SetupEmail';
13
+ export { Components, DefaultComponents, ConfirmResetPasswordProps, ConfirmSignInProps, ConfirmSignUpProps, ConfirmVerifyUserProps, ForceNewPasswordProps, ForgotPasswordProps, SelectMfaTypeProps, SetupEmailProps, SetupTotpProps, SignInProps, SignUpProps, VerifyUserProps, } from './types';
@@ -8,3 +8,5 @@ export { SetupTotp } from './SetupTotp';
8
8
  export { SignIn } from './SignIn';
9
9
  export { SignUp } from './SignUp';
10
10
  export { VerifyUser } from './VerifyUser';
11
+ export { SelectMfaType } from './SelectMfaType';
12
+ export { SetupEmail } from './SetupEmail';
@@ -20,6 +20,10 @@ export interface SignUpStyle {
20
20
  }
21
21
  export interface VerifyUserStyle {
22
22
  }
23
+ export interface SetupEmailStyle {
24
+ }
25
+ export interface SelectMfaTypeStyle {
26
+ }
23
27
  export type DefaultComponents<FieldType = {}, Props = {}> = AuthenticatorComponentDefaults<FieldType, Props>;
24
28
  export type DefaultConfirmResetPasswordProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
25
29
  style?: ConfirmResetPasswordStyle;
@@ -51,6 +55,12 @@ export type DefaultSignUpProps = React.ComponentPropsWithoutRef<DefaultComponent
51
55
  export type DefaultVerifyUserProps = React.ComponentPropsWithoutRef<DefaultComponents<RadioFieldOptions, {
52
56
  style?: VerifyUserStyle;
53
57
  }>['VerifyUser']>;
58
+ export type DefaultSetupEmailProps = React.ComponentPropsWithoutRef<DefaultComponents<TextFieldOptionsType, {
59
+ style?: SetupEmailStyle;
60
+ }>['SetupEmail']>;
61
+ export type DefaultSelectMfaTypeProps = React.ComponentPropsWithoutRef<DefaultComponents<RadioFieldOptions, {
62
+ style?: SelectMfaTypeStyle;
63
+ }>['SelectMfaType']>;
54
64
  /**
55
65
  * Custom Authenticator components
56
66
  */
@@ -85,6 +95,12 @@ type SignUpComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
85
95
  type VerifyUserComponent<P = {}> = OverrideComponents<RadioFieldOptions, {
86
96
  style?: VerifyUserStyle;
87
97
  } & P>['VerifyUser'];
98
+ type SetupEmailComponent<P = {}> = OverrideComponents<TextFieldOptionsType, {
99
+ style?: SetupEmailStyle;
100
+ } & P>['SetupEmail'];
101
+ type SelectMfaTypeComponent<P = {}> = OverrideComponents<RadioFieldOptions, {
102
+ style?: SelectMfaTypeStyle;
103
+ } & P>['SelectMfaType'];
88
104
  /**
89
105
  * Override `Authenticator` components param
90
106
  */
@@ -95,6 +111,8 @@ export interface Components {
95
111
  ConfirmVerifyUser?: ConfirmVerifyUserComponent;
96
112
  ForceNewPassword?: ForceNewPasswordComponent;
97
113
  ForgotPassword?: ForgotPasswordComponent;
114
+ SelectMfaType?: SelectMfaTypeComponent;
115
+ SetupEmail?: SetupEmailComponent;
98
116
  SetupTotp?: SetupTotpComponent;
99
117
  SignIn?: SignInComponent;
100
118
  SignUp?: SignUpComponent;
@@ -112,6 +130,10 @@ export interface ForceNewPasswordProps extends DefaultForceNewPasswordProps {
112
130
  }
113
131
  export interface ForgotPasswordProps extends DefaultForgotPasswordProps {
114
132
  }
133
+ export interface SelectMfaTypeProps extends DefaultSelectMfaTypeProps {
134
+ }
135
+ export interface SetupEmailProps extends DefaultSetupEmailProps {
136
+ }
115
137
  export interface SetupTotpProps extends DefaultSetupTotpProps {
116
138
  }
117
139
  export interface SignInProps extends DefaultSignInProps {
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ import { DefaultRadioFormFieldsProps } from './types';
3
+ declare const DefaultSelectMfaTypeFormFields: {
4
+ ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }: DefaultRadioFormFieldsProps): React.JSX.Element;
5
+ displayName: string;
6
+ };
7
+ export default DefaultSelectMfaTypeFormFields;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import { RadioGroup } from '../../../primitives/RadioGroup';
3
+ import { Radio } from '../../../primitives/Radio';
4
+ const DefaultSelectMfaTypeFormFields = ({ fields = [], fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
5
+ // set initial value for radio field based on selected bool
6
+ const initialValue = fields.find((field) => !!field.selected)?.value;
7
+ return (<RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
8
+ {fields.map(({ value, label, ...props }) => (<Radio {...props} key={value} value={value} label={label} labelStyle={fieldLabelStyle} style={fieldContainerStyle}/>))}
9
+ </RadioGroup>);
10
+ };
11
+ DefaultSelectMfaTypeFormFields.displayName = 'FormFields';
12
+ export default DefaultSelectMfaTypeFormFields;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { DefaultRadioFormFieldsProps } from './types';
3
- declare const DefaultRadioFormFields: {
3
+ declare const DefaultVerifyUserFormFields: {
4
4
  ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }: DefaultRadioFormFieldsProps): React.JSX.Element;
5
5
  displayName: string;
6
6
  };
7
- export default DefaultRadioFormFields;
7
+ export default DefaultVerifyUserFormFields;
@@ -5,9 +5,11 @@ const attributeMap = {
5
5
  email: 'Email',
6
6
  phone_number: 'Phone Number',
7
7
  };
8
- const DefaultRadioFormFields = ({ fields, fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
9
- return (<RadioGroup disabled={isPending} style={style}>
10
- {(fields ?? []).map(({ name, value, ...props }) => {
8
+ const DefaultVerifyUserFormFields = ({ fields = [], fieldContainerStyle, fieldLabelStyle, isPending, style, }) => {
9
+ // set initial value for radio field based on selected bool
10
+ const initialValue = fields.find((field) => !!field.selected)?.name;
11
+ return (<RadioGroup disabled={isPending} style={style} initialValue={initialValue}>
12
+ {fields.map(({ name, value, ...props }) => {
11
13
  const attributeType = attributeMap[name];
12
14
  return (<Radio {...props} key={value}
13
15
  // value has to be name, because Auth is only interested in the
@@ -16,5 +18,5 @@ const DefaultRadioFormFields = ({ fields, fieldContainerStyle, fieldLabelStyle,
16
18
  })}
17
19
  </RadioGroup>);
18
20
  };
19
- DefaultRadioFormFields.displayName = 'FormFields';
20
- export default DefaultRadioFormFields;
21
+ DefaultVerifyUserFormFields.displayName = 'FormFields';
22
+ export default DefaultVerifyUserFormFields;
@@ -1,3 +1,4 @@
1
- export { default as DefaultRadioFormFields } from './DefaultRadioFormFields';
2
1
  export { default as DefaultTextFormFields } from './DefaultTextFormFields';
2
+ export { default as DefaultVerifyUserFormFields } from './DefaultVerifyUserFormFields';
3
+ export { default as DefaultSelectMfaTypeFormFields } from './DefaultSelectMfaTypeFormFields';
3
4
  export { DefaultFormFieldsComponent, DefaultFormFieldsStyle } from './types';
@@ -1,2 +1,3 @@
1
- export { default as DefaultRadioFormFields } from './DefaultRadioFormFields';
2
1
  export { default as DefaultTextFormFields } from './DefaultTextFormFields';
2
+ export { default as DefaultVerifyUserFormFields } from './DefaultVerifyUserFormFields';
3
+ export { default as DefaultSelectMfaTypeFormFields } from './DefaultSelectMfaTypeFormFields';
@@ -1,31 +1,70 @@
1
1
  import { useMemo, useState } from 'react';
2
2
  import { ConsoleLogger as Logger } from 'aws-amplify/utils';
3
- import { getSanitizedTextFields, getSanitizedRadioFields, isRadioFieldOptions, runFieldValidation, } from './utils';
3
+ import { getSanitizedTextFields, isRadioFieldOptions, runFieldValidation, getSanitizedVerifyUserFields, getSanitizedSelectMfaTypeFields, } from './utils';
4
4
  const logger = new Logger('Authenticator');
5
5
  export default function useFieldValues({ componentName, fields = [], handleBlur, handleChange, handleSubmit, validationErrors, }) {
6
- const [values, setValues] = useState({});
7
6
  const [touched, setTouched] = useState({});
8
7
  const [fieldValidationErrors, setFieldValidationErrors] = useState({});
9
- const isRadioFieldComponent = componentName === 'VerifyUser';
8
+ const isVerifyUserRoute = componentName === 'VerifyUser';
9
+ const isSelectMfaTypeRoute = componentName === 'SelectMfaType';
10
+ const isRadioFieldComponent = isVerifyUserRoute || isSelectMfaTypeRoute;
11
+ // initialize values based on route
12
+ // select mfa type screen should auto select first radio option
13
+ const [values, setValues] = useState(() => {
14
+ const result = {};
15
+ if (isSelectMfaTypeRoute) {
16
+ const initialValue = fields[0]?.value;
17
+ if (initialValue) {
18
+ result.mfa_type = initialValue;
19
+ }
20
+ }
21
+ if (isVerifyUserRoute) {
22
+ const initialValue = fields[0]?.name;
23
+ if (initialValue) {
24
+ result.unverifiedAttr = initialValue;
25
+ }
26
+ }
27
+ return result;
28
+ });
10
29
  const sanitizedFields = useMemo(() => {
11
30
  if (!Array.isArray(fields)) {
12
31
  logger.warn(`Invalid fields type of ${typeof fields} passed to ${componentName}. fields must be of type array.`);
13
32
  return [];
14
33
  }
15
- if (isRadioFieldComponent) {
16
- return getSanitizedRadioFields(fields, componentName);
34
+ if (isVerifyUserRoute) {
35
+ return getSanitizedVerifyUserFields(fields);
36
+ }
37
+ if (isSelectMfaTypeRoute) {
38
+ return getSanitizedSelectMfaTypeFields(fields);
17
39
  }
18
40
  return getSanitizedTextFields(fields, componentName);
19
- }, [componentName, fields, isRadioFieldComponent]);
41
+ }, [componentName, fields, isVerifyUserRoute, isSelectMfaTypeRoute]);
20
42
  const fieldsWithHandlers = sanitizedFields.map((field) => {
21
43
  if (isRadioFieldOptions(field)) {
22
44
  const onChange = (value) => {
23
45
  // call `onChange` passed as radio `field` option
24
46
  field.onChange?.(value);
25
- // set `name` as value of 'unverifiedAttr'
26
- setValues({ unverifiedAttr: value });
47
+ // on VerifyUser route, set `name` as value of 'unverifiedAttr'
48
+ // on SelectMfaTYpe route, set `name` as value of 'mfa_type'
49
+ const fieldName = isVerifyUserRoute
50
+ ? 'unverifiedAttr'
51
+ : isSelectMfaTypeRoute
52
+ ? 'mfa_type'
53
+ : field.name;
54
+ setValues((prev) => ({ ...prev, [fieldName]: value }));
27
55
  };
28
- return { ...field, onChange };
56
+ const result = {
57
+ ...field,
58
+ onChange,
59
+ };
60
+ // bind selected boolean attribute for radio field
61
+ if (isSelectMfaTypeRoute) {
62
+ result.selected = values.mfa_type === field.value;
63
+ }
64
+ if (isVerifyUserRoute) {
65
+ result.selected = values.unverifiedAttr === field.name;
66
+ }
67
+ return result;
29
68
  }
30
69
  const { name, label, labelHidden, ...rest } = field;
31
70
  const onBlur = (event) => {
@@ -61,17 +100,11 @@ export default function useFieldValues({ componentName, fields = [], handleBlur,
61
100
  value: values[name],
62
101
  };
63
102
  });
64
- const disableFormSubmit = isRadioFieldComponent
103
+ const disableFormSubmit = isVerifyUserRoute
65
104
  ? !values.unverifiedAttr
66
- : fieldsWithHandlers.some(({ required, value }) => {
67
- if (!required) {
68
- return false;
69
- }
70
- if (value) {
71
- return false;
72
- }
73
- return true;
74
- });
105
+ : isSelectMfaTypeRoute
106
+ ? !values.mfa_type
107
+ : fieldsWithHandlers.some(({ required, value }) => required && !value);
75
108
  const handleFormSubmit = () => {
76
109
  const submitValue = isRadioFieldComponent
77
110
  ? values
@@ -2,7 +2,8 @@ import { ValidationError } from '@aws-amplify/ui';
2
2
  import { AuthenticatorLegacyField, AuthenticatorRouteComponentName, UseAuthenticator } from '@aws-amplify/ui-react-core';
3
3
  import { RadioFieldOptions, TextFieldOptionsType, TypedField } from '../types';
4
4
  export declare const isRadioFieldOptions: (field: TypedField) => field is RadioFieldOptions;
5
- export declare const getSanitizedRadioFields: (fields: TypedField[], componentName: AuthenticatorRouteComponentName) => TypedField[];
5
+ export declare const getSanitizedVerifyUserFields: (fields: TypedField[]) => TypedField[];
6
+ export declare const getSanitizedSelectMfaTypeFields: (fields: TypedField[]) => TypedField[];
6
7
  export declare const getSanitizedTextFields: (fields: TypedField[], componentName: AuthenticatorRouteComponentName) => TypedField[];
7
8
  /**
8
9
  * Translate machine fields to typed fields
@@ -5,11 +5,11 @@ import { KEY_ALLOW_LIST } from './constants';
5
5
  const logger = new Logger('Authenticator');
6
6
  const { getInvalidEmailText, getRequiredFieldText } = authenticatorTextUtil;
7
7
  export const isRadioFieldOptions = (field) => field?.type === 'radio';
8
- export const getSanitizedRadioFields = (fields, componentName) => {
8
+ export const getSanitizedVerifyUserFields = (fields) => {
9
9
  const values = {};
10
10
  return fields.filter((field) => {
11
11
  if (!isRadioFieldOptions(field)) {
12
- logger.warn(`${componentName} component does not support text fields. field with type ${field.type} has been ignored.`);
12
+ logger.warn(`VerifyUser component does not support text fields. field with type ${field.type} has been ignored.`);
13
13
  return false;
14
14
  }
15
15
  const { name, value } = field;
@@ -30,6 +30,26 @@ export const getSanitizedRadioFields = (fields, componentName) => {
30
30
  return true;
31
31
  });
32
32
  };
33
+ export const getSanitizedSelectMfaTypeFields = (fields) => {
34
+ const values = {};
35
+ return fields.filter((field) => {
36
+ const { value } = field;
37
+ if (!isRadioFieldOptions(field)) {
38
+ logger.warn(`SelectMfaType component does not support non-radio fields; field with type "${field.type}" has been ignored.`);
39
+ return false;
40
+ }
41
+ if (!value) {
42
+ logger.warn('Each field must have a value; field has been ignored.');
43
+ return false;
44
+ }
45
+ if (values[value]) {
46
+ logger.warn(`Each field value must be unique; field with duplicate value of "${value}" has been ignored.`);
47
+ return false;
48
+ }
49
+ values[value] = true;
50
+ return true;
51
+ });
52
+ };
33
53
  export const getSanitizedTextFields = (fields, componentName) => {
34
54
  const names = {};
35
55
  return fields.filter((field) => {
@@ -95,8 +115,11 @@ export function getRouteTypedFields({ fields, route, }) {
95
115
  }
96
116
  // `VerifyUser` does not require additional updates to the shape of `fields`
97
117
  const isVerifyUserRoute = route === 'verifyUser';
118
+ const isSelectMfaTypeRoute = route === 'selectMfaType';
98
119
  const radioFields = fields;
99
- return isVerifyUserRoute ? radioFields : getTypedFields(fields);
120
+ return isVerifyUserRoute || isSelectMfaTypeRoute
121
+ ? radioFields
122
+ : getTypedFields(fields);
100
123
  }
101
124
  /**
102
125
  *
@@ -1,6 +1,6 @@
1
1
  export { default as Authenticator } from './Authenticator';
2
2
  export { ContainerProps } from './common';
3
- export { ConfirmResetPasswordProps, ConfirmSignInProps, ConfirmSignUpProps, ConfirmVerifyUserProps, ForceNewPasswordProps, ForgotPasswordProps, SetupTotpProps, SignInProps, SignUpProps, VerifyUserProps, } from './Defaults';
3
+ export { ConfirmResetPasswordProps, ConfirmSignInProps, ConfirmSignUpProps, ConfirmVerifyUserProps, ForceNewPasswordProps, ForgotPasswordProps, SelectMfaTypeProps, SetupEmailProps, SetupTotpProps, SignInProps, SignUpProps, VerifyUserProps, } from './Defaults';
4
4
  export { AuthenticatorProps, WithAuthenticatorOptions } from './types';
5
5
  export { useAuthenticator, UseAuthenticator } from './useAuthenticator';
6
6
  export { default as withAuthenticator } from './withAuthenticator';
package/dist/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
- export { Authenticator, AuthenticatorProps, useAuthenticator, UseAuthenticator, withAuthenticator, WithAuthenticatorOptions, ConfirmResetPasswordProps, ConfirmSignInProps, ConfirmSignUpProps, ConfirmVerifyUserProps, ForceNewPasswordProps, ForgotPasswordProps, SetupTotpProps, SignInProps, SignUpProps, VerifyUserProps, } from './Authenticator';
1
+ export { Authenticator, AuthenticatorProps, useAuthenticator, UseAuthenticator, withAuthenticator, WithAuthenticatorOptions, ConfirmResetPasswordProps, ConfirmSignInProps, ConfirmSignUpProps, ConfirmVerifyUserProps, ForceNewPasswordProps, ForgotPasswordProps, SelectMfaTypeProps, SetupEmailProps, SetupTotpProps, SignInProps, SignUpProps, VerifyUserProps, } from './Authenticator';
2
2
  export * from './InAppMessaging';
3
3
  export { Theme, ThemeProvider, defaultDarkModeOverride, defaultTheme, useTheme, } from './theme';
@@ -1,3 +1,4 @@
1
1
  import React from 'react';
2
2
  import { RadioGroupProps } from './types';
3
+ export declare const RADIO_GROUP_CONTAINER_TEST_ID = "amplify__radio-group__container";
3
4
  export default function RadioGroup<T>({ accessible, accessibilityRole, children, direction, disabled, initialValue, label, labelPosition, labelStyle, onChange, onValueChange, size, style, ...rest }: RadioGroupProps<T>): React.JSX.Element;
@@ -5,6 +5,7 @@ import { useTheme } from '../../theme';
5
5
  import { Label } from '../Label';
6
6
  import { getFlexDirectionFromLabelPosition } from '../Label/utils';
7
7
  import { getThemedStyles } from './styles';
8
+ export const RADIO_GROUP_CONTAINER_TEST_ID = 'amplify__radio-group__container';
8
9
  export default function RadioGroup({ accessible = true, accessibilityRole = 'radiogroup', children, direction = 'vertical', disabled, initialValue, label, labelPosition = 'top', labelStyle, onChange, onValueChange, size, style, ...rest }) {
9
10
  const theme = useTheme();
10
11
  const themedStyle = getThemedStyles(theme);
@@ -26,7 +27,7 @@ export default function RadioGroup({ accessible = true, accessibilityRole = 'rad
26
27
  setValue(nextValue);
27
28
  onChange?.(nextValue);
28
29
  }, [onChange]);
29
- return (<View {...rest} style={[themedStyle.container, containerStyle, style]}>
30
+ return (<View {...rest} style={[themedStyle.container, containerStyle, style]} testID={RADIO_GROUP_CONTAINER_TEST_ID}>
30
31
  <View accessible={accessible} accessibilityRole={accessibilityRole} style={childContainerStyle}>
31
32
  {Children.map(children, (child) => {
32
33
  if (isValidElement(child)) {
package/dist/version.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const VERSION = "2.4.5";
1
+ export declare const VERSION = "2.5.1";
package/dist/version.js CHANGED
@@ -1 +1 @@
1
- export const VERSION = '2.4.5';
1
+ export const VERSION = '2.5.1';
@@ -20,6 +20,8 @@ const DEFAULTS = {
20
20
  SignIn: Defaults_1.SignIn,
21
21
  SignUp: Defaults_1.SignUp,
22
22
  VerifyUser: Defaults_1.VerifyUser,
23
+ SetupEmail: Defaults_1.SetupEmail,
24
+ SelectMfaType: Defaults_1.SelectMfaType,
23
25
  };
24
26
  const routePropSelector = ({ route, }) => [
25
27
  route,
@@ -72,4 +74,6 @@ Authenticator.SetupTotp = Defaults_1.SetupTotp;
72
74
  Authenticator.SignIn = Defaults_1.SignIn;
73
75
  Authenticator.SignUp = Defaults_1.SignUp;
74
76
  Authenticator.VerifyUser = Defaults_1.VerifyUser;
77
+ Authenticator.SetupEmail = Defaults_1.SetupEmail;
78
+ Authenticator.SelectMfaType = Defaults_1.SelectMfaType;
75
79
  exports.default = Authenticator;
@@ -0,0 +1,42 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ const tslib_1 = require("tslib");
4
+ const react_1 = tslib_1.__importStar(require("react"));
5
+ const ui_1 = require("@aws-amplify/ui");
6
+ const common_1 = require("../../common");
7
+ const hooks_1 = require("../../hooks");
8
+ const COMPONENT_NAME = 'SelectMfaType';
9
+ const { getSelectMfaTypeByChallengeName, getBackToSignInText, getConfirmText, getConfirmingText, } = ui_1.authenticatorTextUtil;
10
+ const SelectMfaType = ({ challengeName, fields, handleBlur, handleChange, handleSubmit, isPending, toSignIn, validationErrors, ...rest }) => {
11
+ const { disableFormSubmit: disabled, fields: fieldsWithHandlers, fieldValidationErrors, handleFormSubmit, } = (0, hooks_1.useFieldValues)({
12
+ componentName: COMPONENT_NAME,
13
+ fields,
14
+ handleBlur,
15
+ handleChange,
16
+ handleSubmit,
17
+ validationErrors,
18
+ });
19
+ const headerText = getSelectMfaTypeByChallengeName(challengeName);
20
+ const primaryButtonText = isPending ? getConfirmingText() : getConfirmText();
21
+ const secondaryButtonText = getBackToSignInText();
22
+ const buttons = (0, react_1.useMemo)(() => ({
23
+ primary: {
24
+ children: primaryButtonText,
25
+ disabled,
26
+ onPress: handleFormSubmit,
27
+ },
28
+ links: [{ children: secondaryButtonText, onPress: toSignIn }],
29
+ }), [
30
+ disabled,
31
+ handleFormSubmit,
32
+ primaryButtonText,
33
+ secondaryButtonText,
34
+ toSignIn,
35
+ ]);
36
+ return (<common_1.DefaultContent {...rest} buttons={buttons} headerText={headerText} fields={fieldsWithHandlers} isPending={isPending} validationErrors={fieldValidationErrors}/>);
37
+ };
38
+ SelectMfaType.Footer = common_1.DefaultFooter;
39
+ SelectMfaType.FormFields = common_1.DefaultSelectMfaTypeFormFields;
40
+ SelectMfaType.Header = common_1.DefaultHeader;
41
+ SelectMfaType.displayName = COMPONENT_NAME;
42
+ exports.default = SelectMfaType;
@@ -0,0 +1,8 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.SelectMfaType = void 0;
7
+ var SelectMfaType_1 = require("./SelectMfaType");
8
+ Object.defineProperty(exports, "SelectMfaType", { enumerable: true, get: function () { return __importDefault(SelectMfaType_1).default; } });