1import React from "react";
 2import { useNavigate } from "react-router-dom";
 3
 4import { Callout } from "./Callout";
 5import { useUser } from "./useUser";
 6
 7export const Register = () => {
 8	const { register } = useUser();
 9	const navigate = useNavigate();
10	const [username, setUsername] = React.useState("");
11	const [password, setPassword] = React.useState("");
12	const [submitting, setSubmitting] = React.useState(false);
13	const [failed, setFailed] = React.useState(false);
14
15	return (
16		<>
17			<h1>Register</h1>
18			<form
19				onSubmit={async (e) => {
20					e.preventDefault();
21					if (submitting) {
22						return;
23					}
24					setSubmitting(true);
25					setFailed(false);
26					const ok = await register(username, password);
27					setSubmitting(false);
28					if (ok) {
29						navigate("/login");
30					} else {
31						setFailed(true);
32					}
33				}}
34			>
35				{failed && <Callout>Invalid username or password</Callout>}
36				<label>
37					<span>Username</span>
38					<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} />
39				</label>
40				<label>
41					<span>Password</span>
42					<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
43				</label>
44				<input type="submit" value="Register" />
45			</form>
46		</>
47	);
48};