@visns-studio/visns-components 5.4.6 → 5.4.8

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

@@ -0,0 +1,347 @@
+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 || '';
+    const remember = location.state?.remember || false;
+
+    // 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) {
+            const value = e.target.value;
+            // Only allow digits and limit to 6 characters
+            if (/^\d*$/.test(value) && value.length <= 6) {
+                setVerificationCode(value);
+                setCodeClass('');
+            }
+        }
+    };
+
+    const handleSubmit = (e) => {
+        if (e) {
+            e.preventDefault();
+
+            if (!verificationCode.trim() || verificationCode.length !== 6) {
+                setCodeClass('inputError');
+                toast.error('Please enter a valid 6-digit code');
+                return;
+            }
+
+            setIsLoading(true);
+            toast.info('Verifying code...', { autoClose: 2000 });
+
+            CustomFetch(
+                '/login/two-factor-challenge',
+                'POST',
+                {
+                    code: verificationCode,
+                    previous_url: previousUrl,
+                    remember: remember,
+                },
+                (result) => {
+                    setIsLoading(false);
+
+                    // Log the result to help with debugging
+                    console.log('2FA Result:', result);
+
+                    // Check if the result contains an error message
+                    if (result && result.error) {
+                        setCodeClass('inputError');
+                        console.log('Found error in result:', result.error);
+
+                        // Check if it's a session timeout error
+                        if (
+                            result.error ===
+                            'Invalid two-factor authentication session.'
+                        ) {
+                            console.log(
+                                'Session timeout detected, redirecting to login'
+                            );
+                            toast.error(
+                                'Your session has expired. Please log in again.'
+                            );
+
+                            // Redirect to login page
+                            setTimeout(() => {
+                                navigate('/login');
+                            }, 1500); // Short delay to allow the toast to be seen
+                        } else {
+                            // Display the error message
+                            toast.error(result.error);
+                        }
+                        return;
+                    }
+
+                    // Additional check for error in different format
+                    if (
+                        typeof result === 'string' &&
+                        result.includes(
+                            'Invalid two-factor authentication session'
+                        )
+                    ) {
+                        console.log(
+                            'Session timeout detected in string result, redirecting to login'
+                        );
+                        setCodeClass('inputError');
+                        toast.error(
+                            'Your session has expired. Please log in again.'
+                        );
+
+                        // Redirect to login page
+                        setTimeout(() => {
+                            navigate('/login');
+                        }, 1500);
+                        return;
+                    }
+
+                    // If we get here, it means we received a 200 response with the user object
+                    console.log(
+                        'Authentication successful, updating user profile'
+                    );
+                    toast.success('Two-factor authentication successful');
+
+                    // Update the user profile with the received data
+                    setUserProfile(result);
+
+                    // Set authentication state to true
+                    setSystemAuth(true);
+
+                    // Use a small delay to ensure state updates are processed
+                    setTimeout(() => {
+                        // Navigate based on previous URL if available
+                        if (previousUrl && previousUrl !== '') {
+                            window.location.href = previousUrl;
+                        } else {
+                            // Use window.location for a full page refresh to ensure session is recognized
+                            window.location.href = '/';
+                        }
+                    }, 500);
+                },
+                (error) => {
+                    setIsLoading(false);
+                    setCodeClass('inputError');
+
+                    // Log the error to help with debugging
+                    console.log('2FA Error:', error);
+
+                    // Log more detailed information about the error response
+                    if (error.response) {
+                        console.log('Error Response:', error.response);
+                        console.log(
+                            'Error Response Data:',
+                            error.response.data
+                        );
+                    }
+
+                    // Extract the error message from the response
+                    let errorMessage =
+                        'Invalid verification code. Please try again.';
+
+                    // Direct check for the specific error we're looking for
+                    // This is a temporary solution to force the redirect
+                    if (
+                        error &&
+                        error.message === 'Request failed with status code 401'
+                    ) {
+                        // Force redirect to login for 401 errors
+                        console.log('Detected 401 error, redirecting to login');
+                        toast.error(
+                            'Your session has expired. Please log in again.'
+                        );
+                        setTimeout(() => {
+                            navigate('/login');
+                        }, 1500);
+                        return;
+                    }
+
+                    try {
+                        // Try to parse the error response
+                        if (error.response && error.response.data) {
+                            console.log(
+                                'Response data type:',
+                                typeof error.response.data
+                            );
+                            console.log('Response data:', error.response.data);
+
+                            // If data is a string, use it directly
+                            if (typeof error.response.data === 'string') {
+                                errorMessage = error.response.data;
+                            }
+                            // If data is an object with an error property
+                            else if (typeof error.response.data === 'object') {
+                                if (error.response.data.error) {
+                                    errorMessage = error.response.data.error;
+                                    console.log(
+                                        'Found error in object:',
+                                        errorMessage
+                                    );
+                                } else if (error.response.data.message) {
+                                    errorMessage = error.response.data.message;
+                                    console.log(
+                                        'Found message in object:',
+                                        errorMessage
+                                    );
+                                }
+                            }
+                            // If data is JSON string, try to parse it
+                            else if (
+                                typeof error.response.data === 'string' &&
+                                error.response.data.includes('{')
+                            ) {
+                                const parsedData = JSON.parse(
+                                    error.response.data
+                                );
+                                if (parsedData.error) {
+                                    errorMessage = parsedData.error;
+                                    console.log(
+                                        'Found error in parsed JSON:',
+                                        errorMessage
+                                    );
+                                }
+                            }
+                        }
+                    } catch (e) {
+                        console.error('Error parsing error response:', e);
+                    }
+
+                    console.log('Extracted error message:', errorMessage);
+
+                    // Check if it's a session timeout error
+                    if (
+                        errorMessage ===
+                            'Invalid two-factor authentication session.' ||
+                        errorMessage.includes(
+                            'Invalid two-factor authentication session'
+                        )
+                    ) {
+                        toast.error(
+                            'Your session has expired. Please log in again.'
+                        );
+                        // Redirect to login page
+                        setTimeout(() => {
+                            navigate('/login');
+                        }, 1500); // Short delay to allow the toast to be seen
+                    } else {
+                        toast.error(errorMessage);
+                    }
+                }
+            );
+        }
+    };
+
+    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 6-digit code from your
+                                        authenticator app.
+                                    </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"
+                                            inputMode="numeric"
+                                            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>
+                                        Having trouble? Contact your
+                                        administrator for assistance.
+                                    </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/Login.module.scss

@@ -2,6 +2,7 @@
     width: 50%;
     position: relative;
     box-sizing: border-box;
+    margin-bottom: 0.5rem;
 
     .fi__label {
         position: relative;
@@ -118,6 +119,41 @@
     }
 }
 
+.rememberMeContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    margin-bottom: 0.75rem;
+    box-sizing: border-box;
+    margin-top: -0.25rem;
+}
+
+.rememberMeCheckboxWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 0.5rem;
+}
+
+.rememberMeLabel {
+    cursor: pointer;
+    user-select: none;
+    color: var(--paragraph-color);
+    font-size: 0.85rem;
+    white-space: nowrap;
+}
+
+.rememberMeCheckbox {
+    /* Use the browser's default checkbox but with some styling */
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+    position: relative;
+    accent-color: var(--primary-color); /* Modern browsers support this */
+}
+
 .lcontainer {
     min-height: 100vh;
     display: flex;