React Pro - Real World App - Ch7. 08. Gestione Errori nel Login

// pages/login/LoginPage.tsx
import { ServerError } from '@/shared/';
import { ChangeEvent, FormEvent, useState } from 'react';
import { selectAuthError, useAuth } from '@/services/auth';
import { useLogin } from './hooks/useLogin';

export function LoginPage() {

  const error = useAuth(selectAuthError)
  const login = useAuth(state => state.login);

  const {
    formData, isValid, changeHandler
  } = useLogin();


  function doLogin(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    console.log(formData)
    login(formData.username, formData.password);
  }

  return (
    <div className="page-sm">
      <h1 className="title">LOGIN</h1>

      {error && <ServerError />}

      <form className="flex flex-col gap-3" onSubmit={doLogin}>
        <input
          type="text"
          placeholder="username"
          value={formData.username}
          onChange={changeHandler}
          name="username"
        />
        <input
          type="password"
          placeholder="password"
          value={formData.password}
          onChange={changeHandler}
          name="password"
        />
        <button disabled={!isValid} className="btn primary" type="submit">SIGN IN</button>
      </form>

      <pre>{JSON.stringify(formData, null, 2)}</pre>
    </div>
  )
}