@visns-studio/visns-components 5.4.6 → 5.4.7

package/package.json

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

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

@@ -1,7 +1,7 @@
 import '../../styles/global.css';
 
 import React, { useEffect, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { toast } from 'react-toastify';
 import { Person, LockOff } from 'akar-icons';
@@ -12,6 +12,8 @@ import styles from './styles/Login.module.scss';
 
 const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
     const location = useLocation();
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(false);
 
     const [auth, setAuth] = useState({
         email: '',
@@ -92,6 +94,9 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
         if (e) {
             e.preventDefault();
 
+            setIsLoading(true);
+            toast.info('Logging in...', { autoClose: 2000 });
+
             CustomFetch(
                 '/login/authenticate',
                 'POST',
@@ -103,13 +108,27 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                             : '',
                 },
                 (result) => {
+                    setIsLoading(false);
                     if (result.error === '') {
-                        setUserProfile(result.user);
-
-                        if (result.previous && result.previous !== '') {
-                            window.location.href = result.previous;
+                        // Check if 2FA is required
+                        if (result.requires_2fa) {
+                            // Redirect to 2FA page with user data
+                            navigate('/2fa', {
+                                state: {
+                                    userData: result.user,
+                                    previousUrl:
+                                        location.state?.previousUrl || '',
+                                },
+                            });
                         } else {
-                            setSystemAuth(true);
+                            // Normal login flow
+                            setUserProfile(result.user);
+
+                            if (result.previous && result.previous !== '') {
+                                window.location.href = result.previous;
+                            } else {
+                                setSystemAuth(true);
+                            }
                         }
                     } else {
                         setSystemAuth(false);
@@ -120,11 +139,13 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                         }));
 
                         toast.error(
-                            'Could not log in with the supplied credentials, please try again.'
+                            result.error ||
+                                'Could not log in with the supplied credentials, please try again.'
                         );
                     }
                 },
                 (error) => {
+                    setIsLoading(false);
                     setAuthClass((prevState) => ({
                         ...prevState,
                         username: 'inputError',
@@ -206,8 +227,9 @@ const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
                                     <button
                                         className={styles.btn}
                                         type="submit"
+                                        disabled={isLoading}
                                     >
-                                        Login
+                                        {isLoading ? 'Logging in...' : 'Login'}
                                     </button>
                                 </div>
                                 <div

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

@@ -0,0 +1,184 @@
+import '../../styles/global.css';
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import Reveal from 'react-reveal/Reveal';
+import { toast } from 'react-toastify';
+import { LockOff } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+
+import styles from './styles/TwoFactorAuth.module.scss';
+
+const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [isLoading, setIsLoading] = useState(false);
+    
+    // Get user data from location state
+    const userData = location.state?.userData || null;
+    const previousUrl = location.state?.previousUrl || '';
+    
+    // If no userData, redirect to login
+    useEffect(() => {
+        if (!userData) {
+            navigate('/login');
+        }
+    }, [userData, navigate]);
+
+    const [verificationCode, setVerificationCode] = useState('');
+    const [codeClass, setCodeClass] = useState('');
+
+    const handleChange = (e) => {
+        if (e) {
+            setVerificationCode(e.target.value);
+            setCodeClass('');
+        }
+    };
+
+    const handleSubmit = (e) => {
+        if (e) {
+            e.preventDefault();
+            
+            if (!verificationCode.trim()) {
+                setCodeClass('inputError');
+                toast.error('Please enter the verification code');
+                return;
+            }
+            
+            setIsLoading(true);
+            toast.info('Verifying code...', { autoClose: 2000 });
+
+            CustomFetch(
+                '/login/verify-2fa',
+                'POST',
+                {
+                    user_id: userData?.id,
+                    verification_code: verificationCode,
+                    previous_url: previousUrl
+                },
+                (result) => {
+                    setIsLoading(false);
+                    if (result.error === '') {
+                        toast.success('Two-factor authentication successful');
+                        setUserProfile(result.user || userData);
+
+                        if (result.previous && result.previous !== '') {
+                            window.location.href = result.previous;
+                        } else {
+                            setSystemAuth(true);
+                            navigate('/');
+                        }
+                    } else {
+                        setCodeClass('inputError');
+                        toast.error(result.error || 'Invalid verification code');
+                    }
+                },
+                (error) => {
+                    setIsLoading(false);
+                    setCodeClass('inputError');
+                    toast.error(String(error) || 'Failed to verify code');
+                }
+            );
+        }
+    };
+
+    const handleResendCode = () => {
+        if (!userData?.id) {
+            toast.error('User information is missing. Please try logging in again.');
+            navigate('/login');
+            return;
+        }
+
+        toast.info('Requesting new verification code...', { autoClose: 2000 });
+        
+        CustomFetch(
+            '/login/resend-2fa',
+            'POST',
+            { user_id: userData.id },
+            (result) => {
+                if (result.error === '') {
+                    toast.success('A new verification code has been sent');
+                } else {
+                    toast.error(result.error || 'Failed to send new code');
+                }
+            },
+            (error) => {
+                toast.error(String(error) || 'Failed to send new code');
+            }
+        );
+    };
+
+    return (
+        <div className={styles.lcontainer}>
+            <div className={styles.lwrap}>
+                <div className={styles.logincontainer}>
+                    <form onSubmit={handleSubmit}>
+                        <Reveal effect="fadeInUp">
+                            <div className={styles.login}>
+                                <img
+                                    src={logo}
+                                    alt="CRM"
+                                    className={styles.loginlogo}
+                                />
+                                <div className={`${styles.formItem} ${styles.fwItem}`}>
+                                    <h2>Two-Factor Authentication</h2>
+                                    <p className={styles.instructions}>
+                                        Please enter the verification code that was sent to your device.
+                                    </p>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem}`}>
+                                    <label className={styles.fi__label}>
+                                        <input
+                                            type="text"
+                                            name="verificationCode"
+                                            value={verificationCode}
+                                            onChange={handleChange}
+                                            tabIndex="1"
+                                            className={codeClass}
+                                            placeholder=" "
+                                            autoComplete="one-time-code"
+                                            maxLength="6"
+                                        />
+                                        <span className={styles.fi__span}>
+                                            Verification Code
+                                        </span>
+                                        <small>
+                                            <LockOff strokeWidth={2} size={18} />
+                                        </small>
+                                    </label>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem}`}>
+                                    <button
+                                        className={styles.btn}
+                                        type="submit"
+                                        disabled={isLoading}
+                                    >
+                                        {isLoading ? 'Verifying...' : 'Verify'}
+                                    </button>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}>
+                                    <span>
+                                        Didn't receive a code?{' '}
+                                        <a href="#" onClick={(e) => { e.preventDefault(); handleResendCode(); }}>
+                                            Resend Code
+                                        </a>
+                                    </span>
+                                </div>
+                                <div className={`${styles.formItem} ${styles.fwItem} ${styles.lastItem} ${styles.forgotten}`}>
+                                    <span>
+                                        <a href="#" onClick={(e) => { e.preventDefault(); navigate('/login'); }}>
+                                            Back to Login
+                                        </a>
+                                    </span>
+                                </div>
+                            </div>
+                        </Reveal>
+                    </form>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default TwoFactorAuth;

package/src/components/crm/auth/styles/TwoFactorAuth.module.scss

@@ -0,0 +1,29 @@
+// Import the Login styles to maintain consistency
+@import './Login.module.scss';
+
+// Additional styles specific to the 2FA component
+.instructions {
+    text-align: center;
+    margin: 0.5rem 0 1.5rem;
+    color: var(--paragraph-color);
+    font-size: 0.95rem;
+    line-height: 1.4;
+}
+
+.login {
+    h2 {
+        text-align: center;
+        margin: 0;
+        color: var(--heading-color);
+        font-weight: 500;
+    }
+}
+
+// Style for the verification code input
+.formItem {
+    input[name="verificationCode"] {
+        letter-spacing: 0.25rem;
+        font-size: 1.2rem;
+        text-align: center;
+    }
+}

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

@@ -17,6 +17,7 @@ import GenericMain from './GenericMain';
 import Login from '../auth/Login';
 import Reset from '../auth/Reset';
 import Verify from '../auth/Verify';
+import TwoFactorAuth from '../auth/TwoFactorAuth';
 
 const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
     const location = useLocation();
@@ -111,6 +112,17 @@ const GenericAuth = ({
                         />
                     }
                 />
+                <Route
+                    path="2fa"
+                    element={
+                        <TwoFactorAuthComponent
+                            loginBg={loginBg}
+                            logo={logo}
+                            setIsAuthenticated={setIsAuthenticated}
+                            setUserProfile={setUserProfile}
+                        />
+                    }
+                />
                 <Route
                     element={
                         <ProtectedRoute
@@ -174,4 +186,15 @@ const VerifyComponent = React.memo(({ loginBg, logo, setIsAuthenticated }) => (
     <Verify loginBg={loginBg} logo={logo} setSystemAuth={setIsAuthenticated} />
 ));
 
+const TwoFactorAuthComponent = React.memo(
+    ({ loginBg, logo, setIsAuthenticated, setUserProfile }) => (
+        <TwoFactorAuth
+            loginBg={loginBg}
+            logo={logo}
+            setSystemAuth={setIsAuthenticated}
+            setUserProfile={setUserProfile}
+        />
+    )
+);
+
 export default GenericAuth;