diff --git a/src/App.tsx b/src/App.tsx index 220d9387..8cf682da 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,17 +25,18 @@ interface DispatchProps { interface AppProps extends StateProps, DispatchProps { } -const ReactApp: React.FC = ({tokenData}) => { +const ReactApp: React.FC = () => { - const history = useHistory(); return (
+ + + + + + }/> - - - -
) diff --git a/src/components/AuthenticatedRoute/index.tsx b/src/components/AuthenticatedRoute/index.tsx index 50393655..6b4ea930 100644 --- a/src/components/AuthenticatedRoute/index.tsx +++ b/src/components/AuthenticatedRoute/index.tsx @@ -15,16 +15,11 @@ interface AuthenticatedRouteProps extends OwnProps, StateProps { } const AuthenticatedRoute: React.FC = ({ children, tokenData, ...rest }) => { + return ( - <> - {tokenData ? ( - - {children} - - ) : ( - - )} - + + {tokenData ? children : } + ) } diff --git a/src/components/Forms/SignInForm/index.test.tsx b/src/components/Forms/SignInForm/index.test.tsx new file mode 100644 index 00000000..2efb0216 --- /dev/null +++ b/src/components/Forms/SignInForm/index.test.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import SignInForm from './index'; +import { shallow } from 'enzyme'; + +test('renders SignInForm without crashing', () => { + const baseElement = shallow( + + ); + expect(baseElement).toBeDefined(); +}); diff --git a/src/components/Forms/SignInForm/index.tsx b/src/components/Forms/SignInForm/index.tsx new file mode 100644 index 00000000..64ceddec --- /dev/null +++ b/src/components/Forms/SignInForm/index.tsx @@ -0,0 +1,80 @@ +import React, {useState} from "react"; +import {Button, Form, FormControl, FormLabel} from "react-bootstrap"; +import {Link, useHistory} from "react-router-dom"; +import * as Yup from "yup"; +import AuthRequests, {LoginReq} from "../../../services/requests/AuthRequests"; +import {useFormik} from "formik"; + +interface SignInFormProps { + defaultRedirect?: string, +} + +const SignInForm: React.FC = ({defaultRedirect}) => { + + const history = useHistory(); + const [error, setError] = useState(null); + + const SignupSchema = Yup.object().shape({ + email: Yup.string().required('Email required'), + password: Yup.string().required('Password is required') + }) + + const submit = async (userReq: LoginReq) => { + + setError(null); + try { + if (await AuthRequests.signIn(userReq)) { + const redirectUrl = localStorage.getItem('login_redirect'); + localStorage.removeItem('login_redirect'); + history.push(redirectUrl ?? (defaultRedirect ?? '/')); + } else { + setError('Unknown Error') + } + } catch (error: any) { + if (error.status && error.status == 401) { + setError('Invalid Login Credentials.'); + } + } + } + + const form = useFormik({ + initialValues: { + email: '', + password: '' + }, + validationSchema: SignupSchema, + onSubmit: (values) => submit(values) + }) + + return ( +
form.handleSubmit(event)}> + + {(form.submitCount > 0 && form.errors.email) ?

{form.errors.email}

:

Email

} + +
+ form.setFieldValue('email', email.currentTarget.value)} + type={'email'} + /> + + {(form.submitCount > 0 && form.errors.password) ?

{form.errors.password}

:

Password

} +
+ form.setFieldValue('password', password.currentTarget.value)} + type={'password'} + /> + +

+ + forgot password? + +

+ +

{error}

+ + ) +} + +export default SignInForm; \ No newline at end of file diff --git a/src/pages/SignIn/index.tsx b/src/pages/SignIn/index.tsx index c2753b23..825bd8d6 100644 --- a/src/pages/SignIn/index.tsx +++ b/src/pages/SignIn/index.tsx @@ -1,82 +1,16 @@ -import React, {useState} from 'react' -import * as Yup from 'yup'; - +import React from 'react' import './index.scss'; -import {useFormik} from "formik"; -import AuthRequests, {LoginReq} from "../../services/requests/AuthRequests"; -import {Link, useHistory} from 'react-router-dom'; -import {Button, Form, FormControl, FormLabel} from "react-bootstrap"; import Page from "../../components/Template/Page"; +import SignInForm from "../../components/Forms/SignInForm"; const SignIn: React.FC = ({}) => { - const history = useHistory(); - const [error, setError] = useState(null); - - const SignupSchema = Yup.object().shape({ - email: Yup.string().required('Email required'), - password: Yup.string().required('Password is required') - }) - - const submit = async (userReq: LoginReq) => { - - console.log('userReq', userReq) - - setError(null); - try { - if (await AuthRequests.signIn(userReq)) { - const redirectUrl = localStorage.getItem('login_redirect'); - localStorage.removeItem('login_redirect'); - history.push(redirectUrl ?? '/'); - } else { - setError('Unknown Error') - } - } catch (error: any) { - if (error.status && error.status == 401) { - setError('Invalid Login Credentials.'); - } - } - } - - const form = useFormik({ - initialValues: { - email: '', - password: '' - }, - validationSchema: SignupSchema, - onSubmit: (values) => submit(values) - }) - return (
+

Sign In

-
form.handleSubmit(event)}> - - {(form.submitCount > 0 && form.errors.email) ?

{form.errors.email}

: 'Email'} - -
- form.setFieldValue('email', email.currentTarget.value)} - type={'email'} - /> - - {(form.submitCount > 0 && form.errors.password) ?

{form.errors.password}

: 'Password'} - -
- form.setFieldValue('password', password.currentTarget.value)} - type={'password'} - /> - - - forgot password? - - -

{error}

- +
); }