diff --git a/pac-man-board-game/ClientApp/src/pages/login.tsx b/pac-man-board-game/ClientApp/src/pages/login.tsx index 874680a..7b6d4b5 100644 --- a/pac-man-board-game/ClientApp/src/pages/login.tsx +++ b/pac-man-board-game/ClientApp/src/pages/login.tsx @@ -1,4 +1,4 @@ -import React, {FC, FormEvent} from "react"; +import React, {FC, FormEvent, useState} from "react"; import {Button} from "../components/button"; import Input from "../components/input"; import {useSetAtom} from "jotai"; @@ -11,6 +11,7 @@ const Login: FC = () => { const setThisPlayer = useSetAtom(thisPlayerAtom); const navigate = useNavigate(); + const [error, setError] = useState<string | undefined>(); async function handleLogin(e: FormEvent<HTMLFormElement>): Promise<void> { e.preventDefault(); @@ -30,23 +31,27 @@ const Login: FC = () => { if (response.ok) { - const data = await response.json(); - console.debug("Login successful: ", data); - setThisPlayer(new Player(data as PlayerProps)); + const data = await response.json() as PlayerProps; + setThisPlayer(new Player(data)); navigate("/lobby"); } else { const data = await response.text(); - console.error("Error: ", data); - // TODO display error + console.error(data); + setError(data); } } - return ( // TODO prettify - <form onSubmit={handleLogin}> - <h1>Login</h1> - <Input name={"username"} placeholder={"Username"}/> - <Input name={"password"} type={"password"} placeholder={"Password"}/> + const username = "username", password = "password"; + + return ( + <form onSubmit={handleLogin} className={"container w-fit mx-auto flex flex-col gap-2"}> + <h1 className={"my-5"}>Login</h1> + {error && <p className={"text-red-500"}>{error}</p>} + <label htmlFor={username}>Username:</label> + <Input id={username} name={username} placeholder={"Username"} required/> + <label htmlFor={password}>Password:</label> + <Input id={password} name={password} type={"password"} placeholder={"Password"} required/> <Button type={"submit"}>Login</Button> </form> );