feat: add signup link to login and create signup dummy page

packages/web/src/components/LoginForm/index.tsx

@@ -10,6 +10,7 @@ import * as URLS from 'config/urls';
 import { LOGIN } from 'graphql/mutations/login';
 import Form from 'components/Form';
 import TextField from 'components/TextField';
+import { Link } from './style.ee';
 
 function renderFields(props: { loading: boolean }) {
   const { loading = false } = props;
@@ -49,6 +50,12 @@ function renderFields(props: { loading: boolean }) {
         >
           Login
         </LoadingButton>
+
+        
+        <Typography variant="body1" align='center' mt={3}>
+          Don't have an Automatisch account yet? 
+          <Link to={URLS.SIGNUP}>Sign Up</Link>
+        </Typography>
       </>
     );
   };

packages/web/src/components/LoginForm/style.ee.ts

@@ -0,0 +1,7 @@
+import { styled } from '@mui/material/styles';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const Link = styled(RouterLink)(({theme}) => ({
+  textDecoration: 'underline',
+  marginLeft: theme.spacing(0.5)
+}));

packages/web/src/components/SignUpForm/index.ee.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useMutation } from '@apollo/client';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import LoadingButton from '@mui/lab/LoadingButton';
+
+import useAuthentication from 'hooks/useAuthentication';
+import * as URLS from 'config/urls';
+import { LOGIN } from 'graphql/mutations/login';
+import Form from 'components/Form';
+import TextField from 'components/TextField';
+
+function renderFields(props: { loading: boolean }) {
+  const { loading = false } = props;
+
+  return () => {
+    return (
+      <>
+        <TextField
+          label="Email"
+          name="email"
+          required
+          fullWidth
+          margin="dense"
+          autoComplete="username"
+          data-test="email-text-field"
+        />
+
+        <TextField
+          label="Password"
+          name="password"
+          type="password"
+          required
+          fullWidth
+          margin="dense"
+          autoComplete="current-password"
+          data-test="password-text-field"
+        />
+
+        <LoadingButton
+          type="submit"
+          variant="contained"
+          color="primary"
+          sx={{ boxShadow: 2, mt: 3 }}
+          loading={loading}
+          fullWidth
+          data-test="login-button"
+        >
+          Login
+        </LoadingButton>
+      </>
+    );
+  };
+}
+
+function SignUpForm() {
+  const navigate = useNavigate();
+  const authentication = useAuthentication();
+  const [login, { loading }] = useMutation(LOGIN);
+
+  React.useEffect(() => {
+    if (authentication.isAuthenticated) {
+      navigate(URLS.DASHBOARD);
+    }
+  }, [authentication.isAuthenticated]);
+
+  const handleSubmit = async (values: any) => {
+    const { data } = await login({
+      variables: {
+        input: values,
+      },
+    });
+
+    const { token } = data.login;
+
+    authentication.updateToken(token);
+  };
+
+  const render = React.useMemo(() => renderFields({ loading }), [loading]);
+
+  return (
+    <Paper sx={{ px: 2, py: 4 }}>
+      <Typography
+        variant="h3"
+        align="center"
+        sx={{
+          borderBottom: '1px solid',
+          borderColor: (theme) => theme.palette.text.disabled,
+          pb: 2,
+          mb: 2,
+        }}
+        gutterBottom
+      >
+        Login
+      </Typography>
+
+      <Form onSubmit={handleSubmit} render={render} />
+    </Paper>
+  );
+}
+
+export default SignUpForm;

packages/web/src/config/urls.ts

@@ -5,6 +5,7 @@ export const EXECUTION = (executionId: string): string =>
   `/executions/${executionId}`;
 
 export const LOGIN = '/login';
+export const SIGNUP = '/sign-up';
 
 export const APPS = '/apps';
 export const NEW_APP_CONNECTION = '/apps/new';

packages/web/src/pages/SignUp/index.ee.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Container from 'components/Container';
+import SignUpForm from 'components/SignUpForm/index.ee';
+
+export default function Login(): React.ReactElement {
+  return (
+    <Box sx={{ display: 'flex', flex: 1, alignItems: 'center' }}>
+      <Container maxWidth="sm">
+        <SignUpForm />
+      </Container>
+    </Box>
+  );
+}

packages/web/src/routes.tsx

@@ -8,6 +8,7 @@ import Execution from 'pages/Execution';
 import Flows from 'pages/Flows';
 import Flow from 'pages/Flow';
 import Login from 'pages/Login';
+import SignUp from 'pages/SignUp/index.ee';
 import EditorRoutes from 'pages/Editor/routes';
 import * as URLS from 'config/urls';
 import settingsRoutes from './settingsRoutes';
@@ -80,6 +81,15 @@ export default (
       }
     />
 
+    <Route
+      path={URLS.SIGNUP}
+      element={
+        <PublicLayout>
+          <SignUp />
+        </PublicLayout>
+      }
+    />
+
     <Route
       path={URLS.UPDATES}
       element={