Sign Up: The Form in JavaScript

The register route is ready in server/app.js. Now the page needs a form that sends to it. In React, a field is controlled: its value comes from state, and its onChange puts each keystroke back into state. The label's htmlFor names the input's id, which is how the check finds the field "Email". A gift-card field, for example:

const [giftName, setGiftName] = useState("");

<label htmlFor="gift-name">Name on the card</label>
<input id="gift-name" value={giftName} onChange={(event) => setGiftName(event.target.value)} />

On submit, the form calls api() from client/src/api.js. It sends the body as JSON and, when the answer is not OK, it throws an ApiError whose message is the server's error text. So the line after the await runs only on success, and the catch gets the 400 or 409 message to show. useNavigate() gives a navigate function that moves the visitor to another page of the app.

The check types into the form and clicks "Create account" three times:

> click "Create account"   (ana@example.com, short)
  request: POST /api/register … -> 400
  + alert: The password needs at least 8 characters
> click "Create account"   (ana@example.com, teapot-fan-22)
  request: POST /api/register … -> 409
  - alert: The password needs at least 8 characters
  + alert: This email already has an account
> click "Create account"   (ben@example.com, teapot-fan-22)
  request: POST /api/register … -> 201
  + form "Log in"
> the address bar
  /login

Your task: in client/src/pages/RegisterPage.jsx, add state for the email and the password and the two controlled inputs. In the try, post them with api() and then go to /login. In the catch, keep the message in an error state and show it under the button in a <p role="alert">, only when there is one.

Assignment
Follow the Coding Tutorial to finish the sign-up form: the fields, the request and the move to /login, then the error message.

Hint
Each input needs both value and onChange: with only value, typing changes nothing. role="alert" is what makes the check print the paragraph as alert:.