React Pro - Real World App - Ch7. 01. Login Page - Form

// pages/login/LoginPage.tsx

import { ChangeEvent, FormEvent, useState } from 'react';

export function LoginPage() {
  const [formData, setFormData] = useState({ username: 'hello@fabiobiondi.io', password: 'Fabio12345'})

  function changeHandler(e: ChangeEvent<HTMLInputElement>) {
    const value = e.currentTarget.value;
    const name = e.currentTarget.name;
    setFormData(s => ({ ...s, [name]: value}))
  }

  const isValid = formData.username.length && formData.password.length


  async function doLogin(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    console.log(formData)
  }

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

{/*
      {error && <ServerError />}
*/}

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