import { useState } from 'react' ; import { ActionableModal } from '../ui' ; import { useCMS } from 'tinacms' ; interface Props { autoAuthKey ? : string ; } const AutoAuthModal = ( { autoAuthKey = 'autoAuth' } ) => { const cms = useCMS ( ) ; const [ showAuthModal , setShowAuthModal ] = useState ( typeof window !== 'undefined' && window . location . href . includes ( autoAuthKey ) ) ; const cancelAuth = ( ) => { window . history . replaceState ( { } , document . title , window . location . href . split ( '?' ) [ 0 ] ) ; setShowAuthModal ( false ) ; } ; if ( ! showAuthModal ) { return null ; } return ( < ActionableModal title = "Authentication" message = "To edit this site, you first need to be authenticated." actions = { [ { name : 'Continue' , action : cms . enable , } , { name : 'Cancel' , action : cancelAuth , } , ] } / > ) ; } ; export default AutoAuthModal ;