Advertisement
fabiobiondi

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

Mar 17th, 2023 (edited)
807
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // pages/login/LoginPage.tsx
  2.  
  3. import { ChangeEvent, FormEvent, useState } from 'react';
  4.  
  5. export function LoginPage() {
  6.   const [formData, setFormData] = useState({ username: 'hello@fabiobiondi.io', password: 'Fabio12345'})
  7.  
  8.   function changeHandler(e: ChangeEvent<HTMLInputElement>) {
  9.     const value = e.currentTarget.value;
  10.     const name = e.currentTarget.name;
  11.     setFormData(s => ({ ...s, [name]: value}))
  12.   }
  13.  
  14.   const isValid = formData.username.length && formData.password.length
  15.  
  16.  
  17.   async function doLogin(e: FormEvent<HTMLFormElement>) {
  18.     e.preventDefault();
  19.     console.log(formData)
  20.   }
  21.  
  22.   return (
  23.     <div className="page-sm">
  24.       <h1 className="title">LOGIN</h1>
  25.  
  26. {/*
  27.       {error && <ServerError />}
  28. */}
  29.  
  30.       <div className="text-3xl my-4">Login as Admin</div>
  31.       <form onSubmit={doLogin} className=" flex flex-col gap-3">
  32.         <input type="text" placeholder="username" name="username" value={formData.username} onChange={changeHandler} />
  33.         <input type="password" placeholder="password" name="password" value={formData.password} onChange={changeHandler} />
  34.         <button className="btn primary" type="submit" disabled={!isValid}>SIGN IN</button>
  35.       </form>
  36.     </div>
  37.   )
  38. }
  39.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement