Merge pull request #131 from ASM-Studios/mra/evol-about-ids

evol(about): add ids to payload

client_web/src/App.tsx

@@ -16,7 +16,8 @@ import { loadSlim } from "@tsparticles/slim";
 import Home from './Pages/Home';
 import NotFound from './Pages/Errors/NotFound';
 import ApiNotConnected from "@/Pages/Errors/ApiNotConnected";
-// @ts-ignore
+import CustomError from "@/Pages/Errors/CustomError";
+
 import Layout from '@/Components/Layout/Layout';
 import Login from './Pages/Auth/Forms/Login';
 import Register from './Pages/Auth/Forms/Register';
@@ -162,6 +163,7 @@ const App = () => {
                             <Route path="/workflow/:id" element={<NotFound />} />
 
                             <Route path="/error/connection" element={<ApiNotConnected />} />
+                            <Route path="/error/:error" element={<CustomError />} />
                             <Route path="*" element={<NotFound />} />
                         </Routes>
                     </Layout>

client_web/src/Components/Auth/Buttons/GoogleAuth.tsx

@@ -1,6 +1,5 @@
 import { Form, Button } from 'antd';
 import { GoogleOAuthProvider } from '@react-oauth/google';
-// @ts-ignore
 import { uri } from '@Config/uri';
 
 interface GoogleAuthProps {
@@ -15,14 +14,18 @@ const GoogleAuth = ({ onSuccess, onError, buttonText }: GoogleAuthProps) => {
     }
 
     const handleGoogleLogin = () => {
-        // Initialize the Google Sign-In client
-        let google: any;
+        const google = (window as any).google;
+        if (!google) {
+            console.error('Google API not loaded');
+            onError();
+            return;
+        }
+
         const client = google.accounts.oauth2.initCodeClient({
             client_id: uri.google.auth.clientId,
-            scope: 'email profile', // TODO: Add other scopes as needed
+            scope: 'email profile',
             callback: (response: unknown) => {
-                // @ts-ignore
-                if (response?.code) {
+                if (response && typeof response === 'object' && 'code' in response) {
                     onSuccess(response);
                 } else {
                     onError();

client_web/src/Components/Layout/Header.tsx

@@ -1,6 +1,6 @@
-import { Layout, Menu } from 'antd';
+import { Layout, Menu, Button } from 'antd';
 import { Link, useLocation } from 'react-router-dom';
-import { useTheme } from '@/Context/ContextHooks';
+import { useAuth, useTheme } from '@/Context/ContextHooks';
 import React, { useEffect, useState } from "react";
 
 const { Header: AntHeader } = Layout;
@@ -20,20 +20,42 @@ const Header: React.FC = () => {
     const location = useLocation();
     const [selectedKey, setSelectedKey] = useState<string>(location.pathname);
 
+    const { setIsAuthenticated, setJsonWebToken } = useAuth();
+
     useEffect(() => {
         setSelectedKey(location.pathname);
     }, [location.pathname]);
 
+    function handleLogout() {
+        localStorage.removeItem('jsonWebToken');
+        setIsAuthenticated(false);
+        setJsonWebToken('');
+        window.location.href = '/';
+    }
+
     return (
         <div style={{ padding: 24, position: 'relative', zIndex: 1 }}>
-            <AntHeader style={{ backgroundColor: theme === "dark" ? '#001529' : 'white', display: 'flex', zIndex: 1, borderRadius: '8px' }}>
+            <AntHeader style={{ backgroundColor: theme === "dark" ? '#001529' : 'white', display: 'flex', alignItems: 'center', zIndex: 1, borderRadius: '8px' }}>
                 <Menu
                     theme={theme}
                     mode="horizontal"
                     style={{ flex: 1 }}
                     items={menuItems}
                     selectedKeys={[selectedKey]}
                 />
+                <Button //TODO: Replace by account management
+                    type="primary" 
+                    danger
+                    onClick={handleLogout} 
+                    style={{ 
+                        marginLeft: 'auto',
+                        height: '32px',
+                        borderRadius: '6px',
+                        fontWeight: 500,
+                    }}
+                >
+                    Logout
+                </Button>
             </AntHeader>
         </div>
     );

client_web/src/Context/CombinedProviders.tsx

@@ -2,11 +2,13 @@ import { ReactNode } from 'react';
 import { UserProvider } from './Scopes/UserContext';
 import { ThemeProvider } from './Scopes/ThemeContext';
 import { AuthProvider } from './Scopes/AuthContext';
+import { ErrorProvider } from './Scopes/ErrorContext';
 
 const providers = [
     UserProvider,
     ThemeProvider,
     AuthProvider,
+    ErrorProvider
     // Add more providers here
 ];
 

client_web/src/Context/ContextHooks.ts

@@ -1,7 +1,8 @@
 import { useContext } from 'react';
-import { UserContext } from './Scopes/UserContext';
-import { ThemeContext } from './Scopes/ThemeContext';
-import { AuthContext } from './Scopes/AuthContext';
+import { UserContext } from '@/Context/Scopes/UserContext';
+import { ThemeContext } from '@/Context/Scopes/ThemeContext';
+import { AuthContext } from '@/Context/Scopes/AuthContext';
+import { ErrorContext } from "@/Context/Scopes/ErrorContext";
 
 export const useUser = () => {
     const context = useContext(UserContext);
@@ -26,3 +27,11 @@ export const useAuth = () => {
     }
     return context;
 };
+
+export const useError = () => {
+    const context = useContext(ErrorContext);
+    if (!context) {
+        throw new Error('useError must be used within an ErrorProvider');
+    }
+    return context;
+}

client_web/src/Context/Scopes/ErrorContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useState, ReactNode } from 'react';
+
+interface Error {
+    error: string;
+    errorDescription: string;
+}
+
+export interface ErrorContextType {
+    error: Error | null;
+    setError: (error: Error | null) => void;
+}
+
+export const ErrorContext = createContext<ErrorContextType | undefined>(undefined);
+
+export const ErrorProvider = ({ children }: { children: ReactNode }) => {
+    const [error, setError] = useState<Error | null>(null);
+
+    return (
+        <ErrorContext.Provider value={{ error, setError }}>
+            {children}
+        </ErrorContext.Provider>
+    );
+}

client_web/src/Pages/Errors/CustomError.tsx

@@ -0,0 +1,28 @@
+import { Result } from 'antd';
+import LinkButton from "@/Components/LinkButton";
+import React from 'react';
+import {ErrorContext} from "@/Context/Scopes/ErrorContext";
+import { useError } from "@/Context/ContextHooks";
+import { useAuth } from "@/Context/ContextHooks";
+
+const CustomError: () => React.ReactElement = () => {
+    const { error } = useError();
+    const { isAuthenticated } = useAuth();
+
+    return (
+        <Result
+            status="error"
+            title={`${error?.error ?? 'Error'}`}
+            subTitle={`${error?.errorDescription ?? 'An error occurred'}`}
+            extra={
+                <LinkButton
+                    text={isAuthenticated ? "Back to Dashboard" : "Back Home"}
+                    url={isAuthenticated ? "/dashboard" : "/"}
+                />
+            }
+            style={{ zIndex: 1, position: 'relative' }}
+        />
+    );
+};
+
+export default CustomError;