@visns-studio/visns-components 5.4.9 → 5.4.11

package/README.md

@@ -102,6 +102,7 @@ The main component that handles authentication and routing.
     navigation={navigationConfig} // Navigation configuration
     routeConfig={routeConfig} // Route configuration
     themeType="primary" // Theme type: 'primary', 'secondary', etc.
+    enforce2FA={false} // Whether to enforce 2FA (default: false)
 />
 ```
 
@@ -341,6 +342,31 @@ Toast notification component.
 4. User enters the verification code
 5. If the code is valid, the user is authenticated and redirected to the main application
 
+### Enforcing 2FA
+
+You can enforce 2FA for all users by setting the `enforce2FA` prop to `true` on the GenericAuth component:
+
+```jsx
+<GenericAuth
+    // ... other props
+    enforce2FA={true}
+/>
+```
+
+When 2FA enforcement is enabled:
+
+1. Users without 2FA enabled will see a non-dismissible dialog prompting them to set up 2FA
+2. The dialog will redirect them to the profile page with the 2FA tab open when they click the button
+3. Users cannot dismiss or skip this dialog, ensuring they set up 2FA
+4. The dialog uses an error icon to indicate the requirement
+5. The dialog will appear on every page load and route change until 2FA is set up
+6. The dialog will not appear when the user is already on the profile page with the 2FA tab open
+
+When 2FA enforcement is disabled (default):
+
+1. No alert is shown to users without 2FA
+2. Users can still enable 2FA voluntarily through their profile page
+
 ### API Integration for 2FA
 
 #### Login Endpoint Response (when 2FA is required)

package/package.json

@@ -15,6 +15,7 @@
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "axios": "^1.8.4",
+        "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
         "fabric": "^6.6.2",
         "file-saver": "^2.0.5",
@@ -53,6 +54,7 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
+        "sweetalert2": "^11.17.2",
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
@@ -79,7 +81,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.9",
+    "version": "5.4.11",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [
@@ -100,5 +102,5 @@
         "url": "https://github.com/visnsstudio/visns-components/issues"
     },
     "homepage": "https://github.com/visnsstudio/visns-components#readme",
-    "packageManager": "yarn@4.4.0"
+    "packageManager": "yarn@4.7.0"
 }

package/src/components/cms/DropZone.jsx

@@ -6,6 +6,7 @@ import { CircleX, File, TrashCan } from 'akar-icons';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';
+import imageCompression from 'browser-image-compression';
 
 import 'react-confirm-alert/src/react-confirm-alert.css';
 

package/src/components/crm/Form.jsx

@@ -11,6 +11,7 @@ import _ from 'lodash';
 import ReactDataGrid from '@inovua/reactdatagrid-community';
 import { CircleX } from 'akar-icons';
 import { confirmAlert } from 'react-confirm-alert';
+import imageCompression from 'browser-image-compression';
 
 import '@inovua/reactdatagrid-community/index.css';
 import 'react-confirm-alert/src/react-confirm-alert.css';
@@ -22,6 +23,49 @@ import Table from './DataGrid';
 
 import styles from './styles/Form.module.scss';
 
+// Helper function to check if a file is an image and optimize it if needed
+const optimizeImageIfNeeded = async (file) => {
+    // Check if the file is an image
+    const isImage = file.type.startsWith('image/');
+
+    if (isImage) {
+        // Image compression options
+        const options = {
+            maxSizeMB: 1, // Max file size in MB
+            maxWidthOrHeight: 1920, // Max width or height in pixels
+            useWebWorker: true,
+            fileType: file.type,
+        };
+
+        try {
+            // Show optimization toast
+            const optimizingToastId = toast.info(`Optimizing ${file.name}...`, {
+                autoClose: false,
+            });
+
+            // Compress the image
+            const compressedFile = await imageCompression(file, options);
+
+            // Update toast
+            toast.update(optimizingToastId, {
+                render: `${file.name} optimized successfully!`,
+                type: 'success',
+                autoClose: 1000,
+            });
+
+            // Return the compressed file
+            return compressedFile;
+        } catch (error) {
+            console.error('Error optimizing image:', error);
+            // If optimization fails, return the original file
+            return file;
+        }
+    }
+
+    // If not an image, return the original file
+    return file;
+};
+
 function Form({
     ajaxSetting,
     api,
@@ -701,6 +745,10 @@ function Form({
                         if (Array.isArray(formData[fileKey])) {
                             const uploadPromises = formData[fileKey].map(
                                 async (file) => {
+                                    // Optimize image if it's an image file
+                                    const optimizedFile =
+                                        await optimizeImageIfNeeded(file);
+
                                     const toastId = toast.info(
                                         `Uploading ${file.name}`,
                                         {
@@ -709,14 +757,19 @@ function Form({
                                         }
                                     );
 
-                                    const fileRes = await Vapor.store(file, {
-                                        progress: (progress) => {
-                                            setUploadProgress(progress * 100);
-                                            toast.update(toastId, {
-                                                progress,
-                                            });
-                                        },
-                                    });
+                                    const fileRes = await Vapor.store(
+                                        optimizedFile,
+                                        {
+                                            progress: (progress) => {
+                                                setUploadProgress(
+                                                    progress * 100
+                                                );
+                                                toast.update(toastId, {
+                                                    progress,
+                                                });
+                                            },
+                                        }
+                                    );
 
                                     toast.update(toastId, {
                                         render: `${file.name} uploaded successfully!`,
@@ -729,7 +782,7 @@ function Form({
                                         key: fileRes.key,
                                         bucket: fileRes.bucket,
                                         filename: file.name,
-                                        filesize: file.size,
+                                        filesize: optimizedFile.size,
                                         extension: fileRes.extension,
                                         file_relationship: fileKey,
                                         fileable_field:
@@ -742,6 +795,11 @@ function Form({
                                 uploadPromises
                             );
                         } else {
+                            // Optimize image if it's an image file
+                            const optimizedFile = await optimizeImageIfNeeded(
+                                formData[fileKey]
+                            );
+
                             const toastId = toast.info(
                                 `Uploading ${formData[fileKey].name}`,
                                 {
@@ -750,17 +808,14 @@ function Form({
                                 }
                             );
 
-                            const fileRes = await Vapor.store(
-                                formData[fileKey],
-                                {
-                                    progress: (progress) => {
-                                        setUploadProgress(progress * 100);
-                                        toast.update(toastId, {
-                                            progress,
-                                        });
-                                    },
-                                }
-                            );
+                            const fileRes = await Vapor.store(optimizedFile, {
+                                progress: (progress) => {
+                                    setUploadProgress(progress * 100);
+                                    toast.update(toastId, {
+                                        progress,
+                                    });
+                                },
+                            });
 
                             toast.update(toastId, {
                                 render: `${formData[fileKey].name} uploaded successfully!`,
@@ -772,7 +827,7 @@ function Form({
                             formData['key'] = fileRes.key;
                             formData['bucket'] = fileRes.bucket;
                             formData['filename'] = formData[fileKey].name;
-                            formData['filesize'] = formData[fileKey].size;
+                            formData['filesize'] = optimizedFile.size;
                             formData['extension'] = fileRes.extension;
                             formData['file_relationship'] = fileKey;
                             formData['fileable_field'] =
@@ -930,8 +985,9 @@ function Form({
                     method,
                     payload = {};
 
-                if (ajaxSetting?.where) {
-                    const getDataId = () => {
+                // Helper function to get dataId from ajaxSetting
+                const getDataId = () => {
+                    if (ajaxSetting?.where) {
                         for (const item of ajaxSetting.where) {
                             if (
                                 item.hasOwnProperty('urlParam') &&
@@ -940,9 +996,9 @@ function Form({
                                 return item.value;
                             }
                         }
-                        return 0;
-                    };
-                }
+                    }
+                    return 0;
+                };
 
                 if (
                     formSettings.hasOwnProperty('json') &&

package/src/components/crm/auth/Profile.jsx

@@ -2,9 +2,11 @@
 import '../../styles/global.css';
 
 import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
+import { useLocation } from 'react-router-dom';
 import PasswordStrengthBar from 'react-password-strength-bar';
 import { toast } from 'react-toastify';
 import SignaturePad from 'react-signature-pad-wrapper';
+import Swal from 'sweetalert2';
 import CustomFetch from '../Fetch';
 import TableFilter from '../TableFilter';
 import styles from './styles/Profile.module.scss';
@@ -60,6 +62,7 @@ const FormField = memo(
 );
 
 const Profile = ({ userProfile, setUserProfile }) => {
+    const location = useLocation();
     const signatureRef = useRef(null);
     const [isLoading, setIsLoading] = useState(false);
     const [profile, setProfile] = useState({
@@ -296,6 +299,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
 
     // Function to enable 2FA with verification code
     const enableTwoFactor = useCallback(async () => {
+        let toastId;
         try {
             if (!verificationCode.trim()) {
                 toast.error('Please enter the verification code');
@@ -303,9 +307,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
             }
 
             setIsLoading(true);
-            const toastId = toast.loading(
-                'Enabling two-factor authentication...'
-            );
+            toastId = toast.loading('Enabling two-factor authentication...');
 
             const res = await CustomFetch(
                 `/ajax/user/two-factor-auth/confirm`,
@@ -320,6 +322,12 @@ const Profile = ({ userProfile, setUserProfile }) => {
                 setShowTwoFactorSetup(false);
                 setVerificationCode('');
 
+                // Update the parent component's userProfile state to reflect 2FA is now enabled
+                setUserProfile((prevState) => ({
+                    ...prevState,
+                    two_factor_confirmed_at: new Date().toISOString(), // Add confirmation timestamp
+                }));
+
                 toast.update(toastId, {
                     render: 'Two-factor authentication enabled successfully',
                     type: 'success',
@@ -340,22 +348,42 @@ const Profile = ({ userProfile, setUserProfile }) => {
             }
         } catch (err) {
             console.error('Error enabling 2FA:', err);
-            toast.error(
-                'Failed to enable two-factor authentication. Please try again.'
-            );
+
+            // Update the loading toast if it exists, otherwise create a new error toast
+            if (toastId) {
+                toast.update(toastId, {
+                    render: 'Failed to enable two-factor authentication. Please try again.',
+                    type: 'error',
+                    isLoading: false,
+                    autoClose: 3000,
+                    closeButton: true,
+                });
+            } else {
+                toast.error(
+                    'Failed to enable two-factor authentication. Please try again.'
+                );
+            }
         } finally {
             setIsLoading(false);
         }
-    }, [verificationCode]);
+    }, [verificationCode, setUserProfile]);
 
     // Function to disable 2FA
     const disableTwoFactor = useCallback(async () => {
         try {
-            if (
-                !window.confirm(
-                    'Are you sure you want to disable two-factor authentication? This will make your account less secure.'
-                )
-            ) {
+            // Use SweetAlert2 instead of window.confirm
+            const result = await Swal.fire({
+                title: 'Disable Two-Factor Authentication',
+                text: 'Are you sure you want to disable two-factor authentication? This will make your account less secure.',
+                icon: 'warning',
+                showCancelButton: true,
+                confirmButtonColor: 'var(--primary-color)',
+                cancelButtonColor: 'var(--secondary-color)',
+                confirmButtonText: 'Yes, disable it',
+                cancelButtonText: 'No, keep it enabled',
+            });
+
+            if (!result.isConfirmed) {
                 return;
             }
 
@@ -373,6 +401,12 @@ const Profile = ({ userProfile, setUserProfile }) => {
             if (res.data) {
                 setTwoFactorEnabled(res.data.two_factor_enabled || false);
 
+                // Update the parent component's userProfile state to reflect 2FA is now disabled
+                setUserProfile((prevState) => ({
+                    ...prevState,
+                    two_factor_confirmed_at: null, // Remove confirmation timestamp
+                }));
+
                 toast.update(toastId, {
                     render: 'Two-factor authentication disabled successfully',
                     type: 'success',
@@ -389,7 +423,7 @@ const Profile = ({ userProfile, setUserProfile }) => {
         } finally {
             setIsLoading(false);
         }
-    }, []);
+    }, [setUserProfile]);
 
     // Function to copy text to clipboard
     const copyToClipboard = useCallback((text) => {
@@ -932,7 +966,27 @@ const Profile = ({ userProfile, setUserProfile }) => {
         } else {
             setTwoFactorEnabled(false);
         }
-    }, [userProfile.name, userProfile.email, userProfile.signature]);
+
+        // Check URL query parameters for tab selection
+        const queryParams = new URLSearchParams(location.search);
+        const tabParam = queryParams.get('tab');
+
+        if (tabParam === '2fa') {
+            // Update filters to show 2FA tab
+            setFilters((prevFilters) =>
+                prevFilters.map((filter) => ({
+                    ...filter,
+                    show: filter.id === '2fa',
+                    class: filter.id === '2fa' ? 'subactive' : '',
+                }))
+            );
+        }
+    }, [
+        userProfile.name,
+        userProfile.email,
+        userProfile.signature,
+        location.search,
+    ]);
 
     return (
         <div>

package/src/components/crm/generic/GenericAuth.jsx

@@ -42,6 +42,7 @@ const GenericAuth = ({
     navigation,
     routeConfig,
     themeType = 'primary',
+    enforce2FA = false, // Default to not enforcing 2FA
 }) => {
     const navigate = useNavigate();
     const location = useLocation();
@@ -143,6 +144,7 @@ const GenericAuth = ({
                                 setSystemAuth={setIsAuthenticated}
                                 themeType={themeType}
                                 userProfile={userProfile}
+                                enforce2FA={enforce2FA}
                             />
                         }
                     />

package/src/components/crm/generic/GenericDetail.jsx

@@ -14,6 +14,7 @@ import truncate from 'truncate';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { saveAs } from 'file-saver';
 import { toast } from 'react-toastify';
+import imageCompression from 'browser-image-compression';
 import {
     CircleCheck,
     Copy,
@@ -43,6 +44,49 @@ import styles from './styles/GenericDetail.module.scss';
 const localizer = momentLocalizer(moment);
 const DnDCalendar = withDragAndDrop(Calendar);
 
+// Helper function to check if a file is an image and optimize it if needed
+const optimizeImageIfNeeded = async (file) => {
+    // Check if the file is an image
+    const isImage = file.type.startsWith('image/');
+
+    if (isImage) {
+        // Image compression options
+        const options = {
+            maxSizeMB: 1, // Max file size in MB
+            maxWidthOrHeight: 1920, // Max width or height in pixels
+            useWebWorker: true,
+            fileType: file.type,
+        };
+
+        try {
+            // Show optimization toast
+            const optimizingToastId = toast.info(`Optimizing ${file.name}...`, {
+                autoClose: false,
+            });
+
+            // Compress the image
+            const compressedFile = await imageCompression(file, options);
+
+            // Update toast
+            toast.update(optimizingToastId, {
+                render: `${file.name} optimized successfully!`,
+                type: 'success',
+                autoClose: 1000,
+            });
+
+            // Return the compressed file
+            return compressedFile;
+        } catch (error) {
+            console.error('Error optimizing image:', error);
+            // If optimization fails, return the original file
+            return file;
+        }
+    }
+
+    // If not an image, return the original file
+    return file;
+};
+
 function GenericDetail({
     extraUrlParam,
     layout = 'full',
@@ -1275,63 +1319,157 @@ function GenericDetail({
                                     </div>
                                     <Dropzone
                                         onDrop={(acceptedFiles) => {
-                                            const uploadFile = (file) => {
-                                                Vapor.store(file, {
+                                            const uploadFile = async (file) => {
+                                                // Optimize image if it's an image file
+                                                const optimizedFile =
+                                                    await optimizeImageIfNeeded(
+                                                        file
+                                                    );
+
+                                                // Show upload toast
+                                                const uploadToastId =
+                                                    toast.info(
+                                                        `Uploading ${file.name}...`,
+                                                        {
+                                                            autoClose: false,
+                                                        }
+                                                    );
+
+                                                Vapor.store(optimizedFile, {
                                                     progress: (progress) => {
                                                         setLoadingProgress(
                                                             progress * 100
                                                         );
                                                     },
-                                                }).then((response) => {
-                                                    setLoadingProgress(0);
-                                                    const requestBody = {
-                                                        uuid: response.uuid,
-                                                        key: response.key,
-                                                        bucket: response.bucket,
-                                                        filename: file.name,
-                                                        file_name: file.name,
-                                                        filesize: file.size,
-                                                        file_size: file.size,
-                                                        extension:
-                                                            response.extension,
-                                                        file_extension:
-                                                            response.extension,
-                                                        file_relationship:
-                                                            activeTabConfig.file_relationship,
-                                                    };
+                                                })
+                                                    .then((response) => {
+                                                        setLoadingProgress(0);
+
+                                                        // Update upload toast
+                                                        toast.update(
+                                                            uploadToastId,
+                                                            {
+                                                                render: `Processing ${file.name}...`,
+                                                                type: 'info',
+                                                                autoClose: false,
+                                                            }
+                                                        );
 
-                                                    CustomFetch(
-                                                        `${activeTabConfig.url}/${routeParams[urlParam]}`,
-                                                        'PUT',
-                                                        requestBody,
-                                                        (res) => {
-                                                            if (
-                                                                activeTabConfig.file_relationship &&
-                                                                res.data[
-                                                                    activeTabConfig
-                                                                        .file_relationship
-                                                                ]
-                                                            ) {
-                                                                setFiles(
+                                                        const requestBody = {
+                                                            uuid: response.uuid,
+                                                            key: response.key,
+                                                            bucket: response.bucket,
+                                                            filename: file.name,
+                                                            file_name:
+                                                                file.name,
+                                                            filesize:
+                                                                optimizedFile.size,
+                                                            file_size:
+                                                                optimizedFile.size,
+                                                            extension:
+                                                                response.extension,
+                                                            file_extension:
+                                                                response.extension,
+                                                            file_relationship:
+                                                                activeTabConfig.file_relationship,
+                                                        };
+
+                                                        CustomFetch(
+                                                            `${activeTabConfig.url}/${routeParams[urlParam]}`,
+                                                            'PUT',
+                                                            requestBody,
+                                                            (res) => {
+                                                                // Check if there's an error in the response
+                                                                if (
+                                                                    res.error &&
+                                                                    res.error !==
+                                                                        ''
+                                                                ) {
+                                                                    toast.update(
+                                                                        uploadToastId,
+                                                                        {
+                                                                            render: `Error: ${res.error}`,
+                                                                            type: 'error',
+                                                                            autoClose: 5000,
+                                                                        }
+                                                                    );
+                                                                    return;
+                                                                }
+                                                                if (
+                                                                    activeTabConfig.file_relationship &&
                                                                     res.data[
                                                                         activeTabConfig
                                                                             .file_relationship
                                                                     ]
-                                                                );
-                                                            } else {
-                                                                if (
-                                                                    res?.data
-                                                                        ?.files
                                                                 ) {
                                                                     setFiles(
+                                                                        res
+                                                                            .data[
+                                                                            activeTabConfig
+                                                                                .file_relationship
+                                                                        ]
+                                                                    );
+                                                                    // Update the main data state with the new data
+                                                                    setData(
                                                                         res.data
-                                                                            .files
                                                                     );
+
+                                                                    // Update the upload toast
+                                                                    toast.update(
+                                                                        uploadToastId,
+                                                                        {
+                                                                            render: `${file.name} uploaded successfully!`,
+                                                                            type: 'success',
+                                                                            autoClose: 3000,
+                                                                        }
+                                                                    );
+                                                                } else {
+                                                                    if (
+                                                                        res
+                                                                            ?.data
+                                                                            ?.files
+                                                                    ) {
+                                                                        setFiles(
+                                                                            res
+                                                                                .data
+                                                                                .files
+                                                                        );
+                                                                        // Update the main data state with the new data
+                                                                        setData(
+                                                                            res.data
+                                                                        );
+
+                                                                        // Update the upload toast
+                                                                        toast.update(
+                                                                            uploadToastId,
+                                                                            {
+                                                                                render: `${file.name} uploaded successfully!`,
+                                                                                type: 'success',
+                                                                                autoClose: 3000,
+                                                                            }
+                                                                        );
+                                                                    }
                                                                 }
                                                             }
-                                                        }
-                                                    );
-                                                });
+                                                        );
+                                                    })
+                                                    .catch((error) => {
+                                                        console.error(
+                                                            'Error uploading file:',
+                                                            error
+                                                        );
+                                                        toast.update(
+                                                            uploadToastId,
+                                                            {
+                                                                render: `Error uploading file: ${
+                                                                    error.message ||
+                                                                    'Unknown error'
+                                                                }`,
+                                                                type: 'error',
+                                                                autoClose: 5000,
+                                                            }
+                                                        );
+                                                    });
                                             };
 
                                             acceptedFiles.forEach((a) => {

package/src/components/crm/generic/GenericIndex.jsx

@@ -206,6 +206,17 @@ function GenericIndex({
         rowsSelectedRef.current = rowsSelected;
     }, [rowsSelected]);
 
+    const handleCustomAction = async () => {
+        try {
+            const { data, method, message, url } = setting?.functions
+                ?.customAction
+                ? setting.functions.customAction
+                : config.form.functions.customAction;
+        } catch (err) {
+            console.error(err);
+        }
+    };
+
     const handleCheckboxUpdate = useCallback(async () => {
         try {
             const { data, method, message, url } = setting?.functions
@@ -548,6 +559,17 @@ function GenericIndex({
                     </button>
                 )}
 
+                {setting.functions?.customAction && (
+                    <button className={styles.btn} onClick={handleCustomAction}>
+                        {setting.functions.customAction.label || 'Delete'}
+                    </button>
+                )}
+                {config?.form?.functions?.customAction && (
+                    <button className={styles.btn} onClick={handleCustomAction}>
+                        {config.form.functions.customAction.label || 'Delete'}
+                    </button>
+                )}
+
                 {setting.export?.label && (
                     <button className={styles.btn} onClick={handleExport}>
                         {setting.export.label}

package/src/components/crm/generic/GenericMain.jsx

@@ -1,7 +1,14 @@
 import '../../styles/global.css';
 
-import React, { useState } from 'react';
-import { Routes, Route, Navigate } from 'react-router-dom';
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+    Routes,
+    Route,
+    Navigate,
+    useNavigate,
+    useLocation,
+} from 'react-router-dom';
+import Swal from 'sweetalert2';
 
 import Call from '../Call';
 import Loader from '../Loader';
@@ -19,7 +26,10 @@ const GenericMain = ({
     setUserProfile,
     themeType,
     userProfile,
+    enforce2FA = false, // Default to not enforcing 2FA
 }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
     const [incomingCallData, setIncomingCallData] = useState({});
 
     // Function to extract route parameters
@@ -29,6 +39,51 @@ const GenericMain = ({
     };
 
     // Recursive function to render routes
+    // Function to show 2FA enforcement alert
+    const show2FAEnforcementAlert = useCallback(() => {
+        // Only show the alert if:
+        // 1. User is authenticated (userProfile exists and has an ID)
+        // 2. 2FA is not enabled (two_factor_confirmed_at is null or undefined)
+        // 3. enforce2FA is true (only show alert when 2FA is enforced)
+        // 4. Not already on the profile page with 2FA tab
+        const isOnProfilePage =
+            location.pathname === '/profile' &&
+            location.search.includes('tab=2fa');
+
+        if (
+            enforce2FA && // Only show alert when 2FA is enforced
+            userProfile &&
+            userProfile.id &&
+            !userProfile.two_factor_confirmed_at &&
+            !isOnProfilePage // Don't show alert if already on profile page with 2FA tab
+        ) {
+            // Configure SweetAlert2 options for enforced 2FA
+            const swalOptions = {
+                title: 'Two-Factor Authentication Required',
+                text: 'Two-factor authentication is required for this system. You must set up 2FA to continue.',
+                icon: 'error',
+                confirmButtonColor: 'var(--primary-color)',
+                confirmButtonText: 'Set up 2FA now',
+                allowOutsideClick: false,
+                allowEscapeKey: false,
+                allowEnterKey: false,
+            };
+
+            // Show SweetAlert2 dialog
+            Swal.fire(swalOptions).then((result) => {
+                // Only navigate to profile page when the user clicks the button
+                if (result.isConfirmed) {
+                    navigate('/profile?tab=2fa');
+                }
+            });
+        }
+    }, [userProfile, navigate, enforce2FA, location.pathname, location.search]);
+
+    // Check if 2FA is enabled whenever the route changes
+    useEffect(() => {
+        show2FAEnforcementAlert();
+    }, [show2FAEnforcementAlert, location]);
+
     const renderRoutes = (routes) => {
         return routes.map((route, index) => {
             let elementProps = {