import React , { useState , useRef , useReducer } from 'react' ; import { FaSignInAlt , FaExclamationCircle } from 'react-icons/fa' ; import { User } from 'ProjectPlanner/types' ; import { Heading } from 'ProjectPlanner/Heading' ; import { Notice } from 'ProjectPlanner/Notice' ; import { api } from 'ProjectPlanner/api' ; type Props = { onAuthenticated ( user ) : void ; } ; export const LoginForm = ( { onAuthenticated } ) => { const [ error , setError ] = useState ( null ) ; const [ loading , setLoading ] = useState ( false ) ; function handleLogin ( event ) { event . preventDefault ( ) ; setLoading ( true ) ; api . auth . login ( 'username' , 'password' ) . then ( ( user ) => { onAuthenticated ( user ) ; } ) . catch ( ( error ) => { setError ( error ) ; setLoading ( false ) ; } ) ; } function handleShowPassword ( event ) { } return ( < div > < Heading > Login < /Heading> < form onSubmit = { handleLogin } className = "spacing" > { error && ( < Notice type = "error" > < FaExclamationCircle /> < span > { error } < /span> < /Notice>)} < div > < input required className = "form-field" aria - label = "Username" type = "text" placeholder = "Username" / > < /div> < div > < input required className = "form-field" aria - label = "Password" type = "password" placeholder = "Password" / > < label > < input className = "passwordCheckbox" type = "checkbox" / > show password < /label> < /div> < footer > < button type = "submit" className = "button" > { ! loading ? ( < > < FaSignInAlt /> <span>Login</span > < />) : (<span>Loading ...</span > ) } < /button> < /footer> < /form> < /div>); } ; export default LoginForm ;