@visns-studio/visns-components 5.5.5 → 5.5.7

package/README.md

@@ -111,6 +111,18 @@ The main component that handles authentication and routing.
     routeConfig={routeConfig} // Route configuration
     themeType="primary" // Theme type: 'primary', 'secondary', etc.
     enforce2FA={false} // Whether to enforce 2FA (default: false)
+    clientPortalConfig={{
+        component: <ClientPortalComponent />, // Main component for client portal
+        urls: {
+            login: '/clientPortal/login',
+            verify: '/clientPortal/verify',
+            logout: '/clientPortal/logout',
+            profile: '/clientPortal/profile',
+        },
+        keys: {
+            name: ['firstname', 'surname'], // Fields to use for client name display
+        },
+    }}
 />
 ```
 
@@ -394,6 +406,126 @@ The QrCode component fetches QR code data from the specified URL and displays it
 
 ## Two-Factor Authentication (2FA)
 
+## Client Portal
+
+The GenericAuth component includes a client portal feature that provides a separate authentication flow and interface for clients.
+
+### Client Portal Configuration
+
+```jsx
+<GenericAuth
+    // ... other props
+    clientPortalConfig={{
+        component: <ClientPortalComponent />, // Main component for client portal
+        urls: {
+            login: '/clientPortal/login', // API endpoint for client login
+            verify: '/clientPortal/verify', // API endpoint for OTP verification
+            logout: '/clientPortal/logout', // API endpoint for client logout
+            profile: '/clientPortal/profile', // API endpoint for client profile
+        },
+        routes: {
+            // Optional additional routes
+            profile: ClientProfileComponent,
+            documents: ClientDocumentsComponent,
+        },
+        keys: {
+            name: ['firstname', 'surname'], // Fields to use for client name display
+        },
+    }}
+/>
+```
+
+#### Client Name Display Configuration
+
+The `keys.name` property in the `clientPortalConfig` allows you to specify which fields from the client profile should be used to display the client's name in the portal header.
+
+-   If `keys.name` is an array of strings, the values from those fields will be concatenated with spaces in between.
+-   If `keys.name` is a single string, the value from that field will be used directly.
+-   If the specified fields are empty or not found, it will fall back to `clientProfile.name` or `clientProfile.email`.
+
+Examples:
+
+```jsx
+// Using multiple fields (firstname and surname)
+keys: {
+    name: ['firstname', 'surname'];
+}
+// Result: "John Smith"
+
+// Using a single field
+keys: {
+    name: 'fullname';
+}
+// Result: "John Smith"
+```
+
+### Passing Props to Client Portal Components
+
+To pass props to your client portal component, use a function component approach:
+
+```jsx
+<GenericAuth
+    // ... other props
+    clientPortalConfig={{
+        component: (props) => (
+            <ClientPortalComponent {...props} customProp="value" />
+        ),
+        // ... other config
+    }}
+/>
+```
+
+The function will receive these props:
+
+-   `clientProfile`: The full client profile object
+-   `setClientProfile`: Function to update the client profile
+-   `clientId`: The client ID extracted from clientProfile.id
+
+You can then access these props in your component:
+
+```jsx
+const ClientPortalComponent = ({
+    clientProfile,
+    setClientProfile,
+    clientId,
+    customProp, // Your custom prop
+}) => {
+    return (
+        <div>
+            <h1>
+                Welcome, {clientProfile.firstname} {clientProfile.surname}
+            </h1>
+            <p>Client ID: {clientId}</p>
+            <p>Custom prop: {customProp}</p>
+            {/* Your component content */}
+        </div>
+    );
+};
+```
+
+### Client Authentication Flow
+
+1. Client enters email address on the client login page
+2. System sends a one-time password (OTP) to the client's email
+3. Client enters the OTP on the verification page
+4. If the OTP is valid, the client is authenticated and redirected to the client portal
+
+### Client Portal Routes
+
+The client portal uses these routes:
+
+-   `/client/login` - Client login page
+-   `/client/verify` - OTP verification page
+-   `/client/portal` - Main client portal (protected, requires authentication)
+-   `/client/portal/profile` - Client profile page (if configured in routes)
+-   `/client/portal/documents` - Client documents page (if configured in routes)
+
+### Route Grouping
+
+Routes in the client portal are grouped by prefix for better organization. All client-related routes are grouped under the `/client` prefix, which makes the routing structure cleaner and more maintainable.
+
+This grouping is handled internally by the GenericAuth component, so you don't need to include the `/client` prefix in your route configurations.
+
 ### How 2FA Works
 
 1. User enters email and password on the login screen

package/package.json

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

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

@@ -0,0 +1,126 @@
+import '../../styles/global.css';
+
+import React, { useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { Person } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+
+import styles from './styles/ClientAuth.module.scss';
+
+const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const [isLoading, setIsLoading] = useState(false);
+    const [email, setEmail] = useState('');
+    const [inputError, setInputError] = useState(false);
+
+    const handleChange = (e) => {
+        setEmail(e.target.value);
+        setInputError(false);
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        if (!email.trim()) {
+            setInputError(true);
+            toast.error('Please enter your email address');
+            return;
+        }
+
+        setIsLoading(true);
+        toast.info('Sending verification code...', { autoClose: 2000 });
+
+        try {
+            const loginUrl = urls.login;
+            const result = await CustomFetch(loginUrl, 'POST', {
+                email: email,
+                location:
+                    location.state && location.state.previousUrl
+                        ? location.state.previousUrl
+                        : '',
+            });
+
+            setIsLoading(false);
+
+            if (result.data && result.data.success) {
+                // Redirect to OTP verification page with email and uuid
+                const verifyUrl = '/client/verify';
+                navigate(verifyUrl, {
+                    state: {
+                        email: email,
+                        uuid: result.data.uuid,
+                        previousUrl: location.state?.previousUrl || '',
+                        // In development, we can pass the OTP for testing
+                        ...(process.env.NODE_ENV === 'development' && {
+                            otp: result.data.otp,
+                        }),
+                    },
+                });
+                toast.success(
+                    result.data.message ||
+                        'Verification code sent to your email'
+                );
+            } else {
+                setSystemAuth(false);
+                setInputError(true);
+                toast.error(
+                    (result.data && result.data.message) ||
+                        'Could not find an account with this email address.'
+                );
+            }
+        } catch (error) {
+            setIsLoading(false);
+            setInputError(true);
+            toast.error(String(error));
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.loginBox}>
+                <img src={logo} alt="Client Portal" className={styles.logo} />
+
+                <h1 className={styles.title}>Client Login</h1>
+                <p className={styles.subtitle}>
+                    Enter your email address to receive a verification code
+                </p>
+
+                <form onSubmit={handleSubmit}>
+                    <div className={styles.formGroup}>
+                        <label htmlFor="email" className={styles.inputLabel}>
+                            Email
+                        </label>
+                        <input
+                            id="email"
+                            type="email"
+                            name="email"
+                            value={email}
+                            onChange={handleChange}
+                            className={`${styles.input} ${
+                                inputError ? styles.error : ''
+                            }`}
+                            placeholder="Enter your email address"
+                            autoComplete="email"
+                        />
+                        <span className={styles.inputIcon}>
+                            <Person strokeWidth={2} size={18} />
+                        </span>
+                    </div>
+
+                    <button
+                        className={styles.button}
+                        type="submit"
+                        disabled={isLoading}
+                    >
+                        {isLoading ? 'Sending...' : 'Continue'}
+                    </button>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default ClientLogin;

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

@@ -0,0 +1,257 @@
+import '../../styles/global.css';
+
+import React, { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { toast } from 'react-toastify';
+import { LockOff, ArrowLeft } from 'akar-icons';
+
+import CustomFetch from '../Fetch';
+
+import styles from './styles/ClientAuth.module.scss';
+
+const ClientOTPVerify = ({
+    logo,
+    setSystemAuth,
+    setUserProfile,
+    urls = {},
+}) => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [isLoading, setIsLoading] = useState(false);
+
+    // Get data from location state
+    const email = location.state?.email || null;
+    const uuid = location.state?.uuid || null;
+    const previousUrl = location.state?.previousUrl || '';
+    const devOtp = location.state?.otp || null; // For development testing
+
+    // If no email or uuid, redirect to client login
+    useEffect(() => {
+        if (!email || !uuid) {
+            const loginUrl = '/client/login';
+            navigate(loginUrl);
+        }
+    }, [email, uuid, navigate]);
+
+    // Auto-fill OTP in development mode
+    useEffect(() => {
+        if (process.env.NODE_ENV === 'development' && devOtp) {
+            setVerificationCode(devOtp);
+        }
+    }, [devOtp]);
+
+    const [verificationCode, setVerificationCode] = useState('');
+    const [codeClass, setCodeClass] = useState('');
+    const [resendDisabled, setResendDisabled] = useState(false);
+    const [countdown, setCountdown] = useState(0);
+
+    useEffect(() => {
+        let timer;
+        if (countdown > 0) {
+            timer = setTimeout(() => setCountdown(countdown - 1), 1000);
+        } else if (countdown === 0) {
+            setResendDisabled(false);
+        }
+        return () => clearTimeout(timer);
+    }, [countdown]);
+
+    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 handleResendCode = async () => {
+        if (resendDisabled) return;
+
+        setResendDisabled(true);
+        setCountdown(60); // 60 seconds cooldown
+
+        toast.info('Resending verification code...', { autoClose: 2000 });
+
+        try {
+            const loginUrl = urls.login;
+            const result = await CustomFetch(loginUrl, 'POST', {
+                email: email,
+                resend: true,
+            });
+
+            if (result.data && result.data.success) {
+                toast.success(
+                    result.data.message ||
+                        'Verification code resent to your email'
+                );
+
+                // Update UUID with the new one
+                if (result.data.uuid) {
+                    navigate('/client/verify', {
+                        state: {
+                            email: email,
+                            uuid: result.data.uuid,
+                            previousUrl: previousUrl,
+                            ...(process.env.NODE_ENV === 'development' && {
+                                otp: result.data.otp,
+                            }),
+                        },
+                        replace: true, // Replace current entry in history
+                    });
+                }
+            } else {
+                toast.error(
+                    (result.data && result.data.message) ||
+                        'Could not resend verification code. Please try again later.'
+                );
+                setResendDisabled(false);
+                setCountdown(0);
+            }
+        } catch (error) {
+            toast.error(String(error));
+            setResendDisabled(false);
+            setCountdown(0);
+        }
+    };
+
+    const handleSubmit = async (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 });
+
+        try {
+            const verifyUrl = urls.verify;
+            const result = await CustomFetch(verifyUrl, 'POST', {
+                email: email,
+                uuid: uuid,
+                otp: verificationCode,
+                previous_url: previousUrl,
+            });
+
+            setIsLoading(false);
+
+            // Check if the result contains an error message
+            if (!result.data || !result.data.success) {
+                setCodeClass('inputError');
+                toast.error(
+                    (result.data && result.data.message) ||
+                        'Invalid verification code'
+                );
+                return;
+            }
+
+            // Successful verification
+            setUserProfile(result.data.user);
+            toast.success(result.data.message || 'Login successful!');
+
+            // Set authentication state first
+            setSystemAuth(true);
+
+            if (result.data.redirect_url && result.data.redirect_url !== '') {
+                window.location.href = result.data.redirect_url;
+            } else {
+                // Use replace: true to avoid back button issues
+                navigate('/client/portal', { replace: true });
+            }
+        } catch (error) {
+            setIsLoading(false);
+            setCodeClass('inputError');
+            toast.error(String(error));
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.loginBox}>
+                <img src={logo} alt="Client Portal" className={styles.logo} />
+
+                <h1 className={styles.title}>Verification Code</h1>
+                <p className={styles.subtitle}>
+                    Please enter the 6-digit code sent to your email address:{' '}
+                    <span className={styles.emailHighlight}>{email}</span>
+                </p>
+
+                <form onSubmit={handleSubmit}>
+                    <div className={styles.formGroup}>
+                        <label
+                            htmlFor="verificationCode"
+                            className={styles.inputLabel}
+                        >
+                            Verification Code
+                        </label>
+                        <input
+                            id="verificationCode"
+                            type="text"
+                            name="verificationCode"
+                            value={verificationCode}
+                            onChange={handleChange}
+                            className={`${styles.input} ${styles.otpInput} ${
+                                codeClass === 'inputError' ? styles.error : ''
+                            }`}
+                            placeholder="Enter 6-digit code"
+                            autoComplete="one-time-code"
+                            inputMode="numeric"
+                            maxLength="6"
+                        />
+                        <span className={styles.inputIcon}>
+                            <LockOff strokeWidth={2} size={18} />
+                        </span>
+                    </div>
+
+                    <button
+                        className={styles.button}
+                        type="submit"
+                        disabled={isLoading}
+                    >
+                        {isLoading ? 'Verifying...' : 'Verify'}
+                    </button>
+
+                    <div className={styles.linkText}>
+                        Didn't receive the code?{' '}
+                        <a
+                            href="#"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                handleResendCode();
+                            }}
+                            className={
+                                resendDisabled
+                                    ? styles.disabled
+                                    : styles.resendLink
+                            }
+                        >
+                            {resendDisabled
+                                ? `Resend in ${countdown}s`
+                                : 'Resend Code'}
+                        </a>
+                    </div>
+
+                    <div className={styles.linkText}>
+                        <a
+                            href="#"
+                            onClick={(e) => {
+                                e.preventDefault();
+                                navigate('/client/login');
+                            }}
+                            className={styles.backLink}
+                        >
+                            <ArrowLeft strokeWidth={2} size={16} /> Back to
+                            Login
+                        </a>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+};
+
+export default ClientOTPVerify;

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

@@ -0,0 +1,167 @@
+// Client Auth styles
+.container {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f5f5f5;
+}
+
+.loginBox {
+  width: 100%;
+  max-width: 500px;
+  padding: 2.5rem;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.logo {
+  display: block;
+  width: 100%;
+  max-width: 240px;
+  height: auto;
+  margin: 0 auto 2rem;
+}
+
+.title {
+  font-size: 1.75rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 0.5rem;
+  text-align: center;
+}
+
+.subtitle {
+  font-size: 1rem;
+  color: #666;
+  margin-bottom: 2rem;
+  text-align: center;
+  line-height: 1.5;
+}
+
+.formGroup {
+  margin-bottom: 1.5rem;
+  position: relative;
+}
+
+.inputLabel {
+  display: block;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: #555;
+  margin-bottom: 0.5rem;
+}
+
+.input {
+  width: 100%;
+  padding: 0.75rem 1rem;
+  font-size: 1rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: white;
+  transition: border-color 0.2s ease;
+  
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color, #4a6741);
+    box-shadow: 0 0 0 2px rgba(74, 103, 65, 0.1);
+  }
+  
+  &.error {
+    border-color: #e53935;
+  }
+}
+
+.inputIcon {
+  position: absolute;
+  right: 1rem;
+  top: 2.4rem;
+  color: #999;
+}
+
+.button {
+  width: 100%;
+  padding: 0.9rem 1.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: white;
+  background-color: var(--primary-color, #0f4229);
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  
+  &:hover {
+    background-color: var(--secondary-color, #0a2e1c);
+  }
+  
+  &:disabled {
+    background-color: #ccc;
+    cursor: not-allowed;
+  }
+}
+
+.linkText {
+  display: block;
+  text-align: center;
+  margin-top: 1.5rem;
+  font-size: 0.9rem;
+  color: #666;
+  
+  a {
+    color: var(--primary-color, #0f4229);
+    text-decoration: none;
+    font-weight: 500;
+    
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+// OTP verification specific styles
+.otpInput {
+  letter-spacing: 0.25rem;
+  font-size: 1.2rem;
+  text-align: center;
+}
+
+.resendLink {
+  color: var(--primary-color, #0f4229);
+  text-decoration: none;
+  font-weight: 500;
+  cursor: pointer;
+  
+  &:hover {
+    text-decoration: underline;
+  }
+  
+  &.disabled {
+    color: #999;
+    cursor: default;
+    text-decoration: none;
+  }
+}
+
+.emailHighlight {
+  font-weight: 600;
+}
+
+.backLink {
+  display: inline-flex;
+  align-items: center;
+  margin-top: 1rem;
+  color: #666;
+  text-decoration: none;
+  font-size: 0.9rem;
+  
+  svg {
+    margin-right: 0.5rem;
+  }
+  
+  &:hover {
+    color: var(--primary-color, #0f4229);
+  }
+}