diff --git a/packages/web/src/components/LoginForm/index.tsx b/packages/web/src/components/LoginForm/index.tsx index 1fec7ab2..64759980 100644 --- a/packages/web/src/components/LoginForm/index.tsx +++ b/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 + + + + Don't have an Automatisch account yet? + Sign Up + ); }; diff --git a/packages/web/src/components/LoginForm/style.ee.ts b/packages/web/src/components/LoginForm/style.ee.ts new file mode 100644 index 00000000..a49e5c6e --- /dev/null +++ b/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) +})); \ No newline at end of file diff --git a/packages/web/src/components/SignUpForm/index.ee.tsx b/packages/web/src/components/SignUpForm/index.ee.tsx new file mode 100644 index 00000000..d3ecfd6d --- /dev/null +++ b/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 ( + <> + + + + + + Login + + + ); + }; +} + +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 ( + + theme.palette.text.disabled, + pb: 2, + mb: 2, + }} + gutterBottom + > + Login + + +
+ + ); +} + +export default SignUpForm; diff --git a/packages/web/src/config/urls.ts b/packages/web/src/config/urls.ts index aeca5e82..062d88f4 100644 --- a/packages/web/src/config/urls.ts +++ b/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'; diff --git a/packages/web/src/pages/SignUp/index.ee.tsx b/packages/web/src/pages/SignUp/index.ee.tsx new file mode 100644 index 00000000..afe51ddb --- /dev/null +++ b/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 ( + + + + + + ); +} diff --git a/packages/web/src/routes.tsx b/packages/web/src/routes.tsx index a78b64af..5120663c 100644 --- a/packages/web/src/routes.tsx +++ b/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 ( } /> + + + + } + /> +