Added signin/signup page

frontend/src/components/Auth/Auth.js

-import React from 'react'
+import React, { useState, useContext } from 'react';
+import { useMutation } from '@apollo/client';
+import { useHistory } from 'react-router-dom';
+import { SIGNIN, SIGNUP } from '../../queries/queries.js';
+import { AuthContext } from '../../context/auth.js';
+import { Avatar, Button, Container, Paper, Grid, Typography } from '@material-ui/core';
+import useStyles from './styles';
+import LockOutlined from '@material-ui/icons/LockOutlined';
+import Input from './Input';
+import * as EmailValidator from 'email-validator';
+
 
 const Auth = () => {
+  const classes = useStyles();
+  const history = useHistory();
+  const context = useContext(AuthContext);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isSignup, setIsSignup] = useState(false);
+  const initialState = {
+    firstName: "",
+    lastName: "",
+    email: "",
+    password: "",
+    confirmPassword: ""
+  };
+  const [formData, setFormData] = useState(initialState);
+  const [signupUser, { data }] = useMutation(SIGNUP, {
+    update(proxy, result) {
+      context.signin(result.data.signup);
+      history.push("/");
+    },
+    onError(err) {
+      setErrorData({...errorData, email: { error: true, errorMessage: "Email already in use" }});
+    }
+  });
+  const [signinUser, { data: data2 }] = useMutation(SIGNIN, {
+    update(proxy, result) {
+      context.signin(result.data.signin);
+      history.push("/");
+    },
+    onError(err) {
+      setErrorData({...errorData, email: { error: true, errorMessage: "Invalid Details" }, password: { error: true, errorMessage: "Invalid Details" }});
+    }
+  });
+
+
+  const validationState = {
+    firstName: { error: false, errorMessage: ""},
+    lastName: { error: false, errorMessage: ""},
+    email: { error: false, errorMessage: ""},
+    password: { error: false, errorMessage: ""},
+    confirmPassword: { error: false, errorMessage: ""}
+  };
+  const [errorData, setErrorData] = useState(validationState);
+
+  const validate = () => {
+    let isValid = true;
+    let startingState = {
+      firstName: { error: false, errorMessage: ""},
+      lastName: { error: false, errorMessage: ""},
+      email: { error: false, errorMessage: ""},
+      password: { error: false, errorMessage: ""},
+      confirmPassword: { error: false, errorMessage: ""}
+    };
+
+    if (formData.email.trim().length === 0) {
+      startingState = { ...startingState, email: { error: true, errorMessage: "Required" } };
+      isValid = false;
+    }
+
+    if (!EmailValidator.validate(formData.email)) {
+      startingState = { ...startingState, email: { error: true, errorMessage: "Invalid email" } };
+      isValid = false;
+    }
+
+    if (formData.password.trim().length === 0) {
+      startingState = { ...startingState, password: { error: true, errorMessage: "Required" } };
+      isValid = false;
+    }
+
+    if (isSignup) {
+      if (formData.password.trim().length < 8) {
+        startingState = { ...startingState, password: { error: true, errorMessage: "Password should be at least 8 characters" } };
+        isValid = false;
+      }
+  
+      if (formData.confirmPassword.trim().length === 0) {
+        startingState = { ...startingState, confirmPassword: { error: true, errorMessage: "Required" } };
+        isValid = false;
+      }
+  
+      if (formData.password !== formData.confirmPassword) {
+        startingState = { ...startingState, confirmPassword: { error: true, errorMessage: "Passwords must match" } };
+        isValid = false;
+      }
+  
+      if (formData.firstName.trim().length === 0) {
+        startingState = { ...startingState, firstName: { error: true, errorMessage: "Required" } };
+        isValid = false;
+      }
+  
+      if (formData.lastName.trim().length === 0) {
+        startingState = { ...startingState, lastName: { error: true, errorMessage: "Required" } };
+        isValid = false;
+      }
+    }
+
+    setErrorData(startingState);
+    return isValid;
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (validate()) {
+      if (isSignup) {
+        signupUser({ variables: {
+            name: formData.firstName + " " + formData.lastName,
+            email: formData.email,
+            password: formData.password
+        }});
+      } else {
+        signinUser({ variables: {
+          email: formData.email,
+          password: formData.password
+        }});
+      }
+    }
+  };
+
+  const handleChange = (e) => {
+    setFormData({ ...formData, [e.target.name]: e.target.value })
+  }
+
+  const handleShowPassword = () => {
+    setShowPassword((prevState) => !prevState);
+  }
+
+  const switchMode = () => {
+    setIsSignup((prevState) => !prevState);
+    setShowPassword(false);
+    setErrorData(validationState);
+  }
+
   return (
-    <div>
-      TODO
-    </div>
+    <Container component="main" maxWidth="xs">
+      <Paper className={classes.paper} elevation={3}>
+        <Avatar className={classes.avatar}>
+          <LockOutlined  />
+        </Avatar>
+        <Typography variant="h5">{isSignup ? "Sign Up" : "Sign In"}</Typography>
+        <form className={classes.form} onSubmit={handleSubmit}>
+          <Grid container spacing={2}>
+            {
+              isSignup && (
+                <>
+                  <Input name="firstName" label="First Name" errors={errorData.firstName} handleChange={handleChange} autoFocus half/>
+                  <Input name="lastName" label="Last Name" errors={errorData.lastName} handleChange={handleChange} half/>
+                </>
+              )
+            }
+            <Input name="email" label="Email Address" errors={errorData.email} handleChange={handleChange} type="email" />
+            <Input name="password" label="Password" errors={errorData.password} handleChange={handleChange} handleShowPassword={handleShowPassword} type={showPassword ? "text" : "password"}/>
+            { isSignup && <Input name="confirmPassword" label="Confirm Password" errors={errorData.confirmPassword} handleChange={handleChange} type="password"/>}
+          </Grid>
+          <Button type="submit" fullWidth variant="contained" color="primary" className={classes.submit} onClick={validate}>
+            { isSignup ? "Sign Up" : "Sign In" }
+          </Button>
+          <Grid container justify="flex-end">
+            <Grid item>
+              <Button onClick={switchMode}>
+                { isSignup ? "Already have an account? Sign in" : "Dont have an account? Register"}
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </Paper>
+    </Container>
   )
 }
 
-export default Auth
+export default Auth;

frontend/src/components/Auth/Input.js

+import React from 'react';
+import { TextField, Grid, InputAdornment, IconButton } from '@material-ui/core'
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
+
+const Input = ({ half, name, label, errors, autoFocus, type, handleChange, handleShowPassword }) => {
+  return (
+    <Grid item xs={12} sm={half ? 6 : 12}>
+      <TextField 
+        name={name}
+        onChange={handleChange}
+        variant="outlined"
+        required
+        fullWidth
+        error={errors.error}
+        helperText={errors.errorMessage}
+        label={label}
+        autoFocus={autoFocus}
+        type={type}
+        InputProps={name === 'password' ? {
+          endAdornment: (
+            <InputAdornment position="end">
+              <IconButton onClick={handleShowPassword}>
+                {type === 'password' ? <Visibility/> : <VisibilityOff/>}
+              </IconButton>
+            </InputAdornment>
+          )
+        } : null}
+      />
+    </Grid>
+  )
+}
+
+export default Input

frontend/src/components/Auth/styles.js

+import { makeStyles } from '@material-ui/core/styles';
+
+export default makeStyles((theme) => ({
+  paper: {
+    marginTop: theme.spacing(8),
+    marginBottom: theme.spacing(8),
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    padding: theme.spacing(2),
+  },
+  root: {
+    '& .MuiTextField-root': {
+      margin: theme.spacing(1),
+    },
+  },
+  avatar: {
+    margin: theme.spacing(1),
+    backgroundColor: theme.palette.primary.main,
+  },
+  form: {
+    width: '100%',
+    marginTop: theme.spacing(3),
+  },
+  submit: {
+    margin: theme.spacing(3, 0, 2),
+  },
+  googleButton: {
+    marginBottom: theme.spacing(2),
+  },
+}));
\ No newline at end of file