reapit · willmcvay · Feb 10, 2020 · Feb 10, 2020
diff --git a/packages/aml-checklist/src/assets/images/reapit-connect.png b/packages/aml-checklist/src/assets/images/reapit-connect.png
diff --git a/packages/aml-checklist/src/components/pages/__tests__/__snapshots__/login.tsx.snap b/packages/aml-checklist/src/components/pages/__tests__/__snapshots__/login.tsx.snap
@@ -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

diff --git a/packages/aml-checklist/src/components/pages/__tests__/login.tsx b/packages/aml-checklist/src/components/pages/__tests__/login.tsx
@@ -1,26 +1,20 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
-import {
-  Login,
-  LoginProps,
-  renderForm,
-  onSubmitHandler,
-  LoginFormValues,
-  mapStateToProps,
-  mapDispatchToProps,
-  resetSubmitting,
-} from '@/components/pages/login'
+import { Login, LoginProps, mapStateToProps } from '@/components/pages/login'
 import { ReduxState } from '@/types/core'
-import { LoginParams } from '@reapit/cognito-auth'
+import { redirectToLogin } from '@reapit/cognito-auth'
+import { Button } from '@reapit/elements'
 
 const props = (hasSession: boolean): LoginProps => ({
-  error: false,
   hasSession,
-  login: jest.fn(),
   // @ts-ignore: just pick the needed props for the test
   history: {},
 })
 
+jest.mock('@reapit/cognito-auth', () => ({
+  redirectToLogin: jest.fn(),
+}))
+
 describe('Login', () => {
   it('should match a snapshot', () => {
     expect(shallow(<Login {...props(false)} />)).toMatchSnapshot()
@@ -30,36 +24,19 @@ describe('Login', () => {
     expect(shallow(<Login {...props(true)} />)).toMatchSnapshot()
   })
 
-  describe('renderForm', () => {
-    it('should match a snapshot when ERROR true', () => {
-      const fn = renderForm({ isSubmitting: false, error: true })()
-      expect(fn).toMatchSnapshot()
-    })
+  describe('loginHandler', () => {
+    it('should correctly call redirect on click', () => {
+      const props: LoginProps = {
+        hasSession: false,
+      }
+      const wrapper = shallow(<Login {...props} />)
 
-    it('should match a snapshot when ERROR true', () => {
-      const fn = renderForm({ isSubmitting: false, error: false })()
-      expect(fn).toMatchSnapshot()
-    })
-  })
+      wrapper
+        .find(Button)
+        .first()
+        .simulate('click')
 
-  describe('onSubmitHandler', () => {
-    const mockProps = {
-      setIsSubmitting: jest.fn(),
-      login: jest.fn(),
-    }
-    const mockValues = {} as LoginFormValues
-    it('should run correctly', () => {
-      onSubmitHandler(mockProps)(mockValues)
-      expect(mockProps.setIsSubmitting).toBeCalledWith(true)
-      expect(mockProps.login).toBeCalledWith({ ...mockValues, loginType: 'CLIENT' })
-    })
-  })
-
-  describe('resetSubmitting', () => {
-    const setIsSubmitting = jest.fn()
-    it('should run correctly', () => {
-      resetSubmitting(true, setIsSubmitting)()
-      expect(setIsSubmitting).toBeCalledWith(false)
+      expect(redirectToLogin).toHaveBeenCalledTimes(1)
     })
   })
 
@@ -70,23 +47,26 @@ describe('Login', () => {
         auth: {
           refreshSession: null,
           loginSession: null,
-          error: false,
         },
       } as ReduxState
       const result = mapStateToProps(mockState)
       expect(result).toEqual({
         hasSession: false,
-        error: false,
       })
     })
-  })
 
-  describe('mapDispatchToProps', () => {
-    it('should render correctly', () => {
-      const mockDispatch = jest.fn()
-      const { login } = mapDispatchToProps(mockDispatch)
-      login({} as LoginParams)
-      expect(mockDispatch).toBeCalled()
+    it('should run correctly', () => {
+      // @ts-ignore: only pick necessary props
+      const mockState = {
+        auth: {
+          refreshSession: {},
+          loginSession: null,
+        },
+      } as ReduxState
+      const result = mapStateToProps(mockState)
+      expect(result).toEqual({
+        hasSession: true,
+      })
     })
   })
 })
diff --git a/packages/aml-checklist/src/components/pages/login.tsx b/packages/aml-checklist/src/components/pages/login.tsx
@@ -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))
diff --git a/packages/aml-checklist/src/constants/api.ts b/packages/aml-checklist/src/constants/api.ts
@@ -1,11 +1,14 @@
 import { StringMap } from '@/types/core'
+import { COOKIE_SESSION_KEY } from '@reapit/cognito-auth'
 
 export const CONTACTS_HEADERS = {
   'Content-Type': 'application/json',
 } as StringMap
 
 export const API_VERSION = '2020-01-31'
 
+export const COOKIE_SESSION_KEY_AML_APP = `${COOKIE_SESSION_KEY}-aml-app`
+
 export const URLS = {
   contacts: '/contacts',
   idChecks: '/identityChecks',