Add sign in, sign up, and upload forms

src/components/App/index.js

@@ -1,22 +1,32 @@
+import React, { Suspense } from 'react';
+import {
+  BrowserRouter,
+  Switch,
+  Route
+} from 'react-router-dom';
 import './App.css';
 
+const SignInForm = React.lazy(() => import('../SignInForm'));
+const SignUpForm = React.lazy(() => import('../SignUpForm'));
+const FileUploadForm = React.lazy(() => import('../FileUploadForm'));
+
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <p>
-          File upload demo
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <Suspense fallback={"Loading..."}>
+      <BrowserRouter>
+        <Switch>
+          <Route path="/" exact>
+            <SignInForm />
+          </Route>
+          <Route path="/signup">
+            <SignUpForm />
+          </Route>
+          <Route path="/upload">
+            <FileUploadForm />
+          </Route>
+        </Switch>    
+      </BrowserRouter>
+    </Suspense>
   );
 }
 

src/components/FileUploadForm/index.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Container, CssBaseline, Grid, Link, Typography } from '@material-ui/core';
+import { DropzoneAreaBase } from 'material-ui-dropzone';
+import useStyles from '../Styles';
+
+export default function FileUploadForm() {
+    const classes = useStyles();
+  
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <div className={classes.paper}>
+          <Typography component="h1" variant="h5">
+            Upload File
+          </Typography>
+          <form className={classes.form} noValidate>
+            <DropzoneAreaBase />
+            <Grid container>
+              <Grid item>
+                <Link component={RouterLink} to="/" variant="body2">
+                  {"Sign Out"}
+                </Link>
+              </Grid>
+            </Grid>
+          </form>
+        </div>
+      </Container>
+    );
+  }

src/components/SignInForm/index.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Avatar, Button, Container, CssBaseline, Grid, Link, TextField, Typography } from '@material-ui/core';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import useStyles from '../Styles';
+
+export default function SignInForm() {
+    const classes = useStyles();
+  
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <form className={classes.form} noValidate>
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="current-password"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Sign Up
+            </Button>
+            <Grid container>
+              <Grid item>
+                <Link component={RouterLink} to="/signup" variant="body2">
+                  {"Don't have an account? Sign Up"}
+                </Link>
+              </Grid>
+            </Grid>
+          </form>
+        </div>
+      </Container>
+    );
+  }

src/components/SignUpForm/index.jsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { Link as RouterLink } from 'react-router-dom';
+import { Avatar, Button, Container, CssBaseline, Grid, Link, TextField, Typography } from '@material-ui/core';
+import LockOpenOutlinedIcon from '@material-ui/icons/LockOpenOutlined';
+import useStyles from '../Styles';
+
+export default function SignInForm() {
+    const classes = useStyles();
+  
+    return (
+      <Container component="main" maxWidth="xs">
+        <CssBaseline />
+        <div className={classes.paper}>
+          <Avatar className={classes.avatar}>
+            <LockOpenOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          <form className={classes.form} noValidate>
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              id="email"
+              label="Email Address"
+              name="email"
+              autoComplete="email"
+              autoFocus
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Password"
+              type="password"
+              id="password"
+              autoComplete="new-password"
+            />
+            <TextField
+              variant="outlined"
+              margin="normal"
+              required
+              fullWidth
+              name="password"
+              label="Confirm Password"
+              type="password"
+              id="passwordConfirm"
+            />
+            <Button
+              type="submit"
+              fullWidth
+              variant="contained"
+              color="primary"
+              className={classes.submit}
+            >
+              Sign In
+            </Button>
+            <Grid container>
+              <Grid item>
+                <Link component={RouterLink} to="/" variant="body2">
+                  {"Already have an account? Sign In"}
+                </Link>
+              </Grid>
+            </Grid>
+          </form>
+        </div>
+      </Container>
+    );
+  }

src/components/Styles.jsx

@@ -0,0 +1,23 @@
+import { makeStyles } from '@material-ui/core/styles';
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.primary.main,
+  },
+  form: {
+    width: '100%', // Fix IE 11 issue.
+    marginTop: theme.spacing(1),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+export default useStyles;

src/index.js

@@ -2,14 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './components/App';
-import ErrorBoundary from './components/ErrorBoundary';
+// import ErrorBoundary from './components/ErrorBoundary';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
   <React.StrictMode>
-    <ErrorBoundary>
-      <App />
-    </ErrorBoundary>
+    <App />
   </React.StrictMode>,
   document.getElementById('root')
 );