import React, { useEffect } from "react" import useFormFields from "../hooks/useFormFields" import { gql, useMutation } from "@apollo/client" import uuid from "uuid/v4" import { setAuthToken, setRefreshToken } from "../services/auth" import { navigate } from "gatsby" import { useAuth } from "../hooks/useAuth" const LOGIN_USER = gql` mutation LoginUser($input: LoginInput!) { login(input: $input) { authToken refreshToken } } ` const labelStyle = { marginTop: 16 } const LoginForm = () => { const auth = useAuth(); useEffect(() => { if (auth.isLoggedIn()) { navigate(`/dashboard/`, {replace: true}) } }, [auth]) const [loginUser, { data: loginData }] = useMutation(LOGIN_USER) const [fields, handleFieldChange] = useFormFields({ username: "", password: "", }) const handleSubmit = (e) => { e.preventDefault() loginUser({ variables: { input: { clientMutationId: uuid(), username: fields.username, password: fields.password, }, }, }).then((response) => { // console.log("Response", response) const { login } = response.data if(login) { setAuthToken(login.authToken) setRefreshToken(login.refreshToken, () => navigate("/dashboard/")) } }) } return ( <form method="post" style={{ display: "flex", flexDirection: "column", alignItems: "flex-start" }} onSubmit={handleSubmit}> <div style={{display: "flex", flexDirection: "column"}}> <label htmlFor="username" style={labelStyle}><b>Email</b></label> <input onChange={handleFieldChange} value={fields.username} style={{ marginRight: 16 }} type="text" placeholder="Enter username" name="username" required/> <label htmlFor="password" style={labelStyle}><b>Password</b></label> <input onChange={handleFieldChange} value={fields.password} type="password" placeholder="Enter Password" name="password" required/> </div> <button style={{ margin: "16px 0" }} type="submit">Login</button> </form> ) } export default LoginForm