Add submit handler

src/components/SignInForm/index.jsx

@@ -1,11 +1,26 @@
-import React from 'react';
+import React, { useRef } 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 { useUserContext }  from '../Contexts/UserContext';
 import useStyles from '../Styles';
 
 export default function SignInForm() {
     const classes = useStyles();
+    const emailEl = useRef(null);
+    const passwordEl = useRef(null);
+    const { fetching, signIn, setError } = useUserContext();
+    const onSubmit = async (event) => {
+      try {
+        event.preventDefault();
+        const username = emailEl.current.value;
+        const password = passwordEl.current.value;
+        const result = await signIn(username, password);
+      }
+      catch (e) {
+        setError(e.message);
+      }
+    };
 
     return (
       <Container component="main" maxWidth="xs">
@@ -17,7 +32,7 @@ export default function SignInForm() {
           <Typography component="h1" variant="h5">
             Sign in
           </Typography>
-          <form className={classes.form} noValidate>
+          <form className={classes.form} noValidate action="{onSubmit}">
             <TextField
               variant="outlined"
               margin="normal"
@@ -28,6 +43,7 @@ export default function SignInForm() {
               name="email"
               autoComplete="email"
               autoFocus
+              inputRef={emailEl}
             />
             <TextField
               variant="outlined"
@@ -39,13 +55,16 @@ export default function SignInForm() {
               type="password"
               id="password"
               autoComplete="current-password"
+              inputRef={passwordEl}
             />
             <Button
               type="submit"
+              disabled={fetching}
               fullWidth
               variant="contained"
               color="primary"
               className={classes.submit}
+              onClick={onSubmit}
             >
               Sign In
             </Button>

src/components/SignUpForm/index.jsx

@@ -1,11 +1,28 @@
-import React from 'react';
+import React, { useRef } 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';
+import { useUserContext }  from '../Contexts/UserContext';
 
 export default function SignInForm() {
+    const { signUp, fetching, setError } = useUserContext();
     const classes = useStyles();
+    const emailEl = useRef(null);
+    const passwordEl = useRef(null);
+    const confirmEl = useRef(null);
+    const onSubmit = async (event) => {
+      try {
+        event.preventDefault();
+        const email = emailEl.current.value;
+        const password = passwordEl.current.value;
+        const confirm = confirmEl.current.value;
+        const result = await signUp(email, password, confirm);
+      }
+      catch (e) {
+        setError(e.message);
+      }
+    };
 
     return (
       <Container component="main" maxWidth="xs">
@@ -17,7 +34,7 @@ export default function SignInForm() {
           <Typography component="h1" variant="h5">
             Sign up
           </Typography>
-          <form className={classes.form} noValidate>
+          <form className={classes.form} noValidate onSubmit={onSubmit}>
             <TextField
               variant="outlined"
               margin="normal"
@@ -28,6 +45,7 @@ export default function SignInForm() {
               name="email"
               autoComplete="email"
               autoFocus
+              inputRef={emailEl}
             />
             <TextField
               variant="outlined"
@@ -39,6 +57,7 @@ export default function SignInForm() {
               type="password"
               id="password"
               autoComplete="new-password"
+              inputRef={passwordEl}
             />
             <TextField
               variant="outlined"
@@ -49,6 +68,7 @@ export default function SignInForm() {
               label="Confirm Password"
               type="password"
               id="passwordConfirm"
+              inputRef={confirmEl}
             />
             <Button
               type="submit"
@@ -56,6 +76,7 @@ export default function SignInForm() {
               variant="contained"
               color="primary"
               className={classes.submit}
+              disabled={fetching}
             >
               Sign Up
             </Button>