83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
'use client'
|
||
|
||
import PropTypes from 'prop-types'
|
||
import {useState} from 'react'
|
||
import {signOut} from 'next-auth/react'
|
||
import {useRouter} from 'next/navigation'
|
||
import Box from '@mui/material/Box'
|
||
import Stack from '@mui/material/Stack'
|
||
import Fab from '@mui/material/Fab'
|
||
import {styled} from '@mui/material/styles'
|
||
import Tooltip, {tooltipClasses} from '@mui/material/Tooltip'
|
||
import LogoutIcon from '@mui/icons-material/Logout'
|
||
import LoginIcon from '@mui/icons-material/Login'
|
||
import PersonAddIcon from '@mui/icons-material/PersonAdd'
|
||
import ConfirmationAlert from './confirmation-alert.js'
|
||
|
||
const LightTooltip = styled(({className, ...props}) => (
|
||
<Tooltip {...props} classes={{popper: className}} />
|
||
))(({theme}) => ({
|
||
[`& .${tooltipClasses.tooltip}`]: {
|
||
backgroundColor: theme.palette.common.white,
|
||
color: 'rgba(0, 0, 0, 0.87)',
|
||
boxShadow: theme.shadows[1],
|
||
fontSize: 15,
|
||
},
|
||
}))
|
||
|
||
export default function Sign({session, navButton}) {
|
||
const router = useRouter()
|
||
const [isOpen, setIsOpen] = useState(false)
|
||
|
||
const handleSignout = () => {
|
||
setIsOpen(false)
|
||
signOut()
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 2}}>
|
||
{session ? (
|
||
<Stack direction='row' spacing={2}>
|
||
<LightTooltip title='Se déconnecter' placement='right'>
|
||
<Fab size='large' color='error' onClick={() => setIsOpen(true)}>
|
||
<LogoutIcon fontSize='large' />
|
||
</Fab>
|
||
</LightTooltip>
|
||
<LightTooltip title={navButton.title} placement='right'>
|
||
<Fab sx={{mr: 3}} size='large' color={navButton.color} onClick={() => router.push(navButton.path)}>
|
||
{navButton.icon}
|
||
</Fab>
|
||
</LightTooltip>
|
||
</Stack>
|
||
) : (
|
||
<Stack direction='row' spacing={2}>
|
||
<LightTooltip title='Se connecter' placement='left'>
|
||
<Fab size='large' color='success' onClick={() => router.push('/login')}>
|
||
<LoginIcon fontSize='large' />
|
||
</Fab>
|
||
</LightTooltip>
|
||
<LightTooltip title='S’enregistrer' placement='right'>
|
||
<Fab size='large' color='success' onClick={() => router.push('/register')}>
|
||
<PersonAddIcon fontSize='large' />
|
||
</Fab>
|
||
</LightTooltip>
|
||
</Stack>
|
||
)}
|
||
</Box>
|
||
<ConfirmationAlert
|
||
title='Se déconnecter'
|
||
description='Vous êtes sur le point de vous déconnecter. Voulez-vous continuer ?'
|
||
isOpen={isOpen}
|
||
setIsOpen={setIsOpen}
|
||
handleConfirmation={handleSignout}
|
||
/>
|
||
</>
|
||
)
|
||
}
|
||
|
||
Sign.propTypes = {
|
||
session: PropTypes.object,
|
||
navButton: PropTypes.object.isRequired
|
||
}
|