#7 Added SignUp component and setup routes

Also:
* Commented out password forgot stuff and referenced to #17

redaktions-app/src/App.tsx

@@ -3,13 +3,15 @@ import React from "react";
 import Main from "./components/Main";
 import {Redirect, Route, Switch} from "react-router-dom";
 import SignIn from "./components/SignIn";
+import SignUp from "./components/SignUp";
 
 
 function App() {
   return (
     <Switch>
       <PrivateRoute exact path={"/"}><Main /></PrivateRoute>
-      <Route path={"/login"}><SignIn /></Route>
+      <NotLoggedInOnlyRoute path={"/login"}><SignIn /></NotLoggedInOnlyRoute>
+      <NotLoggedInOnlyRoute path={"/signup"}><SignUp /></NotLoggedInOnlyRoute>
     </Switch>
   )
 }
@@ -37,4 +39,24 @@ function PrivateRoute({ children, ...rest }) {
   );
 }
 
+// @ts-ignore
+function NotLoggedInOnlyRoute({ children, ...rest }) {
+  return (
+    <Route
+      {...rest}
+      render={({ location }) =>
+        !isLoggedIn() ? (
+          children
+        ) : (
+          <Redirect
+            to={{
+              pathname: "/",
+            }}
+          />
+        )
+      }
+    />
+  );
+}
+
 export default App;

redaktions-app/src/components/SignIn.tsx

@@ -4,7 +4,7 @@ import CssBaseline from '@material-ui/core/CssBaseline';
 import TextField from '@material-ui/core/TextField';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 import Checkbox from '@material-ui/core/Checkbox';
-import Link from '@material-ui/core/Link';
+import {Link, useHistory} from 'react-router-dom';
 import Grid from '@material-ui/core/Grid';
 import Box from '@material-ui/core/Box';
 import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
@@ -14,8 +14,6 @@ import Container from '@material-ui/core/Container';
 import {gql, useMutation} from "@apollo/client";
 import ButtonWithSpinner from "./ButtonWithSpinner";
 import {Copyright} from "./Copyright";
-import {isLoggedIn} from "../App";
-import {useHistory} from 'react-router-dom';
 
 const useStyles = makeStyles((theme) => ({
   paper: {
@@ -48,10 +46,6 @@ export default function SignIn() {
   const history = useHistory();
   const classes = useStyles();
 
-  if (isLoggedIn()) {
-    history.replace("/")
-    return <p>Already logged in, redirecting to main page</p>
-  }
   if (data && data.authenticate.jwtToken) {
     localStorage.setItem("token", data.authenticate.jwtToken)
     history.replace("/")
@@ -121,12 +115,13 @@ export default function SignIn() {
           </p>
           <Grid container>
             <Grid item xs>
-              <Link href="#" variant="body2" aria-disabled={true}>
-                Forgot password?
-              </Link>
+              {/*  todo: see issue #17*/}
+              {/*<Link to="/restore-password" aria-disabled={true}>*/}
+              {/*  Forgot password?*/}
+              {/*</Link>*/}
             </Grid>
             <Grid item>
-              <Link href="#" variant="body2">
+              <Link to="/signup">
                 {"Don't have an account? Sign Up"}
               </Link>
             </Grid>

redaktions-app/src/components/SignUp.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import Button from '@material-ui/core/Button';
+import CssBaseline from '@material-ui/core/CssBaseline';
+import TextField from '@material-ui/core/TextField';
+import {Link} from 'react-router-dom';
+import Grid from '@material-ui/core/Grid';
+import Box from '@material-ui/core/Box';
+import LockOutlinedIcon from '@material-ui/icons/LockOutlined';
+import Typography from '@material-ui/core/Typography';
+import {makeStyles} from '@material-ui/core/styles';
+import Container from '@material-ui/core/Container';
+import {Copyright} from "./Copyright";
+
+
+const useStyles = makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.secondary.main,
+  },
+  form: {
+    width: '100%', // Fix IE 11 issue.
+    marginTop: theme.spacing(3),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+}));
+
+export default function SignUp() {
+  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 up
+        </Typography>
+        <form className={classes.form} noValidate>
+          <Grid container spacing={2}>
+            <Grid item xs={12} sm={6}>
+              <TextField
+                autoComplete="fname"
+                name="firstName"
+                variant="outlined"
+                required
+                fullWidth
+                id="firstName"
+                label="First Name"
+                autoFocus
+              />
+            </Grid>
+            <Grid item xs={12} sm={6}>
+              <TextField
+                variant="outlined"
+                required
+                fullWidth
+                id="lastName"
+                label="Last Name"
+                name="lastName"
+                autoComplete="lname"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                variant="outlined"
+                required
+                fullWidth
+                id="email"
+                label="Email Address"
+                name="email"
+                autoComplete="email"
+              />
+            </Grid>
+            <Grid item xs={12}>
+              <TextField
+                variant="outlined"
+                required
+                fullWidth
+                name="password"
+                label="Password"
+                type="password"
+                id="password"
+                autoComplete="current-password"
+              />
+            </Grid>
+          </Grid>
+          <Button
+            type="submit"
+            fullWidth
+            variant="contained"
+            color="primary"
+            className={classes.submit}
+          >
+            Sign Up
+          </Button>
+          <Grid container justify="flex-end">
+            <Grid item>
+              <Link to="/login">
+                Already have an account? Sign in
+              </Link>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+      <Box mt={5}>
+        <Copyright />
+      </Box>
+    </Container>
+  );
+}