import { useForm } from '@inertiajs/inertia-react' ; import classNames from 'classnames' ; import React , { useRef , useState } from 'react' ; import useRoute from '@/Hooks/useRoute' ; import JetActionMessage from '@/Jetstream/ActionMessage' ; import JetActionSection from '@/Jetstream/ActionSection' ; import JetButton from '@/Jetstream/Button' ; import JetDialogModal from '@/Jetstream/DialogModal' ; import JetInput from '@/Jetstream/Input' ; import JetInputError from '@/Jetstream/InputError' ; import JetSecondaryButton from '@/Jetstream/SecondaryButton' ; import { Session } from '@/types' ; interface Props { sessions : Session [ ] ; } export default function LogoutOtherBrowserSessions ( { sessions } ) { const [ confirmingLogout , setConfirmingLogout ] = useState ( false ) ; const route = useRoute ( ) ; const passwordRef = useRef < HTMLInputElement > ( null ) ; const form = useForm ( { password : '' , } ) ; function confirmLogout ( ) { setConfirmingLogout ( true ) ; setTimeout ( ( ) => passwordRef . current ?. focus ( ) , 250 ) ; } function logoutOtherBrowserSessions ( ) { form . delete ( route ( 'other-browser-sessions.destroy' ) , { preserveScroll : true , onSuccess : ( ) => closeModal ( ) , onError : ( ) => passwordRef . current ?. focus ( ) , onFinish : ( ) => form . reset ( ) , } ) ; } function closeModal ( ) { setConfirmingLogout ( false ) ; form . reset ( ) ; } return ( < JetActionSection title = { 'Browser Sessions' } description = { 'Manage and log out your active sessions on other browsers and devices.' } > < div className = "max-w-xl text-sm text-gray-600" > If necessary , you may log out of all of your other browser sessions across all of your devices . Some of your recent sessions are listed below ; however , this list may not be exhaustive . If you feel your account has been compromised , you should also update your password . < /div> { } { sessions . length > 0 ? ( < div className = "mt-5 space-y-6" > { sessions . map ( ( session , i ) => ( < div className = "flex items-center" key = { i } > < div > { session . agent . is_desktop ? ( < svg fill = "none" strokeLinecap = "round" strokeLinejoin = "round" strokeWidth = "2" viewBox = "0 0 24 24" stroke = "currentColor" className = "w-8 h-8 text-gray-500" > < path d = "M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" > < /path> < /svg>) : (<svg xmlns="http:/ / www . w3 . org / 2000 / svg " viewBox=" 0 0 24 24 " strokeWidth=" 2 " stroke=" currentColor " fill=" none " strokeLinecap=" round " strokeLinejoin=" round " className=" w - 8 h - 8 text - gray - 500 "> < path d = "M0 0h24v24H0z" stroke = "none" > < /path> < rect x = "7" y = "4" width = "10" height = "16" rx = "1" > < /rect> < path d = "M11 5h2M12 17v.01" > < /path> < /svg>)} < /div> < div className = "ml-3" > < div className = "text-sm text-gray-600" > { session . agent . platform } - { session . agent . browser } < /div> < div > < div className = "text-xs text-gray-500" > { session . ip_address } , { session . is_current_device ? ( < span className = "text-green-500 font-semibold" > This device < / span > ) : ( < span > Last active { session . last_active } < /span>)} < /div> < /div> < /div> < /div>))} < /div>) : null} < div className = "flex items-center mt-5" > < JetButton onClick = { confirmLogout } > Log Out Other Browser Sessions < /JetButton> < JetActionMessage on = { form . recentlySuccessful } className = "ml-3" > Done . < /JetActionMessage> < /div> { } < JetDialogModal isOpen = { confirmingLogout } onClose = { closeModal } > < JetDialogModal . Content title = { 'Log Out Other Browser Sessions' } > Please enter your password to confirm you would like to log out of your other browser sessions across all of your devices . < div className = "mt-4" > < JetInput type = "password" className = "mt-1 block w-3/4" placeholder = "Password" ref = { passwordRef } value = { form . data . password } onChange = { e => form . setData ( 'password' , e . currentTarget . value ) } / > < JetInputError message = { form . errors . password } className = "mt-2" / > < /div> < /JetDialogModal.Content> < JetDialogModal . Footer > < JetSecondaryButton onClick = { closeModal } > Cancel < /JetSecondaryButton> < JetButton onClick = { logoutOtherBrowserSessions } className = { classNames ( 'ml-2' , { 'opacity-25' : form . processing } ) } disabled = { form . processing } > Log Out Other Browser Sessions < /JetButton> < /JetDialogModal.Footer> < /JetDialogModal> < /JetActionSection>); }