fix: change AWS_REGION secret name, fix ResendConfirmationCodeButton …

…styles, fix typos
dotintent · Nov 12, 2020 · de2426c · de2426c
1 parent 00240f3
commit de2426c
Show file tree

Hide file tree

Showing 12 changed files with 29 additions and 31 deletions.
diff --git a/.env.example b/.env.example
@@ -2,6 +2,6 @@
 NODE_ENV=development
 
 # AWS Amplify
-AWS_DEFAULT_REGION=
+COGNITO_AWS_REGION=
 COGNITO_USER_POOL_ID=
 COGNITO_USER_POOL_CLIENT_ID=
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -17,7 +17,7 @@ module.exports = {
     'no-alert': 0,
     'no-console': 0,
     'no-unused-vars': [
-      2,
+      1,
       {
         vars: 'all',
         args: 'after-used',

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -4,7 +4,7 @@ import { IntentbaseProvider } from '../src/providers/IntentbaseProvider';
 export const decorators = [
   (Story) => (
     <IntentbaseProvider
-      region={process.env.AWS_DEFAULT_REGION}
+      region={process.env.COGNITO_AWS_REGION}
       userPoolId={process.env.COGNITO_USER_POOL_ID}
       userPoolWebClientId={process.env.COGNITO_USER_POOL_CLIENT_ID}
     >

diff --git a/src/common/interfaces/MaterialUI.ts b/src/common/interfaces/MaterialUI.ts
@@ -0,0 +1,8 @@
+export type TypographyColor =
+  | 'initial'
+  | 'inherit'
+  | 'primary'
+  | 'secondary'
+  | 'textPrimary'
+  | 'textSecondary'
+  | 'error';
diff --git a/src/components/FormInput/MuiFormTextField.tsx b/src/components/FormInput/MuiFormTextField.tsx
@@ -32,7 +32,7 @@ export const MuiFormTextField: FC<MuiFormTextFieldProps> = ({
   if (inputProps.type === 'password' && passwordPreview) {
     return (
       <StyledTextField
-        error={!!(touched && error)}
+        error={Boolean(touched && error)}
         helperText={touched && error}
         {...inputProps}
         {...rest}

diff --git a/src/containers/ConfirmSignUp/ResendConfirmationCodeButton.styled.ts b/src/containers/ConfirmSignUp/ResendConfirmationCodeButton.styled.ts
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import { FormActionsContainer } from '../../components/Form/Form.styled';
 
-export const FormActionsContainer = styled.div`
+export const StyledFormActionsContainer = styled(FormActionsContainer)`
   margin-bottom: 20px;
   width: 100%;
 `;
diff --git a/src/containers/ConfirmSignUp/ResendConfirmationCodeButton.tsx b/src/containers/ConfirmSignUp/ResendConfirmationCodeButton.tsx
@@ -5,12 +5,13 @@ import { FormActionsProps } from '../../components/Form/Form';
 import { useSnackbar } from '../../hooks/useSnackbar';
 import { CognitoError } from '../../common/interfaces/CognitoError';
 import { FormButton } from '../../components/FormButton';
-import { FormActionsContainer } from '../../components/Form/Form.styled';
+import { StyledFormActionsContainer } from './ResendConfirmationCodeButton.styled';
 
 export interface ResendConfirmationCodeBaseProps {
   resendCodeLabel?: string;
   onSuccessResendMsg?: string;
   resendButtonColor?: PropTypes.Color;
+  fullWidth?: boolean;
 }
 
 type ResendConfirmationCodeProps = ResendConfirmationCodeBaseProps & FormActionsProps;
@@ -19,6 +20,7 @@ export const ResendConfirmationCodeButton: FC<ResendConfirmationCodeProps> = ({
   resendCodeLabel = 'Resend confirmation code',
   onSuccessResendMsg = 'Confirmation code resend successfully.',
   resendButtonColor = 'default',
+  fullWidth = true,
   values,
   loading,
 }) => {
@@ -40,15 +42,15 @@ export const ResendConfirmationCodeButton: FC<ResendConfirmationCodeProps> = ({
   }, [values.email]);
 
   return (
-    <FormActionsContainer>
+    <StyledFormActionsContainer>
       <FormButton
         color={resendButtonColor}
         disabled={loading || internalLoading}
-        fullWidth
+        fullWidth={fullWidth}
         onClick={resendCode}
       >
         {resendCodeLabel}
       </FormButton>
-    </FormActionsContainer>
+    </StyledFormActionsContainer>
   );
 };
diff --git a/src/containers/ResetPassword/ResetPassword.tsx b/src/containers/ResetPassword/ResetPassword.tsx
@@ -6,7 +6,7 @@ import { Form, FormWithDefaultsProps } from '../../components/Form/Form';
 export const ResetPassword: FC<FormWithDefaultsProps> = ({
   onSubmitResult,
   title = 'Reset your password',
-  subheaderTitle = 'Please check your email for the ont-time code to rest your password.',
+  subheaderTitle = 'Please check your email for the one-time code to reset your password.',
   subheaderTitleVariant = 'body1',
   confirmButtonLabel = 'Reset password',
   codeLabel = 'Code',

diff --git a/src/containers/SignIn/SignIn.tsx b/src/containers/SignIn/SignIn.tsx
@@ -30,17 +30,10 @@ export const SignIn: FC<SignInProps> = ({
   const [cognitoUserSession, setCognitoUserSession] = useState<CognitoUser>();
   const [loggedIn, setLoggedIn] = useState(false);
 
-  console.log(
-    'L:71 | cognitoUser, cognitoUserSession, loggedIn: ',
-    cognitoUser,
-    cognitoUserSession,
-    loggedIn,
-  );
-
   const signIn = useCallback(
     async (values): Promise<string> =>
       Auth.signIn({
-        username: values.email,
+        username: values.email.trim().toLowerCase(),
         password: values.password,
       }).then(async (user) => {
         setCognitoUser(user);

diff --git a/src/containers/SignUp/SignUp.tsx b/src/containers/SignUp/SignUp.tsx
@@ -5,11 +5,13 @@ import { Typography } from '@material-ui/core';
 import { Form, FormWithDefaultsProps } from '../../components/Form/Form';
 import { FormInput } from '../../components/FormInput/FormInput';
 import { FormLink } from '../../components/Form/Form.styled';
+import { TypographyColor } from '../../common/interfaces/MaterialUI';
 
 export interface SignUpProps extends FormWithDefaultsProps {
   onClickSignIn?: () => void;
   subheaderHaveAnAccount?: string;
   subheaderSignIn?: string;
+  subheaderSignInBtnColor?: TypographyColor;
 }
 
 export const SignUp: FC<SignUpProps> = ({
@@ -27,19 +29,13 @@ export const SignUp: FC<SignUpProps> = ({
   passwordPreview = true,
   children,
   className,
+  subheaderSignInBtnColor = 'primary',
   ...rest
 }) => {
   const [cognitoUser, setCognitoUser] = useState<any>();
   const [cognitoUserSession, setCognitoUserSession] = useState<any>();
   const [loggedIn, setLoggedIn] = useState(false);
 
-  console.log(
-    'L:71 | cognitoUser, cognitoUserSession, loggedIn: ',
-    cognitoUser,
-    cognitoUserSession,
-    loggedIn,
-  );
-
   const signUp = useCallback(
     async (values: any): Promise<string> =>
       Auth.signUp({
@@ -68,7 +64,7 @@ export const SignUp: FC<SignUpProps> = ({
       &nbsp;
       {onClickSignIn && subheaderSignIn && (
         <FormLink
-          color="primary"
+          color={subheaderSignInBtnColor}
           className="signUp__subheader__section--link"
           onClick={onClickSignIn}
         >

diff --git a/src/providers/IntentbaseProvider.tsx b/src/providers/IntentbaseProvider.tsx
@@ -18,7 +18,7 @@ interface IntentbaseProps {
 
 export const IntentbaseProvider: FC<IntentbaseProps> = ({
   children,
-  region = 'eu-central-1',
+  region = 'us-east-1',
   userPoolId,
   userPoolWebClientId,
   theme = defaultTheme,

diff --git a/src/utils/validations.ts b/src/utils/validations.ts
@@ -76,10 +76,8 @@ export const defaultAuthValidation = (
     }
   }
 
-  if (validate.includes('code')) {
-    if (!values.code) {
-      errors.password = requiredMessage;
-    }
+  if (validate.includes('code') && !values.code) {
+    errors.password = requiredMessage;
   }
 
   return errors;