Add signout confirmation alert

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,30 +27,45 @@ 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()}>
-            <LogoutIcon fontSize='large' />
-          </Fab>
-        </LightTooltip>
-      ) : (
-        <Stack direction='row' spacing={2}>
-          <LightTooltip title='Se connecter' placement='left'>
-            <Fab size='large' color='success' onClick={() => router.push('/login')}>
-              <LoginIcon fontSize='large' />
+    <>
+      <Box sx={{display: 'flex', justifyContent: session ? 'start' : 'center', marginTop: 1}}>
+        {session ? (
+          <LightTooltip title='Se déconnecter' placement='right'>
+            <Fab size='large' color='error' onClick={() => setIsOpen(true)}>
+              <LogoutIcon 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>
+        ) : (
+          <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}
+      />
+    </>
   )
 }