-
Notifications
You must be signed in to change notification settings - Fork 22
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
21 changed files
with
190 additions
and
602 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
107 changes: 18 additions & 89 deletions
107
packages/aml-checklist/src/components/pages/__tests__/__snapshots__/login.tsx.snap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,102 +1,31 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Login renderForm should match a snapshot when ERROR true 1`] = ` | ||
| <Form | ||
| data-test="login-form" | ||
| > | ||
| <Unknown | ||
| dataTest="login-email" | ||
| id="email" | ||
| labelText="Email" | ||
| name="email" | ||
| placeholder="[email protected]" | ||
| type="email" | ||
| /> | ||
| <Unknown | ||
| dataTest="login-password" | ||
| id="password" | ||
| labelText="Password" | ||
| name="password" | ||
| placeholder="Enter your password" | ||
| type="password" | ||
| /> | ||
| <Unknown> | ||
| <Unknown | ||
| disabled={false} | ||
| loading={false} | ||
| type="submit" | ||
| variant="primary" | ||
| > | ||
| Login | ||
| </Unknown> | ||
| </Unknown> | ||
| <Unknown | ||
| message="Login failed, user credentials not recognised" | ||
| type="danger" | ||
| /> | ||
| </Form> | ||
| `; | ||
|
|
||
| exports[`Login renderForm should match a snapshot when ERROR true 2`] = ` | ||
| <Form | ||
| data-test="login-form" | ||
| > | ||
| <Unknown | ||
| dataTest="login-email" | ||
| id="email" | ||
| labelText="Email" | ||
| name="email" | ||
| placeholder="[email protected]" | ||
| type="email" | ||
| /> | ||
| <Unknown | ||
| dataTest="login-password" | ||
| id="password" | ||
| labelText="Password" | ||
| name="password" | ||
| placeholder="Enter your password" | ||
| type="password" | ||
| /> | ||
| <Unknown> | ||
| <Unknown | ||
| disabled={false} | ||
| loading={false} | ||
| type="submit" | ||
| variant="primary" | ||
| > | ||
| Login | ||
| </Unknown> | ||
| </Unknown> | ||
| </Form> | ||
| `; | ||
|
|
||
| exports[`Login should match a snapshot 1`] = ` | ||
| <div> | ||
| <div | ||
| className="undefined false" | ||
| > | ||
| <Component | ||
| isCentered={true} | ||
| > | ||
| Sign in | ||
| <div> | ||
| <Component> | ||
| <img | ||
| alt="Reapit Connect Graphic" | ||
| src="" | ||
| /> | ||
| </Component> | ||
| <p | ||
| className="pb-8" | ||
| > | ||
| Welcome to Reapit Online Check List | ||
| </p> | ||
| <Formik | ||
| initialValues={ | ||
| Object { | ||
| "email": "", | ||
| "password": "", | ||
| } | ||
| } | ||
| onSubmit={[Function]} | ||
| validate={[Function]} | ||
| > | ||
| <Component /> | ||
| </Formik> | ||
| <Component> | ||
| <Component | ||
| disabled={false} | ||
| fullWidth={true} | ||
| loading={false} | ||
| onClick={[Function]} | ||
| type="button" | ||
| variant="primary" | ||
| > | ||
| Login | ||
| </Component> | ||
| </Component> | ||
| </div> | ||
| <div> | ||
| <img | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,103 +1,37 @@ | ||
| import * as React from 'react' | ||
| import { connect } from 'react-redux' | ||
| import { Redirect } from 'react-router-dom' | ||
| import { Dispatch } from 'redux' | ||
| import { withRouter, RouteComponentProps } from 'react-router' | ||
| import { withRouter } from 'react-router' | ||
| import { ReduxState } from '@/types/core' | ||
| import { authLogin } from '@/actions/auth' | ||
| import { validate } from '@/utils/form/login' | ||
| import Routes from '@/constants/routes' | ||
| import { LOGIN_TYPE } from '@/constants/auth' | ||
| import { Input, Button, Alert, H1, Level, Formik, Form } from '@reapit/elements' | ||
| import { LoginParams } from '@reapit/cognito-auth' | ||
|
|
||
| import { Button, Level } from '@reapit/elements' | ||
| import { redirectToLogin } from '@reapit/cognito-auth' | ||
| import loginStyles from '@/styles/pages/login.scss?mod' | ||
| import logoImage from '@/assets/images/reapit-graphic.jpg' | ||
| import connectImage from '@/assets/images/reapit-connect.png' | ||
|
|
||
| export interface LoginMappedActions { | ||
| login: (params: LoginParams) => void | ||
| } | ||
|
|
||
| export interface LoginMappedProps { | ||
| export interface LoginProps { | ||
| hasSession: boolean | ||
| error: boolean | ||
| } | ||
|
|
||
| export interface LoginFormValues { | ||
| email: string | ||
| password: string | ||
| } | ||
|
|
||
| export type LoginProps = LoginMappedActions & LoginMappedProps & RouteComponentProps | ||
|
|
||
| export const onSubmitHandler = ({ setIsSubmitting, login }) => (values: LoginFormValues) => { | ||
| const { email, password } = values | ||
|
|
||
| setIsSubmitting(true) | ||
| login({ | ||
| userName: email, | ||
| password, | ||
| loginType: LOGIN_TYPE.CLIENT, | ||
| cognitoClientId: process.env.COGNITO_CLIENT_ID_AML_APP as string, | ||
| } as LoginParams) | ||
| } | ||
|
|
||
| export const renderForm = ({ isSubmitting, error }) => () => { | ||
| return ( | ||
| <Form data-test="login-form"> | ||
| <Input | ||
| dataTest="login-email" | ||
| type="email" | ||
| labelText="Email" | ||
| id="email" | ||
| name="email" | ||
| placeholder="[email protected]" | ||
| /> | ||
| <Input | ||
| dataTest="login-password" | ||
| type="password" | ||
| labelText="Password" | ||
| id="password" | ||
| name="password" | ||
| placeholder="Enter your password" | ||
| /> | ||
|
|
||
| <Level> | ||
| <Button type="submit" loading={isSubmitting} variant="primary" disabled={isSubmitting}> | ||
| Login | ||
| </Button> | ||
| </Level> | ||
| {error && <Alert message="Login failed, user credentials not recognised" type="danger" />} | ||
| </Form> | ||
| ) | ||
| } | ||
|
|
||
| export const resetSubmitting = (error: boolean, setIsSubmitting: (isSubmitting: boolean) => void) => () => { | ||
| if (error) { | ||
| setIsSubmitting(false) | ||
| } | ||
| } | ||
| const loginHandler = () => redirectToLogin(process.env.COGNITO_CLIENT_ID_AML_APP as string, `${window.location.origin}`) | ||
|
|
||
| export const Login: React.FunctionComponent<LoginProps> = (props: LoginProps) => { | ||
| const [isSubmitting, setIsSubmitting] = React.useState(false) | ||
| const { hasSession, error, login } = props | ||
| const { disabled, wrapper, container, image } = loginStyles | ||
|
|
||
| React.useEffect(resetSubmitting(error, setIsSubmitting), [error]) | ||
| const { hasSession } = props | ||
| const { wrapper, container, image } = loginStyles | ||
|
|
||
| const LoginForm = ( | ||
| <div className={container}> | ||
| <div className={`${wrapper} ${isSubmitting && disabled}`}> | ||
| <H1 isCentered>Sign in</H1> | ||
| <div className={wrapper}> | ||
| <Level> | ||
| <img src={connectImage} alt="Reapit Connect Graphic" /> | ||
| </Level> | ||
| <p className="pb-8">Welcome to Reapit Online Check List</p> | ||
|
|
||
| <Formik | ||
| validate={validate} | ||
| initialValues={{ email: '', password: '' } as LoginFormValues} | ||
| onSubmit={onSubmitHandler({ setIsSubmitting, login })} | ||
| > | ||
| {renderForm({ isSubmitting, error })} | ||
| </Formik> | ||
| <Level> | ||
| <Button type="button" onClick={loginHandler} loading={false} variant="primary" disabled={false} fullWidth> | ||
| Login | ||
| </Button> | ||
| </Level> | ||
| </div> | ||
|
|
||
| <div className={image}> | ||
|
|
@@ -113,13 +47,8 @@ export const Login: React.FunctionComponent<LoginProps> = (props: LoginProps) => | |
| return LoginForm | ||
| } | ||
|
|
||
| export const mapStateToProps = (state: ReduxState): LoginMappedProps => ({ | ||
| export const mapStateToProps = (state: ReduxState): LoginProps => ({ | ||
| hasSession: !!state.auth.loginSession || !!state.auth.refreshSession, | ||
| error: state.auth.error, | ||
| }) | ||
|
|
||
| export const mapDispatchToProps = (dispatch: Dispatch): LoginMappedActions => ({ | ||
| login: (params: LoginParams) => dispatch(authLogin(params)), | ||
| }) | ||
|
|
||
| export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Login)) | ||
| export default withRouter(connect(mapStateToProps, {})(Login)) | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.