#7 Actually register person in the backend on sign up

redaktions-app/src/components/ButtonWithSpinner.tsx

@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme: Theme) =>
 
 interface ButtonWithSpinnerProps {
   children: string,
-  handleClick: () => void,
+  handleClick?: () => void,
   loading: boolean
   type?: "button" | "submit",
   fullWidth?: boolean,

redaktions-app/src/components/SignIn.tsx

@@ -67,7 +67,7 @@ export default function SignIn() {
           noValidate
           onSubmit={event => {
             event.preventDefault();
-            login({variables: {email: email, password: password}})
+            login({variables: {email: email, password: password}}).catch(error => console.log(error))
           }}
         >
           <TextField
@@ -102,8 +102,6 @@ export default function SignIn() {
             label="Remember me"
           />
           <ButtonWithSpinner
-            handleClick={() => {
-            }}
             loading={loading}
             type="submit"
             fullWidth

redaktions-app/src/components/SignUp.tsx

@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useState} 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';
@@ -11,6 +10,8 @@ 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";
+import {gql, useMutation} from "@apollo/client";
+import ButtonWithSpinner from "./ButtonWithSpinner";
 
 
 const useStyles = makeStyles((theme) => ({
@@ -31,22 +32,38 @@ const useStyles = makeStyles((theme) => ({
   submit: {
     margin: theme.spacing(3, 0, 2),
   },
+  error: {
+    color: 'red',
+  },
+  success: {
+    color: 'green'
+  }
 }));
 
 export default function SignUp() {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [firstName, setFirstName] = useState("");
+  const [lastName, setLastName] = useState("");
+  const [createAccount, {loading, error, data}] = useMutation(registerMutation);
   const classes = useStyles();
 
+  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    createAccount({variables: {firstName, lastName, email, password}}).catch(error => console.log(error));
+  }
+
   return (
     <Container component="main" maxWidth="xs">
-      <CssBaseline />
+      <CssBaseline/>
       <div className={classes.paper}>
         <Avatar className={classes.avatar}>
-          <LockOutlinedIcon />
+          <LockOutlinedIcon/>
         </Avatar>
         <Typography component="h1" variant="h5">
           Sign up
         </Typography>
-        <form className={classes.form} noValidate>
+        <form className={classes.form} noValidate onSubmit={onSubmit}>
           <Grid container spacing={2}>
             <Grid item xs={12} sm={6}>
               <TextField
@@ -58,6 +75,8 @@ export default function SignUp() {
                 id="firstName"
                 label="First Name"
                 autoFocus
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
               />
             </Grid>
             <Grid item xs={12} sm={6}>
@@ -69,6 +88,8 @@ export default function SignUp() {
                 label="Last Name"
                 name="lastName"
                 autoComplete="lname"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
               />
             </Grid>
             <Grid item xs={12}>
@@ -80,6 +101,8 @@ export default function SignUp() {
                 label="Email Address"
                 name="email"
                 autoComplete="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
               />
             </Grid>
             <Grid item xs={12}>
@@ -92,18 +115,27 @@ export default function SignUp() {
                 type="password"
                 id="password"
                 autoComplete="current-password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
               />
             </Grid>
           </Grid>
-          <Button
+          <ButtonWithSpinner
+            loading={loading}
             type="submit"
             fullWidth
-            variant="contained"
-            color="primary"
-            className={classes.submit}
           >
             Sign Up
-          </Button>
+          </ButtonWithSpinner>
+          {
+            error
+              ? <p className={classes.error}> `Error while trying to create a new account: ${error.message}`}</p>
+              : data && data.registerPerson.person.nodeId
+              // todo: #7 cache update
+              ? <p className={classes.success}>`Created new account successfully.
+                <Link to={"/login"}>Return to login page</Link></p>
+              : null
+          }
           <Grid container justify="flex-end">
             <Grid item>
               <Link to="/login">
@@ -114,8 +146,21 @@ export default function SignUp() {
         </form>
       </div>
       <Box mt={5}>
-        <Copyright />
+        <Copyright/>
       </Box>
     </Container>
   );
 }
+
+const registerMutation = gql`
+  mutation CreateAccount($firstName: String!, $lastName: String!, $email: String!, $password: String!) {
+    __typename
+    registerPerson(input: {firstName: $firstName, lastName: $lastName, email: $email, password: $password}) {
+      person {
+        createdAt
+        nodeId
+      }
+    }
+  }
+`
+