Move SignUpForm and LoginForm to AuthForm component

Use Authform component as a container to handle presentational logic
for SignUpForm and LoginForm.
Add PropTypes module and proptypes to components.

Author: angelocordon

package.json

@@ -23,6 +23,7 @@
     "axios": "0.19.0",
     "json-server": "0.15.1",
     "npm-run-all": "4.1.5",
+    "prop-types": "^15.7.2",
     "react": "16.11.0",
     "react-dom": "16.11.0",
     "react-router-dom": "5.1.2",

src/components/Home/AuthForms/AuthForm.js

@@ -0,0 +1,22 @@
+import React, { useState } from 'react';
+import { Box, Paper } from '@material-ui/core/';
+import SignUpForm from './SignUpForm';
+import LoginForm from './LoginForm';
+
+const AuthForm = () => {
+  const [activeSignUpForm, setActiveSignUpform] = useState(true);
+
+  const toggleActiveForm = event => {
+    event.preventDefault();
+    setActiveSignUpform(!activeSignUpForm);
+  };
+
+  return (
+    <Box component={Paper} elevetion={3} padding={3}>
+      {activeSignUpForm && <SignUpForm toggleActiveForm={toggleActiveForm} />}
+      {!activeSignUpForm && <LoginForm toggleActiveForm={toggleActiveForm} />}
+    </Box>
+  );
+};
+
+export default AuthForm;

src/components/Home/AuthForms/LoginForm.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Box, Button, TextField } from '@material-ui/core/';
+
+const LoginForm = ({ toggleActiveForm }) => {
+  return (
+    <Box
+      component="form"
+      display="flex"
+      flexWrap="wrap"
+      noValidate
+      autoComplete="off"
+    >
+      <Box component="h1" fontSize={18}>
+        Log in
+      </Box>
+      <TextField
+        id="email"
+        label="Email"
+        fullWidth
+        required
+        variant="outlined"
+        margin="dense"
+        type="email"
+      />
+      <TextField
+        id="password"
+        label="Password"
+        fullWidth
+        required
+        variant="outlined"
+        margin="dense"
+        type="password"
+      />
+
+      <Box width="100%" marginTop={2}>
+        <Button variant="contained" color="primary">
+          Log in
+        </Button>
+      </Box>
+
+      <p>
+        Need an account?{' '}
+        <Box
+          component="button"
+          color="primary.main"
+          padding={0}
+          marginLeft={1}
+          border={0}
+          bgcolor="transparent"
+          fontSize={16}
+          onClick={toggleActiveForm}
+        >
+          Sign up
+        </Box>
+        .
+      </p>
+    </Box>
+  );
+};
+
+const { func } = PropTypes;
+
+LoginForm.propTypes = {
+  toggleActiveForm: func.isRequired,
+};
+
+export default LoginForm;

src/components/Home/SignUpForm.js renamed to src/components/Home/AuthForms/SignUpForm.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { Box, Button, TextField } from '@material-ui/core/';
 
-const SignUpForm = () => {
+const SignUpForm = ({ toggleActiveForm }) => {
   return (
     <Box
       component="form"
@@ -10,6 +11,9 @@ const SignUpForm = () => {
       noValidate
       autoComplete="off"
     >
+      <Box component="h1" fontSize={18}>
+        Create an account
+      </Box>
       <TextField
         id="first-name"
         label="First Name"
@@ -51,13 +55,36 @@ const SignUpForm = () => {
         type="password"
       />
 
-      <Button variant="contained" color="primary">
-        Sign Up
-      </Button>
+      <Box width="100%" marginTop={2}>
+        <Button variant="contained" color="primary">
+          Sign Up
+        </Button>
+      </Box>
 
-      <p>Already have an account? Log in.</p>
+      <p>
+        Already have an account?
+        <Box
+          component="button"
+          color="primary.main"
+          padding={0}
+          marginLeft={1}
+          border={0}
+          bgcolor="transparent"
+          fontSize={16}
+          onClick={toggleActiveForm}
+        >
+          Log in
+        </Box>
+        .
+      </p>
     </Box>
   );
 };
 
+const { func } = PropTypes;
+
+SignUpForm.propTypes = {
+  toggleActiveForm: func.isRequired,
+};
+
 export default SignUpForm;

src/components/Home/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import { Box, Grid, Paper } from '@material-ui/core/';
-import SignUpForm from './SignUpForm';
+import { Box, Grid } from '@material-ui/core/';
+import AuthForm from './AuthForms/AuthForm';
 
 const Home = () => {
   return (
@@ -24,9 +24,7 @@ const Home = () => {
         </Box>
       </Grid>
       <Grid item xs={12} sm={5}>
-        <Box component={Paper} elevetion={3} padding={3}>
-          <SignUpForm />
-        </Box>
+        <AuthForm />
       </Grid>
     </Grid>
   );