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

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

@@ -0,0 +1,508 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SetupTOTP renders an error message 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,
+        },
+      ]
+    }
+  >
+    Setup TOTP
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Object {
+            "paddingHorizontal": 12,
+          },
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Code"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Code
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Code"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+  </View>,
+  <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 {},
+        ]
+      }
+    >
+      Test error message
+    </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 {},
+        ]
+      }
+    >
+      Confirm
+    </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,
+          ]
+        }
+      >
+        Back to Sign In
+      </Text>
+    </View>
+  </View>,
+]
+`;
+
+exports[`SetupTOTP 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,
+        },
+      ]
+    }
+  >
+    Setup TOTP
+  </Text>,
+  <View
+    style={
+      Object {
+        "paddingBottom": 8,
+      }
+    }
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "flex-start",
+          },
+          Object {
+            "paddingHorizontal": 12,
+          },
+        ]
+      }
+      testID="amplify__text-field-container"
+    >
+      <Text
+        accessibilityLabel="Code"
+        accessibilityRole="text"
+        style={
+          Array [
+            Object {
+              "fontSize": 14,
+              "fontWeight": "400",
+              "lineHeight": 21,
+            },
+            Object {
+              "color": "hsl(210, 50%, 10%)",
+            },
+            Array [
+              Object {
+                "color": "hsl(210, 25%, 25%)",
+                "lineHeight": 21,
+                "padding": 4,
+              },
+              undefined,
+            ],
+          ]
+        }
+      >
+        Code
+      </Text>
+      <View
+        accessible={true}
+        style={
+          Object {
+            "alignItems": "center",
+            "borderColor": "hsl(210, 8%, 55%)",
+            "borderRadius": 4,
+            "borderWidth": 1,
+            "flexDirection": "row",
+            "paddingHorizontal": 8,
+          }
+        }
+        testID="amplify__text-field__input-container"
+      >
+        <TextInput
+          accessibilityState={
+            Object {
+              "disabled": false,
+            }
+          }
+          accessible={true}
+          autoCapitalize="none"
+          editable={true}
+          onBlur={[Function]}
+          onChangeText={[Function]}
+          placeholder="Code"
+          placeholderTextColor="hsl(210, 10%, 40%)"
+          selectionColor="hsl(210, 50%, 10%)"
+          style={
+            Array [
+              Object {
+                "color": "hsl(210, 50%, 10%)",
+                "flexGrow": 1,
+                "fontSize": 16,
+                "paddingVertical": 12,
+              },
+              Object {},
+            ]
+          }
+        />
+      </View>
+    </View>
+  </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 {},
+        ]
+      }
+    >
+      Confirm
+    </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,
+          ]
+        }
+      >
+        Back to Sign In
+      </Text>
+    </View>
+  </View>,
+]
+`;

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

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

package/src/Authenticator/Defaults/SetupTOTP/styles.ts

@@ -0,0 +1,10 @@
+import { StyleSheet, TextStyle } from 'react-native';
+
+export interface SetupTOTPStyle {
+  secretKeyText: TextStyle;
+}
+
+export const styles: SetupTOTPStyle = StyleSheet.create({
+  // TODO: replace with tokens
+  secretKeyText: { flexWrap: 'wrap', paddingVertical: 4, marginHorizontal: 8 },
+});

package/src/Authenticator/Defaults/SignIn/SignIn.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+
+import {
+  DefaultFooter,
+  DefaultTextFormFields,
+  DefaultHeader,
+  DefaultContent,
+} from '../../common';
+import { useFieldValues } from '../../hooks';
+
+import { DefaultSignInComponent } from '../types';
+
+const COMPONENT_NAME = 'SignIn';
+
+const SignIn: DefaultSignInComponent = ({
+  fields,
+  handleBlur,
+  handleChange,
+  handleSubmit,
+  hideSignUp,
+  toResetPassword,
+  toSignUp,
+  ...rest
+}) => {
+  const {
+    getSignInTabText,
+    getSignInText,
+    getSignUpTabText,
+    getForgotPasswordText,
+  } = authenticatorTextUtil;
+
+  const { fields: fieldsWithHandlers, handleFormSubmit } = useFieldValues({
+    componentName: COMPONENT_NAME,
+    fields,
+    handleBlur,
+    handleChange,
+    handleSubmit,
+  });
+
+  const headerText = getSignInTabText();
+  const forgotPasswordText = getForgotPasswordText(true);
+  const signInText = getSignInText();
+  const signUpText = getSignUpTabText();
+
+  const buttons = useMemo(() => {
+    const forgotPassword = {
+      children: forgotPasswordText,
+      onPress: toResetPassword,
+    };
+    return {
+      primary: { children: signInText, onPress: handleFormSubmit },
+      links: hideSignUp
+        ? [forgotPassword]
+        : [forgotPassword, { children: signUpText, onPress: toSignUp }],
+    };
+  }, [
+    forgotPasswordText,
+    handleFormSubmit,
+    hideSignUp,
+    signInText,
+    signUpText,
+    toResetPassword,
+    toSignUp,
+  ]);
+
+  return (
+    <DefaultContent
+      {...rest}
+      buttons={buttons}
+      fields={fieldsWithHandlers}
+      headerText={headerText}
+    />
+  );
+};
+
+SignIn.Footer = DefaultFooter;
+SignIn.FormFields = DefaultTextFormFields;
+SignIn.Header = DefaultHeader;
+
+SignIn.displayName = COMPONENT_NAME;
+export default SignIn;

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

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+import { authenticatorTextUtil } from '@aws-amplify/ui';
+import SignIn from '../SignIn';
+
+const { getSignInText, getForgotPasswordText } = authenticatorTextUtil;
+
+const username = {
+  name: 'username',
+  label: 'Username',
+  placeholder: 'Username',
+  type: 'default' as const,
+};
+
+const password = {
+  name: 'password',
+  label: 'Password',
+  placeholder: 'Password',
+  type: 'password' as const,
+};
+
+const fields = [username, password];
+
+const props = {
+  fields,
+  Footer: SignIn.Footer,
+  FormFields: SignIn.FormFields,
+  handleBlur: jest.fn(),
+  handleChange: jest.fn(),
+  handleSubmit: jest.fn(),
+  Header: SignIn.Header,
+  isPending: false,
+  socialProviders: undefined,
+  toResetPassword: jest.fn(),
+  toFederatedSignIn: jest.fn(),
+  toSignUp: jest.fn(),
+};
+
+describe('SignIn', () => {
+  it('renders as expected', () => {
+    const { toJSON, getAllByRole, getByText } = render(<SignIn {...props} />);
+    expect(toJSON()).toMatchSnapshot();
+
+    expect(getAllByRole('text')).toHaveLength(fields.length);
+    expect(getByText(getSignInText())).toBeDefined();
+    expect(getByText(getForgotPasswordText(true))).toBeDefined();
+  });
+
+  it('renders as expected with an error', () => {
+    const error = 'An error!';
+    const { getByRole, getByText, toJSON } = render(
+      <SignIn {...props} error={error} />
+    );
+
+    expect(getByRole('alert')).toBeDefined();
+    expect(getByText(error)).toBeDefined();
+
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it('renders as expected when hideSignUp is true', () => {
+    const { toJSON } = render(<SignIn {...props} hideSignUp />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});