simple login implementation

src/components/Login.tsx

@@ -1,19 +1,71 @@
 import React from "react"
+import { useState } from "react"
+import { RouteComponentProps } from "react-router-dom"
+import { useLoginMutation } from "../generated/graphql"
+
+const Login: React.FC<RouteComponentProps> = (props) => {
+	const [username,setUsername] = useState("")
+	const [password,setPassword] = useState("")
+
+	const [loginFailed,setLoginFailed] = useState(false)
+
+	const [loginMutation] = useLoginMutation()
 
-const Login: React.FC = () => {
 	return (
 		<div className="flex justify-center h-screen items-center">
 			<div>
-				<form onSubmit={(e)=>{
+				<form onSubmit={async (e)=>{
 					e.preventDefault()
+
+					const result =  await loginMutation({
+						variables:{
+							username: username,
+							password: password
+						}
+					})
+					
+					const successful = result.data?.login.successful
+
+					if (!successful){
+						setLoginFailed(true)
+						return
+					}
+
+					const token = result.data?.login.token
+
+					if (token){
+						const response = await fetch("/api/cookie",{
+							method:"POST",
+							body: token
+						})
+
+						if (response.ok){
+							// Login successful
+							props.history.push("/f/")
+						}else{
+							setLoginFailed(true)
+						}
+					}
 				}} >
+					{loginFailed && 
+						<div className="text-red-600 mb-4" >
+							<div className="font-bold" >
+								Login failed
+							</div>
+							<div>
+								Wrong username or password
+							</div>
+						</div>
+					}
 					<input type="text" placeholder="Username"
 						className="block my-2 text-input"
 						required
+						onChange={(e)=>setUsername(e.target.value)}
 					/>
 					<input type="password" placeholder="Password" 
 						className="block my-2 text-input"
 						required
+						onChange={(e)=>setPassword(e.target.value)}
 					/>
 					<button className="block my-2 w-full" >Login</button>
 				</form>