Advertisement
fabiobiondi

React Pro - Real World App - Ch7. 07 - Usare le API di autenticazione

Mar 20th, 2023
1,441
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // pages/login/LoginPage.tsx
  2. import { useAuth } from '@/services/auth';
  3. import { ChangeEvent, FormEvent, useState } from 'react';
  4. import { useLogin } from './hooks/useLogin';
  5.  
  6. export function LoginPage() {
  7.  
  8.   const login = useAuth(state => state.login)
  9.  
  10.   const {
  11.     formData, isValid, changeHandler
  12.   } = useLogin();
  13.  
  14.  
  15.   function doLogin(e: FormEvent<HTMLFormElement>) {
  16.     e.preventDefault();
  17.     console.log(formData)
  18.     login(formData.username, formData.password);
  19.   }
  20.  
  21.  
  22.   return (
  23.     <div className="page-sm">
  24.       <h1 className="title">LOGIN</h1>
  25.  
  26.       <form className="flex flex-col gap-3" onSubmit={doLogin}>
  27.         <input
  28.           type="text"
  29.           placeholder="username"
  30.           value={formData.username}
  31.           onChange={changeHandler}
  32.           name="username"
  33.         />
  34.         <input
  35.           type="password"
  36.           placeholder="password"
  37.           value={formData.password}
  38.           onChange={changeHandler}
  39.           name="password"
  40.         />
  41.         <button disabled={!isValid} className="btn primary" type="submit">SIGN IN</button>
  42.       </form>
  43.  
  44.       <pre>{JSON.stringify(formData, null, 2)}</pre>
  45.     </div>
  46.   )
  47. }
  48.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement