import * as React from 'react' ; import { FaSignInAlt , FaExclamationCircle } from 'react-icons/fa' ; import Heading from 'YesterTech/Heading' ; import Notice from 'YesterTech/Notice' ; import Centered from 'YesterTech/Centered' ; import api from 'YesterTech/api' ; import { ReactFCNoChildren } from 'YesterTech/types' ; interface LoginFormProps { onAuthenticated ? ( user ) : any ; } const LoginForm = ( { onAuthenticated } ) : React . ReactElement => { const [ username , setUsername ] = React . useState ( '' ) ; const [ password , setPassword ] = React . useState ( '' ) ; const [ error , setError ] = React . useState ( null ) ; const [ loading , setLoading ] = React . useState ( false ) ; const [ showPassword , setShowPassword ] = React . useState ( false ) ; function handleLogin ( event ) { event . preventDefault ( ) ; setLoading ( true ) ; api . auth . login ( username , password ) . then ( ( user ) => { if ( typeof onAuthenticated === 'function' ) { onAuthenticated ( user ) ; } } ) . catch ( ( error ) => { setError ( error ) ; setLoading ( false ) ; } ) ; } function handleShowPassword ( ) { setShowPassword ( ! showPassword ) ; } return ( < Centered className = "spacing" > < Heading > Login < /Heading> < form onSubmit = { handleLogin } className = "spacing" > { error && ( < Notice type = "error" > < FaExclamationCircle /> < span > { error } < /span> < /Notice>)} < div className = "form-field" > < input aria - label = "Username" onChange = { ( e ) => setUsername ( e . target . value ) } type = "text" placeholder = "Username" required / > < /div> < div className = "form-field" > < input aria - label = "Password" onChange = { ( e ) => setPassword ( e . target . value ) } type = { showPassword ? 'text' : 'password' } placeholder = "Password" required / > < label > < input onChange = { handleShowPassword } defaultChecked = { showPassword } 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> < /Centered>); } ; export default LoginForm ;