Add signout confirmation alert

components/session/confirmation-alert.js

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
+
+export default function ConfirmationAlert({title, description, isOpen, setIsOpen, handleConfirmation}) {
+  return (
+    <Dialog
+      open={isOpen}
+      aria-labelledby={title}
+      aria-describedby={description}
+      onClose={() => setIsOpen(false)}
+    >
+      <DialogTitle id={title}>
+        {title}
+      </DialogTitle>
+      <DialogContent>
+        <DialogContentText sx={{color: 'white'}} id={description}>
+          {description}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button variant='contained' color='success' onClick={() => setIsOpen(false)}>Annuler</Button>
+        <Button autoFocus variant='contained' color='error' onClick={handleConfirmation}>
+          Valider
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}
+
+ConfirmationAlert.propTypes = {
+  title: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  setIsOpen: PropTypes.func.isRequired,
+  handleConfirmation: PropTypes.func.isRequired
+}

components/session/sign.js

@@ -1,6 +1,7 @@
 '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'
@@ -11,6 +12,7 @@ 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}} />
@@ -25,12 +27,19 @@ const LightTooltip = styled(({className, ...props}) => (
 
 export default function Sign({session}) {
   const router = useRouter()
+  const [isOpen, setIsOpen] = useState(false)
+
+  const handleSignout = () => {
+    setIsOpen(false)
+    signOut()
+  }
 
   return (
+    <>
       <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 1}}>
         {session ? (
           <LightTooltip title='Se déconnecter' placement='right'>
-          <Fab size='large' color='error' onClick={() => signOut()}>
+            <Fab size='large' color='error' onClick={() => setIsOpen(true)}>
               <LogoutIcon fontSize='large' />
             </Fab>
           </LightTooltip>
@@ -49,6 +58,14 @@ export default function Sign({session}) {
           </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}
+      />
+    </>
   )
 }