@aws-amplify/ui-react-native 1.0.0 → 1.1.0

package/src/Authenticator/Defaults/ConfirmVerifyUser/ConfirmVerifyUser.tsx

@@ -0,0 +1,68 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import {
+  DefaultContent,
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultConfirmVerifyUserComponent } from '../types';
+
+const COMPONENT_NAME = 'ConfirmVerifyUser';
+
+const {
+  getAccountRecoveryInfoText,
+  getSkipText,
+  getSubmitText,
+  getSubmittingText,
+} = authenticatorTextUtil;
+
+const ConfirmVerifyUser: DefaultConfirmVerifyUserComponent = ({
+  fields,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  isPending,
+  skipVerification,
+  ...rest
+}) => {
+  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+  });
+
+  const headerText = getAccountRecoveryInfoText();
+  const primaryButtonText = isPending ? getSubmittingText() : getSubmitText();
+  const secondaryButtonText = getSkipText();
+
+  const buttons = useMemo(
+    () => ({
+      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      links: [{ children: secondaryButtonText, onPress: skipVerification }],
+    }),
+    [handleFormSubmit, primaryButtonText, skipVerification, secondaryButtonText]
+  );
+
+  return (
+    <DefaultContent
+      {...rest}
+      buttons={buttons}
+      headerText={headerText}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+    />
+  );
+};
+
+ConfirmVerifyUser.Footer = DefaultFooter;
+ConfirmVerifyUser.FormFields = DefaultTextFormFields;
+ConfirmVerifyUser.Header = DefaultHeader;
+
+ConfirmVerifyUser.displayName = COMPONENT_NAME;
+export default ConfirmVerifyUser;

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

@@ -0,0 +1,70 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import { ConfirmVerifyUser } from '..';
+
+const {
+  getAccountRecoveryInfoText,
+  getSkipText,
+  getSubmitText,
+  getSubmittingText,
+} = authenticatorTextUtil;
+
+const props = {
+  fields: [],
+  FormFields: ConfirmVerifyUser.FormFields,
+  Footer: ConfirmVerifyUser.Footer,
+  handleBlur: jest.fn(),
+  handleChange: jest.fn(),
+  handleSubmit: jest.fn(),
+  Header: ConfirmVerifyUser.Header,
+  isPending: false,
+  skipVerification: jest.fn(),
+};
+
+describe('ConfirmVerifyUser', () => {
+  it('renders as expected', () => {
+    const { toJSON, getByRole, getByText } = render(
+      <ConfirmVerifyUser {...props} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByRole('header')).toBeDefined();
+    expect(getByText(getAccountRecoveryInfoText())).toBeDefined();
+    expect(getByText(getSubmitText())).toBeDefined();
+    expect(getByText(getSkipText())).toBeDefined();
+  });
+
+  it('renders as expected with errors', () => {
+    const error = 'Something went wrong';
+    const { toJSON, getByRole, getByText } = render(
+      <ConfirmVerifyUser {...props} error={error} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByRole('alert')).toBeDefined();
+    expect(getByText(error)).toBeDefined();
+  });
+
+  it('handles skip verification button', () => {
+    const skipVerificationMock = jest.fn();
+
+    const { getByText } = render(
+      <ConfirmVerifyUser {...props} skipVerification={skipVerificationMock} />
+    );
+
+    const button = getByText(getSkipText());
+    fireEvent.press(button);
+    expect(skipVerificationMock).toBeCalledTimes(1);
+  });
+
+  it('renders as expected when isPending is true', () => {
+    const { toJSON, getByText } = render(
+      <ConfirmVerifyUser {...props} isPending />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getByText(getSubmittingText())).toBeDefined();
+  });
+});

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

@@ -0,0 +1,489 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ConfirmVerifyUser renders as expected 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Account recovery requires verified contact information
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  />,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Submit
+    </Text>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Skip
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`ConfirmVerifyUser renders as expected when isPending is true 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Account recovery requires verified contact information
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  />,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Submitting
+    </Text>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Skip
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`ConfirmVerifyUser renders as expected with errors 1`] = `
+Array [
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "hsl(210, 50%, 10%)",
+        },
+        Object {
+          "fontSize": 24,
+          "fontWeight": "300",
+          "lineHeight": 36,
+        },
+        Object {
+          "marginVertical": 12,
+          "paddingHorizontal": 12,
+        },
+      ]
+    }
+  >
+    Account recovery requires verified contact information
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  />,
+  <View
+    accessibilityRole="alert"
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "hsl(0, 75%, 85%)",
+          "flexDirection": "row",
+          "paddingHorizontal": 8,
+          "paddingVertical": 32,
+        },
+        Object {
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Image
+      accessibilityRole="image"
+      source={
+        Object {
+          "testUri": "../../../src/assets/icons/error.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 20,
+            "resizeMode": "contain",
+            "tintColor": undefined,
+            "width": 20,
+          },
+          Object {
+            "margin": 8,
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 100%, 20%)",
+            "flex": 1,
+            "paddingHorizontal": 8,
+          },
+          Object {},
+        ]
+      }
+    >
+      Something went wrong
+    </Text>
+  </View>,
+  <View
+    accessibilityRole="button"
+    accessible={true}
+    collapsable={false}
+    focusable={true}
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onResponderGrant={[Function]}
+    onResponderMove={[Function]}
+    onResponderRelease={[Function]}
+    onResponderTerminate={[Function]}
+    onResponderTerminationRequest={[Function]}
+    onStartShouldSetResponder={[Function]}
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "transparent",
+          "borderRadius": 4,
+          "justifyContent": "center",
+          "paddingHorizontal": 16,
+          "paddingVertical": 12,
+        },
+        Object {
+          "backgroundColor": "hsl(190, 95%, 30%)",
+        },
+        null,
+        null,
+        Object {
+          "marginHorizontal": 16,
+          "marginVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "color": "hsl(0, 0%, 100%)",
+            "fontSize": 16,
+            "fontWeight": "700",
+            "textAlign": "center",
+          },
+          Object {},
+        ]
+      }
+    >
+      Submit
+    </Text>
+  </View>,
+  <View
+    style={
+      Object {
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "justifyContent": "center",
+      }
+    }
+  >
+    <View
+      accessibilityRole="button"
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "backgroundColor": "transparent",
+            "borderRadius": 4,
+            "justifyContent": "center",
+            "paddingHorizontal": 16,
+            "paddingVertical": 12,
+          },
+          Object {},
+          null,
+          null,
+          Object {
+            "marginVertical": 8,
+            "minWidth": "50%",
+          },
+        ]
+      }
+    >
+      <Text
+        style={
+          Array [
+            Object {
+              "color": "hsl(190, 95%, 30%)",
+              "fontSize": 16,
+              "fontWeight": "700",
+              "textAlign": "center",
+            },
+            undefined,
+          ]
+        }
+      >
+        Skip
+      </Text>
+    </View>
+  </View>,
+]
+`;

package/src/Authenticator/Defaults/ConfirmVerifyUser/index.ts

@@ -0,0 +1 @@
+export { default as ConfirmVerifyUser } from './ConfirmVerifyUser';

package/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx

@@ -0,0 +1,66 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import {
+  DefaultContent,
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultForceNewPasswordComponent } from '../types';
+
+const COMPONENT_NAME = 'ForceNewPassword';
+
+const { getChangePasswordText, getChangingText, getBackToSignInText } =
+  authenticatorTextUtil;
+
+const ForceNewPassword: DefaultForceNewPasswordComponent = ({
+  fields,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  isPending,
+  toSignIn,
+  ...rest
+}) => {
+  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+  });
+
+  const headerText = getChangePasswordText();
+  const primaryButtonText = isPending
+    ? getChangingText()
+    : getChangePasswordText();
+  const secondaryButtonText = getBackToSignInText();
+
+  const buttons = useMemo(
+    () => ({
+      primary: { children: primaryButtonText, onPress: handleFormSubmit },
+      links: [{ children: secondaryButtonText, onPress: toSignIn }],
+    }),
+    [handleFormSubmit, primaryButtonText, secondaryButtonText, toSignIn]
+  );
+
+  return (
+    <DefaultContent
+      {...rest}
+      buttons={buttons}
+      headerText={headerText}
+      fields={fieldsWithHandlers}
+      isPending={isPending}
+    />
+  );
+};
+
+ForceNewPassword.Footer = DefaultFooter;
+ForceNewPassword.FormFields = DefaultTextFormFields;
+ForceNewPassword.Header = DefaultHeader;
+
+ForceNewPassword.displayName = COMPONENT_NAME;
+export default ForceNewPassword;