@visns-studio/visns-components 5.4.10 → 5.4.12

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

@@ -81,7 +81,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.4.10",
+    "version": "5.4.12",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -102,6 +102,7 @@ const loadData = async (
                     ...(fv.whereHas?.relation && {
                         whereHas: fv.whereHas.relation,
                     }),
+                    orKey: fv.orKey || null,
                 };
 
                 if (existingIndex !== -1) {
@@ -2737,6 +2738,9 @@ const DataGrid = forwardRef(
                                 key: column.filter.key
                                     ? column.filter.key
                                     : null,
+                                orKey: column.filter.orKey
+                                    ? column.filter.orKey
+                                    : null,
                                 name: filterName,
                                 operator: column.filter.operator,
                                 type: column.filter.type,

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/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 = {