import React , { ChangeEvent , FormEvent } from 'react' ; import ErrorBox from '../components/error-box' ; import InfoBox from '../components/info-box' ; interface ForgottenPasswordState { success : boolean ; error : string ; email : string ; emailUsed : string ; } export default class ForgottenPassword extends React . Component < { } , ForgottenPasswordState > { constructor ( props ) { super ( props ) ; this . state = { error : undefined , success : undefined , email : undefined , emailUsed : undefined } ; } handleChange ( event ) { const { name , value } = event . currentTarget ; this . setState ( { [ name ] : value } as any ) ; } async handleSubmit ( event ) { event . preventDefault ( ) ; this . setState ( { error : undefined , success : undefined } ) ; const emailSent = this . state . email ; try { const res = await fetch ( '/api/users/password' , { method : 'PUT' , body : JSON . stringify ( { email : emailSent } ) , headers : { 'Content-Type' : 'application/json' } } ) ; const data = await res . json ( ) ; if ( data . error != undefined ) { this . setState ( { error : data . error } ) ; } else if ( data . success === true ) { this . setState ( { success : true , emailUsed : emailSent } ) ; } else { this . setState ( { error : 'Unexpected result.' } ) ; } } catch ( err ) { this . setState ( { error : 'Something went wrong.' } ) ; } } render ( ) { return ( < article > < section className = "main-col" > < h1 className = "h2" > Forgotten password < /h1> < p > Please provide the e - mail address associated with your account . A password reset link will be sent to your mailbox . < /p> < ErrorBox msg = { this . state . error } / > < InfoBox msg = "" > { this . state . success ? `If the email address is registered on Colouring London, a password reset link will be sent to ${ this . state . emailUsed }. Please check your inbox.` : null } < /InfoBox> < form onSubmit = { e => this . handleSubmit ( e ) } > < label htmlFor = "email" > E - mail < /label> < input name = "email" id = "email" className = "form-control" type = "email" placeholder = "Your e-mail address" required onChange = { e => this . handleChange ( e ) } / > < div className = "buttons-container" > < input type = "submit" value = "Request password reset" className = "btn btn-primary" / > < /div> < /form> < /section> < /article>); } }