From 646e894c3614ca4bea2410b49cceb071c5098647 Mon Sep 17 00:00:00 2001
From: Joe Buono <joebuono724@gmail.com>
Date: Wed, 26 Oct 2022 16:32:43 -0500
Subject: [PATCH] feat(rna): ForceNewPassword subcomponent (#2823)

* basic template and stories

* write tests

* align styles with SignIn component

* replace container with fragment

* destructure translations outside component

Co-authored-by: Joe Buono <joebuono@amazon.com>
---
 .../stories/ForceNewPassword.stories.tsx      |  31 ++-
 .../ForceNewPassword/ForceNewPassword.tsx     |  44 +++-
 .../__tests__/ForceNewPassword.spec.tsx       |  60 ++++-
 .../ForceNewPassword.spec.tsx.snap            | 239 +++++++++++++++++-
 .../Defaults/ForceNewPassword/styles.ts       |  22 ++
 5 files changed, 369 insertions(+), 27 deletions(-)
 create mode 100644 packages/react-native/src/Authenticator/Defaults/ForceNewPassword/styles.ts

diff --git a/examples/react-native/storybook/stories/ForceNewPassword.stories.tsx b/examples/react-native/storybook/stories/ForceNewPassword.stories.tsx
index 8c8b76e13d5..69938551d75 100644
--- a/examples/react-native/storybook/stories/ForceNewPassword.stories.tsx
+++ b/examples/react-native/storybook/stories/ForceNewPassword.stories.tsx
@@ -1,11 +1,28 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react-native';
-import { ForceNewPassword } from '@aws-amplify/ui-react-native/dist/Authenticator/Defaults';
+import { Authenticator } from '@aws-amplify/ui-react-native';
+import noop from 'lodash/noop';
 
-const props = {} as any;
+const baseProps = {
+  error: null as unknown as string,
+  fields: [],
+  Footer: Authenticator.ForceNewPassword.Footer,
+  FormFields: Authenticator.ForceNewPassword.FormFields,
+  Header: Authenticator.ForceNewPassword.Header,
+  handleBlur: noop,
+  handleSubmit: (values: any) => {
+    console.log('Values', values);
+  },
+  handleChange: noop,
+  isPending: false,
+  toSignIn: noop,
+};
 
-storiesOf('ForceNewPassword', module)
-  .add('default', () => <ForceNewPassword {...props} />)
-  .add('header', () => <ForceNewPassword.Header />)
-  .add('footer', () => <ForceNewPassword.Footer />)
-  .add('formFields', () => <ForceNewPassword.FormFields {...props} />);
+storiesOf('Authenticator.ForceNewPassword', module)
+  .add('default', () => <Authenticator.ForceNewPassword {...baseProps} />)
+  .add('with error', () => (
+    <Authenticator.ForceNewPassword {...baseProps} error="Error!" />
+  ))
+  .add('isPending', () => (
+    <Authenticator.ForceNewPassword {...baseProps} isPending />
+  ));
diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
index 783482c091c..33b6d3a46bc 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/ForceNewPassword.tsx
@@ -1,13 +1,45 @@
 import React from 'react';
-import { Text } from 'react-native';
 
-import { DefaultFooter } from '../../common/DefaultFooter';
-import { DefaultHeader } from '../../common/DefaultHeader';
-import { DefaultFormFields } from '../../common/DefaultFormFields';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import { Button, ErrorMessage } from '../../../primitives';
+import { DefaultFooter, DefaultFormFields, DefaultHeader } from '../../common';
 import { DefaultForceNewPasswordComponent } from '../types';
+import { styles } from './styles';
+
+const { getChangePasswordText, getChangingText, getBackToSignInText } =
+  authenticatorTextUtil;
 
-const ForceNewPassword: DefaultForceNewPasswordComponent = () => {
-  return <Text>ForceNewPassword</Text>;
+const ForceNewPassword: DefaultForceNewPasswordComponent = ({
+  error,
+  fields,
+  Footer,
+  FormFields,
+  Header,
+  isPending,
+  toSignIn,
+}) => {
+  return (
+    <>
+      <Header>{getChangePasswordText()}</Header>
+      <FormFields fields={fields} isPending={isPending} />
+      {error ? <ErrorMessage>{error}</ErrorMessage> : null}
+      <Button
+        style={styles.buttonPrimary}
+        textStyle={styles.buttonPrimaryLabel}
+      >
+        {isPending ? getChangingText() : getChangePasswordText()}
+      </Button>
+      <Button
+        onPress={toSignIn}
+        style={styles.buttonSecondary}
+        textStyle={styles.buttonSecondaryLabel}
+      >
+        {getBackToSignInText()}
+      </Button>
+      <Footer />
+    </>
+  );
 };
 
 ForceNewPassword.Footer = DefaultFooter;
diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/ForceNewPassword.spec.tsx b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/ForceNewPassword.spec.tsx
index 0d48876a71b..6fa10e1b68f 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/ForceNewPassword.spec.tsx
+++ b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/ForceNewPassword.spec.tsx
@@ -1,22 +1,62 @@
 import React from 'react';
-import { render } from '@testing-library/react-native';
+import { fireEvent, render } from '@testing-library/react-native';
+
+import { authenticatorTextUtil } from '@aws-amplify/ui';
 
 import { ForceNewPassword } from '..';
 
-const props = {} as any;
+const props = {
+  fields: [],
+  Footer: ForceNewPassword.Footer,
+  FormFields: ForceNewPassword.FormFields,
+  handleBlur: jest.fn(),
+  handleChange: jest.fn(),
+  handleSubmit: jest.fn(),
+  Header: ForceNewPassword.Header,
+  isPending: false,
+  toSignIn: jest.fn(),
+};
+
+const { getChangePasswordText, getChangingText, getBackToSignInText } =
+  authenticatorTextUtil;
 
 describe('ForceNewPassword', () => {
   it('renders as expected', () => {
-    const { toJSON, getByRole } = render(
-      <>
-        <ForceNewPassword {...props} />
-        <ForceNewPassword.Header />
-        <ForceNewPassword.Footer />
-        <ForceNewPassword.FormFields {...props} />
-      </>
+    const { toJSON, getAllByRole, getAllByText } = render(
+      <ForceNewPassword {...props} />
+    );
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getAllByRole('header')).toBeDefined();
+    expect(getAllByText(getChangePasswordText())).toBeTruthy();
+    expect(getAllByText(getBackToSignInText())).toBeTruthy();
+  });
+
+  it('renders an error message', () => {
+    const errorMessage = 'Test error message';
+    const { toJSON, getByText } = render(
+      <ForceNewPassword {...props} error={errorMessage} />
     );
+
     expect(toJSON()).toMatchSnapshot();
+    expect(getByText(errorMessage)).toBeTruthy();
+  });
+
+  it('handles Back to Sign In button', () => {
+    const toSignInMock = jest.fn();
+
+    const { getByText } = render(
+      <ForceNewPassword {...props} toSignIn={toSignInMock} />
+    );
+
+    const button = getByText(getBackToSignInText());
+    fireEvent.press(button);
+    expect(toSignInMock).toBeCalledTimes(1);
+  });
+
+  it('renders correct text based on isPending', () => {
+    const { queryByText } = render(<ForceNewPassword {...props} isPending />);
 
-    expect(getByRole('header')).toBeDefined();
+    expect(queryByText(getChangingText())).toBeTruthy();
   });
 });
diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/__snapshots__/ForceNewPassword.spec.tsx.snap b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/__snapshots__/ForceNewPassword.spec.tsx.snap
index cfaddde0c68..b30486c9c59 100644
--- a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/__snapshots__/ForceNewPassword.spec.tsx.snap
+++ b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/__tests__/__snapshots__/ForceNewPassword.spec.tsx.snap
@@ -1,10 +1,160 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ForceNewPassword renders as expected 1`] = `
+exports[`ForceNewPassword renders an error message 1`] = `
 Array [
-  <Text>
-    ForceNewPassword
+  <Text
+    accessibilityRole="header"
+    style={
+      Array [
+        Object {
+          "color": "black",
+        },
+        Object {
+          "fontSize": 34,
+          "fontWeight": "300",
+          "lineHeight": 51,
+        },
+        undefined,
+      ]
+    }
+  >
+    Change Password
   </Text>,
+  <View
+    accessibilityRole="alert"
+    style={
+      Array [
+        Object {
+          "alignItems": "center",
+          "backgroundColor": "#f5bcbc",
+          "flexDirection": "row",
+          "paddingHorizontal": 4,
+          "paddingVertical": 16,
+          "width": "100%",
+        },
+        undefined,
+      ]
+    }
+  >
+    <Image
+      accessibilityRole="image"
+      source={
+        Object {
+          "testUri": "../../../src/assets/icons/error.png",
+        }
+      }
+      style={
+        Array [
+          Object {
+            "height": 20,
+            "resizeMode": "contain",
+            "tintColor": undefined,
+            "width": 20,
+          },
+          Object {
+            "margin": 4,
+          },
+        ]
+      }
+    />
+    <Text
+      style={
+        Array [
+          Object {
+            "flex": 1,
+            "paddingHorizontal": 4,
+          },
+          undefined,
+        ]
+      }
+    >
+      Test error message
+    </Text>
+  </View>,
+  <View
+    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 [
+        null,
+        Object {
+          "backgroundColor": "teal",
+          "marginVertical": 8,
+          "paddingVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+          },
+          Object {
+            "color": "white",
+            "fontSize": 16,
+            "fontWeight": "bold",
+          },
+        ]
+      }
+    >
+      Change Password
+    </Text>
+  </View>,
+  <View
+    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 [
+        null,
+        Object {
+          "marginVertical": 8,
+          "paddingVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+          },
+          Object {
+            "color": "teal",
+          },
+        ]
+      }
+    >
+      Back to Sign In
+    </Text>
+  </View>,
+]
+`;
+
+exports[`ForceNewPassword renders as expected 1`] = `
+Array [
   <Text
     accessibilityRole="header"
     style={
@@ -20,6 +170,87 @@ Array [
         undefined,
       ]
     }
-  />,
+  >
+    Change Password
+  </Text>,
+  <View
+    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 [
+        null,
+        Object {
+          "backgroundColor": "teal",
+          "marginVertical": 8,
+          "paddingVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+          },
+          Object {
+            "color": "white",
+            "fontSize": 16,
+            "fontWeight": "bold",
+          },
+        ]
+      }
+    >
+      Change Password
+    </Text>
+  </View>,
+  <View
+    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 [
+        null,
+        Object {
+          "marginVertical": 8,
+          "paddingVertical": 12,
+        },
+      ]
+    }
+  >
+    <Text
+      style={
+        Array [
+          Object {
+            "alignSelf": "center",
+          },
+          Object {
+            "color": "teal",
+          },
+        ]
+      }
+    >
+      Back to Sign In
+    </Text>
+  </View>,
 ]
 `;
diff --git a/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/styles.ts b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/styles.ts
new file mode 100644
index 00000000000..7a61ce25603
--- /dev/null
+++ b/packages/react-native/src/Authenticator/Defaults/ForceNewPassword/styles.ts
@@ -0,0 +1,22 @@
+import { StyleSheet, TextStyle, ViewStyle } from 'react-native';
+
+export interface ResetPasswordStyle {
+  buttonPrimary: ViewStyle;
+  buttonPrimaryLabel: TextStyle;
+  buttonSecondary: ViewStyle;
+  buttonSecondaryLabel: TextStyle;
+}
+
+export const styles: ResetPasswordStyle = StyleSheet.create({
+  buttonPrimary: {
+    backgroundColor: 'teal',
+    marginVertical: 8,
+    paddingVertical: 12,
+  },
+  buttonPrimaryLabel: { color: 'white', fontSize: 16, fontWeight: 'bold' },
+  buttonSecondary: {
+    marginVertical: 8,
+    paddingVertical: 12,
+  },
+  buttonSecondaryLabel: { color: 'teal' },
+});