Logout confirmation modal (#325)

.github/workflows/canopeum_deploy.yml

@@ -28,7 +28,7 @@ on:
 jobs:
   GetDateTime:
     runs-on: ubuntu-latest
-    if:  ${{ inputs.deploy_frontend && inputs.deploy_backend }}
+    if:  ${{ github.event_name == 'push' || (inputs.deploy_frontend && inputs.deploy_backend) }}
     outputs:
       DATETIME: ${{ steps.datetime.outputs.DATETIME }}
     steps:
@@ -39,7 +39,7 @@ jobs:
   BuildFrontend:
     name: Build & Deploy Frontend
     runs-on: ubuntu-latest
-    if:  ${{ inputs.deploy_frontend }}
+    if:  ${{ github.event_name == 'push' || inputs.deploy_frontend }}
     needs: [GetDateTime]
     defaults:
       run:
@@ -68,7 +68,7 @@ jobs:
   BuildBackend:
     name: Build & Deploy Backend
     runs-on: ubuntu-latest
-    if:  ${{ inputs.deploy_backend }}
+    if:  ${{ github.event_name == 'push' || inputs.deploy_backend }}
     needs: [GetDateTime]
     defaults:
       run:

canopeum_frontend/src/components/Navbar.tsx

@@ -58,7 +58,7 @@ const Navbar = () => {
     void changeLanguage(newLanguage)
   }
 
-  const { isAuthenticated, logout } = useContext(AuthenticationContext)
+  const { isAuthenticated, showLogoutModal } = useContext(AuthenticationContext)
 
   return (
     <nav className='navbar sticky-top navbar-expand-lg navbar-dark bg-primary'>
@@ -127,7 +127,7 @@ const Navbar = () => {
               ? (
                 <button
                   className='nav-item btn btn-primary'
-                  onClick={logout}
+                  onClick={showLogoutModal}
                   type='button'
                 >
                   {translate('auth.log-out')}

canopeum_frontend/src/components/context/AuthenticationContext.tsx

@@ -1,6 +1,8 @@
 import type { FunctionComponent, ReactNode } from 'react'
 import { createContext, memo, useCallback, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
 
+import ConfirmationDialog from '@components/dialogs/ConfirmationDialog'
 import useApiClient from '@hooks/ApiClientHook'
 import type { User } from '@services/api'
 import { STORAGE_ACCESS_TOKEN_KEY, STORAGE_REFRESH_TOKEN_KEY } from '@utils/auth.utils'
@@ -10,6 +12,7 @@ type IAuthenticationContext = {
   authenticate: (user: User) => void,
   updateUser: (user: User) => void,
   logout: () => void,
+  showLogoutModal: () => void,
   loadSession: () => void,
   isAuthenticated: boolean,
   isSessionLoaded: boolean,
@@ -21,6 +24,7 @@ export const AuthenticationContext = createContext<IAuthenticationContext>({
   authenticate: (_: User) => {/* empty */},
   updateUser: (_: User) => {/* empty */},
   logout: () => {/* empty */},
+  showLogoutModal: () => {/* empty */},
   loadSession: () => {/* empty */},
   isAuthenticated: false,
   isSessionLoaded: false,
@@ -32,10 +36,16 @@ const AuthenticationContextProvider: FunctionComponent<{ readonly children?: Rea
   props => {
     const [user, setUser] = useState<User>()
     const [isSessionLoaded, setIsSessionLoaded] = useState(false)
-    const [isInitiated, setIsInitiated] = useState<boolean>(false)
+    const [isInitiated, setIsInitiated] = useState(false)
+    const [logoutModalShown, setLogoutModalShown] = useState(false)
     const isInitiatedRef = useRef(isInitiated)
-
     const { getApiClient } = useApiClient()
+    const { t } = useTranslation()
+
+    const handleLogoutModalClose = (proceed: boolean) => {
+      if (proceed) logout()
+      setLogoutModalShown(false)
+    }
 
     const loadSession = useCallback(() => setIsSessionLoaded(true), [setIsSessionLoaded])
 
@@ -80,6 +90,8 @@ const AuthenticationContextProvider: FunctionComponent<{ readonly children?: Rea
       setUser(undefined)
     }, [setUser])
 
+    const showLogoutModal = () => setLogoutModalShown(true)
+
     const context = useMemo<IAuthenticationContext>(() => (
       {
         currentUser: user,
@@ -90,6 +102,7 @@ const AuthenticationContextProvider: FunctionComponent<{ readonly children?: Rea
         updateUser,
         loadSession,
         logout,
+        showLogoutModal,
       }
     ), [initAuth, authenticate, updateUser, loadSession, user, logout, isSessionLoaded])
 
@@ -98,6 +111,12 @@ const AuthenticationContextProvider: FunctionComponent<{ readonly children?: Rea
         value={context}
       >
         {props.children}
+        <ConfirmationDialog
+          actions={['ok', 'cancel']}
+          onClose={handleLogoutModalClose}
+          open={logoutModalShown}
+          title={t('auth.log-out-confirmation')}
+        />
       </AuthenticationContext.Provider>
     )
   },

canopeum_frontend/src/components/dialogs/ConfirmationDialog.tsx

@@ -6,7 +6,7 @@ type ConfirmationAction = 'cancel' | 'delete' | 'ok'
 
 type Props = {
   readonly actions: ConfirmationAction[],
-  readonly children: ReactNode,
+  readonly children?: ReactNode,
   readonly onClose: (proceed: boolean) => void,
   readonly open: boolean,
   readonly title: string,
@@ -57,14 +57,10 @@ const ConfirmationDialog = ({ actions, children, onClose, open, title }: Props)
   }
 
   return (
-    <Dialog fullWidth maxWidth='xs' onClose={() => onClose(false)} open={open}>
+    <Dialog onClose={() => onClose(false)} open={open}>
       <DialogTitle>{title}</DialogTitle>
-      <DialogContent>
-        {children}
-      </DialogContent>
-      <DialogActions>
-        {actions.map(action => renderActionButton(action))}
-      </DialogActions>
+      <DialogContent>{children}</DialogContent>
+      <DialogActions>{actions.map(action => renderActionButton(action))}</DialogActions>
     </Dialog>
   )
 }

canopeum_frontend/src/locale/en/auth.ts

@@ -18,6 +18,7 @@ export default {
   'password-error-must-match': 'Passwords do not match',
   'log-in': 'Log In',
   'log-out': 'Log Out',
+  'log-out-confirmation': 'Are you sure you want to log out?',
   'sign-up': 'Sign Up',
   'create-account': 'Create Account',
   'already-have-an-account': 'Already have an account?',

canopeum_frontend/src/locale/fr/auth.ts

@@ -20,6 +20,7 @@ export default {
   'password-error-must-match': 'Passwords do not match',
   'log-in': 'Se Connecter',
   'log-out': 'Se Déconnecter',
+  'log-out-confirmation': 'Est-vous certain de vouloir vous déconnecter?',
   'sign-up': "S'inscrire",
   'create-account': 'Créer mon compte',
   'already-have-an-account': 'Vous avez déjà un compte?',

canopeum_frontend/src/pages/UserManagement.tsx

@@ -38,13 +38,13 @@ const tabs: { type: UserManagementTab, translationKey: string, roles?: RoleEnum[
 
 const UserManagement = () => {
   const { t: translate } = useTranslation()
-  const { logout, currentUser } = useContext(AuthenticationContext)
+  const { showLogoutModal, currentUser } = useContext(AuthenticationContext)
   const navigate = useNavigate()
   const location = useLocation()
 
   const onTabClick = (tabPath: UserManagementTab) => {
     if (tabPath === 'logout') {
-      logout()
+      showLogoutModal()
 
       return
     }