Sign in form

src/App.tsx

@@ -25,17 +25,18 @@ interface DispatchProps {
 interface AppProps extends StateProps, DispatchProps {
 }
 
-const ReactApp: React.FC<AppProps> = ({tokenData}) => {
+const ReactApp: React.FC<AppProps> = () => {
 
-	const history = useHistory();
 	return (
 		<BrowserRouter>
 			<main id={"main"}>
+				<Route path='/splash'><Splash/></Route>
+				<Route path='/sign-in'><SignIn/></Route>
+				<Route path='/sign-up'><SignUp/></Route>
+				<Route exact path='/'>
+					<Redirect to={'/home'}/>
+				</Route>
 				<AuthenticatedRoute path="/home*" render={() => <Home/>}/>
-				<Route exact path='/splash'><Splash/></Route>
-				<Route exact path='/sign-in'><SignIn/></Route>
-				<Route exact path='/sign-up'><SignUp/></Route>
-				<Route exact path='/'><Redirect to={'/splash'}/></Route>
 			</main>
 		</BrowserRouter>
 	)

src/components/AuthenticatedRoute/index.tsx

@@ -15,16 +15,11 @@ interface AuthenticatedRouteProps extends OwnProps, StateProps {
 }
 
 const AuthenticatedRoute: React.FC<AuthenticatedRouteProps> = ({ children, tokenData, ...rest }) => {
+
     return (
-        <>
-            {tokenData ? (
-                <Route {...rest} >
-                    {children}
-                </Route>
-            ) : (
-                <Redirect to="/splash" />
-            )}
-        </>
+        <Route {...rest}>
+            {tokenData ? children :  <Redirect to="/splash" />}
+        </Route>
     )
 }
 

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(
+        <SignInForm/>
+    );
+    expect(baseElement).toBeDefined();
+});

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<SignInFormProps> = ({defaultRedirect}) => {
+
+    const history = useHistory();
+    const [error, setError] = useState<string|null>(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 onSubmit={(event) => form.handleSubmit(event)}>
+            <FormLabel>
+                {(form.submitCount > 0 && form.errors.email) ? <p className={'error'}>{form.errors.email}</p> : <p>Email</p>}
+
+            </FormLabel>
+            <FormControl
+                value={form.values.email}
+                onInput={email => form.setFieldValue('email', email.currentTarget.value)}
+                type={'email'}
+            />
+            <FormLabel>
+                {(form.submitCount > 0 && form.errors.password) ? <p className={'error'}>{form.errors.password}</p> : <p>Password</p>}
+            </FormLabel>
+            <FormControl
+                value={form.values.password}
+                onInput={password => form.setFieldValue('password', password.currentTarget.value)}
+                type={'password'}
+            />
+
+            <p>
+                <Link to='/forgot-password'>
+                    forgot password?
+                </Link>
+            </p>
+            <Button type={"submit"}>Submit</Button>
+            <p className={'error'}>{error}</p>
+        </Form>
+    )
+}
+
+export default SignInForm;

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<string|null>(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 (
         <Page id={'sign-in-page'}>
             <div>
+                <h1>Sign In</h1>
             </div>
-            <Form onSubmit={(event) => form.handleSubmit(event)}>
-                <FormLabel>
-                    {(form.submitCount > 0 && form.errors.email) ? <p className={'error'}>{form.errors.email}</p> : 'Email'}
-
-                </FormLabel>
-                <FormControl
-                    value={form.values.email}
-                    onInput={email => form.setFieldValue('email', email.currentTarget.value)}
-                    type={'email'}
-                />
-                <FormLabel>
-                    {(form.submitCount > 0 && form.errors.password) ? <p className={'error'}>{form.errors.password}</p> : 'Password'}
-
-                </FormLabel>
-                <FormControl
-                    value={form.values.password}
-                    onInput={password => form.setFieldValue('password', password.currentTarget.value)}
-                    type={'password'}
-                />
-
-                <Link to='/forgot-password'>
-                    forgot password?
-                </Link>
-                <Button type={"submit"}>Submit</Button>
-                <p className={'error'}>{error}</p>
-            </Form>
+            <SignInForm defaultRedirect={'/home'}/>
         </Page>
     );
 }