@visns-studio/visns-components 3.2.4 → 3.2.5

package/components/crm/Fetch.jsx

@@ -77,7 +77,13 @@ const CustomFetch = (
                     if (errorCallback) {
                         errorCallback(errorMessage);
                     } else {
-                        toast.error(<div>{parse(errorMessage)}</div>);
+                        if (errorMessage !== 'Unauthenticated.') {
+                            toast.error(<div>{parse(errorMessage)}</div>);
+                        } else {
+                            console.info(
+                                'You are not authenticated into the system.'
+                            );
+                        }
                     }
                     reject(error);
                 });

package/components/crm/generic/GenericAuth.jsx

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import {
+    useNavigate,
+    useLocation,
+    Routes,
+    Route,
+    Navigate,
+    Outlet,
+} from 'react-router-dom';
+import { ToastContainer } from 'react-toastify';
+import { Tooltip } from 'react-tooltip';
+import 'react-tooltip/dist/react-tooltip.css';
+import 'react-toastify/dist/ReactToastify.css';
+
+import CustomFetch from '../Fetch';
+import Login from '../auth/Login';
+import Reset from '../auth/Reset';
+import Verify from '../auth/Verify';
+
+import Main from './main';
+import logo from '../images/logo.svg';
+
+const ProtectedRoute = ({ user, loading, redirectPath = '/login' }) => {
+    return loading ? null : !user.id ? (
+        <Navigate to={redirectPath} replace />
+    ) : (
+        <Outlet />
+    );
+};
+
+const Auth = () => {
+    const navigate = useNavigate();
+    const location = useLocation();
+    const [userProfile, setUserProfile] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+    const [isAuthenticated, setIsAuthenticated] = useState(false);
+
+    const updateAuthStatus = async () => {
+        try {
+            const { data } = await CustomFetch('/ajax/user/profile', 'GET');
+            setUserProfile(data);
+            setIsAuthenticated(true);
+            setIsLoading(false);
+
+            if (location.pathname.split('/')[1] === 'login') {
+                navigate('/', { replace: true });
+            }
+        } catch (error) {
+            setIsLoading(false);
+            if (['Unauthenticatdata.'].includes(error)) {
+                setIsAuthenticated(false);
+                navigate('/login');
+            }
+        }
+    };
+
+    useEffect(() => {
+        updateAuthStatus();
+    }, [isAuthenticated]);
+
+    return (
+        <>
+            <Routes>
+                <Route
+                    path="login"
+                    element={
+                        <LoginComponent
+                            setIsAuthenticated={setIsAuthenticated}
+                            setUserProfile={setUserProfile}
+                        />
+                    }
+                />
+                <Route
+                    path="reset"
+                    element={
+                        <ResetComponent
+                            setIsAuthenticated={setIsAuthenticated}
+                        />
+                    }
+                />
+                <Route
+                    path="verify/:code"
+                    element={
+                        <VerifyComponent
+                            setIsAuthenticated={setIsAuthenticated}
+                        />
+                    }
+                />
+                <Route
+                    element={
+                        <ProtectedRoute
+                            user={userProfile}
+                            loading={isLoading}
+                        />
+                    }
+                >
+                    <Route
+                        path="/*"
+                        element={
+                            <MainComponent
+                                checkAuthStatus={updateAuthStatus}
+                                setUserProfile={setUserProfile}
+                                userProfile={userProfile}
+                                setSystemAuth={setIsAuthenticated}
+                            />
+                        }
+                    />
+                </Route>
+            </Routes>
+            <ToastContainer
+                theme="light"
+                position="bottom-center"
+                style={{ width: '600px' }}
+            />
+        </>
+    );
+};
+
+const LoginComponent = React.memo(({ setIsAuthenticated, setUserProfile }) => (
+    <Login
+        logo={logo}
+        providers={['azure']}
+        setSystemAuth={setIsAuthenticated}
+        setUserProfile={setUserProfile}
+    />
+));
+
+const ResetComponent = React.memo(({ setIsAuthenticated }) => (
+    <Reset logo={logo} setSystemAuth={setIsAuthenticated} />
+));
+
+const VerifyComponent = React.memo(({ setIsAuthenticated }) => (
+    <Verify logo={logo} setSystemAuth={setIsAuthenticated} />
+));
+
+const MainComponent = React.memo(
+    ({ checkAuthStatus, setUserProfile, userProfile, setSystemAuth }) => (
+        <>
+            <Main
+                checkAuthStatus={checkAuthStatus}
+                setSystemAuth={setSystemAuth}
+                userProfile={userProfile}
+                setUserProfile={setUserProfile}
+            />
+            <Tooltip id="system-tooltip" />
+        </>
+    )
+);
+
+export default Auth;

package/index.js

@@ -34,6 +34,7 @@ import CmsIndex from './components/cms/generic/CmsIndex';
 import CmsSort from './components/cms/generic/CmsSort';
 
 /** CRM Generic Components */
+import GenericAuth from './components/crm/generic/GenericAuth';
 import GenericDetail from './components/crm/generic/GenericDetail';
 import GenericIndex from './components/crm/generic/GenericIndex';
 import GenericSort from './components/crm/generic/GenericSort';
@@ -54,6 +55,7 @@ export {
     DropZone,
     Field,
     Form,
+    GenericAuth,
     GenericDetail,
     GenericIndex,
     GenericSort,

package/package.json

@@ -49,7 +49,7 @@
         "react-dom": "^17.0.1"
     },
     "name": "@visns-studio/visns-components",
-    "version": "3.2.4",
+    "version": "3.2.5",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "index.js",
     "scripts": {