@syzy/apphost 1.0.17 → 1.0.18

package/dist/App.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare const componentMap: Record<string, React.ComponentType<any>>;
-declare function App({ isSessionReady }: any): import("react/jsx-runtime").JSX.Element;
-export default App;
+declare const _default: (props: any) => import("react/jsx-runtime").JSX.Element;
+export default _default;

package/dist/App.js

@@ -1,12 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// import { configureAmplify } from "./config/amplifyConfig.ts";
+import { Route, Routes } from 'react-router-dom';
+import { useCurrentUser } from './hooks/useCurrentUser';
+import { withSyzyAuth } from './hoc/withSyzyAuth';
+import React, { useState } from 'react';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-import LoadingSpinner from './components/Loader/Loader';
-import Home from './components/Home/Home';
 import BranchMapping from './components/Mappings/BranchMapping/Branch';
 import MappingFormBranchUser from './components/Mappings/BranchMapping/MappingFormBranchUser';
 import ComponentRoleMapping from './components/Mappings/ComponentMapping/ComponentRoleMapping';
 import MappingFormUserRole from './components/Mappings/RoleMapping/MappingFormUserRole';
+import Home from './components/Home/Home';
+import LoadingSpinner from './components/Loader/Loader';
+// import { isHostedInContainer } from "./util/hostedinContainer.ts";
+// configureAmplify();
 export const componentMap = {
     BranchMapping,
     MappingFormBranchUser,
@@ -14,7 +20,43 @@ export const componentMap = {
     ComponentRoleMapping,
     Home,
 };
+const flattenRoutes = (items) => {
+    const flat = [];
+    const walk = (arr) => {
+        arr.forEach(item => {
+            if (item.path && item.requiredComponent) {
+                flat.push(item);
+            }
+            if (item.children) {
+                walk(item.children);
+            }
+        });
+    };
+    walk(items);
+    return flat;
+};
+const withAccessControl = (Component, props, requiredComponent, allowedComponents) => {
+    // Check if the user has access
+    const isAllowed = !requiredComponent || (allowedComponents?.includes(requiredComponent));
+    if (!isAllowed) {
+        return () => (_jsx("div", { className: "text-center mt-5", children: _jsx("h3", { className: "text-danger", children: "You are not allowed to see this page." }) }));
+    }
+    return () => _jsx(Component, { ...props });
+};
 function App({ isSessionReady }) {
-    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: "flex", width: "100%" }, children: _jsx("div", { style: { flex: 1, padding: "10px" }, children: !isSessionReady ? (_jsx(LoadingSpinner, {})) : (_jsx(React.Fragment, {})) }) }), _jsx(ReactQueryDevtools, { initialIsOpen: false })] }));
+    const { user } = useCurrentUser();
+    const [routes, setRoutes] = useState([]);
+    const flatRoutes = flattenRoutes(routes);
+    // useEffect(() => {
+    //   isHostedInContainer();
+    //   configureAmplify();
+    // }, []);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { style: { display: "flex", width: "100%" }, children: _jsx("div", { style: { flex: 1, padding: "10px" }, children: !isSessionReady ? (_jsx(LoadingSpinner, {})) : (_jsx(React.Fragment, { children: _jsxs(Routes, { children: [flatRoutes.map(({ path, requiredComponent, props }) => {
+                                    const PageComponent = componentMap[requiredComponent];
+                                    if (!PageComponent)
+                                        return null;
+                                    const ProtectedComponent = withAccessControl(PageComponent, props, requiredComponent, user.allowedComponents);
+                                    return _jsx(Route, { path: path, element: _jsx(ProtectedComponent, {}) }, path);
+                                }), _jsx(Route, { path: "*", element: _jsx("h3", { className: "text-danger", children: "Page Not Found" }) })] }) })) }) }), _jsx(ReactQueryDevtools, { initialIsOpen: false })] }));
 }
-export default App;
+export default withSyzyAuth(App);

package/dist/api/mapping-api.js

@@ -1,4 +1,6 @@
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { EnvConfig } from "../config/EnvConfig";
+import { Client } from "../services/Client.Service";
 import { initUserMappingDto, transformtoUserMappingDto } from "../domain/model/UserMappingDto";
 import { initRoleMappingDto, transformtoRoleMappingDto } from "../domain/model/RoleMappingDto";
 import { initComponentMappingDto, transformtoComponentMappingDto } from "../domain/model/ComponentMappingDto";
@@ -9,8 +11,6 @@ import { logger } from "../util/Logger";
 import { createBranchMutationGQL, createMapping, updateMapping } from "../customGraphQL/customMutations";
 import { listBranchesQuery, ListBranchUserMappings, ListComponentRoleMappings, listMapping, ListUserRoleMapping, updateBranchMutationQuery } from "../customGraphQL/customQueries";
 import { Status } from "../domain/type/StatusEnum";
-import { Client } from "../services/Client.Service";
-import { EnvConfig } from "../config/EnvConfig";
 export const MAPPING_RESOURCE = "mapping";
 export const GET_MAPPING_BY_USERID_QUERYKEY = "mappingbyuserid";
 export const LIST_BRANCHES_RESOURCE = "branches";

package/dist/components/Mappings/ComponentMapping/ComponentRoleMapping.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from "react";
+import { useContext, useMemo, useState } from "react";
 import MappingForm from "../MappingForm/MappingForm";
 import FormModal from "../../common/Modal/Modal";
 import ListTable from "../../common/ListTable/ListTable";
 import { toast } from "react-toastify";
 import { MappingTypes } from "../../../domain/type/MappingTypes";
-import { getCompoMappingByRoleIdAndCompoIdFun, useCreateMappingMutation, useListComponentRoleMappings, useListProfiles, useUpdateMappingMutation, } from "../../../api/mapping-api";
+import { getCompoMappingByRoleIdAndCompoIdFun, useCreateMappingMutation, useListComponentRoleMappings, useUpdateMappingMutation, } from "../../../api/mapping-api";
 import { EntityTypes } from "../../../domain/type/EntityTypes";
 import { Status } from "../../../domain/type/StatusEnum";
 import { SyzyDate } from "../../../util/SyzyDate";
 import { DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS } from "../../../util/dateUtils";
+import AppContext from "../../../store/AppContext";
 import { logger } from "../../../util/Logger";
 import { componentMap } from "../../../App";
 import { roles } from "../RoleMapping/MappingFormUserRole";
@@ -18,7 +19,8 @@ import ListHeader from "../../common/ListTable/ListHeader";
 import { ToastContainer } from "react-toastify";
 /* ---------------- Component Role Mapping ---------------- */
 const ComponentRoleMappingPage = () => {
-    const [users, setUsers] = useState([]);
+    const { user } = useContext(AppContext) || {};
+    const loggedInUserName = user?.userName;
     const [showModal, setShowModal] = useState(false);
     const [editingRow, setEditingRow] = useState();
     const currentISODate = new SyzyDate().toDateFormatString(DATE_FORMAT_ISO_YYYY_MM_DD_HH_MM_SS);
@@ -26,12 +28,6 @@ const ComponentRoleMappingPage = () => {
     const createMappingMutation = useCreateMappingMutation();
     const updateMappingMutation = useUpdateMappingMutation();
     const tableLoading = isLoading || createMappingMutation.isPending || updateMappingMutation.isPending;
-    const { data: profiles } = useListProfiles();
-    useEffect(() => {
-        if (profiles) {
-            setUsers(profiles.map((p) => ({ id: p.sk, name: p.name })));
-        }
-    }, [profiles]);
     /* ---------------- Component Options ---------------- */
     const components = useMemo(() => Object.keys(componentMap).map((key, index) => ({
         id: `Component#${String(index + 1).padStart(2, "0")}`,
@@ -50,10 +46,9 @@ const ComponentRoleMappingPage = () => {
     const handleSubmit = async (mappings) => {
         try {
             for (const map of mappings) {
-                const user = users.find(u => u.id === map.sourceId);
                 const role = roles.find(r => r.id === map.targetId);
                 const component = components.find(c => c.id === map.sourceId);
-                if (!user || !role || !component)
+                if (!role || !component || !loggedInUserName)
                     continue;
                 const payload = {
                     pk: role.id,
@@ -67,7 +62,7 @@ const ComponentRoleMappingPage = () => {
                     componentTitle: component.name,
                     status: map.status,
                     createdDt: editingRow?.createdDt || currentISODate,
-                    createdBy: `${user.id}#${user.name}`,
+                    createdBy: loggedInUserName,
                     disabledDt: map.status === Status.Inactive ? currentISODate : "",
                 };
                 const existing = await getCompoMappingByRoleIdAndCompoIdFun(payload.pk, payload.sk);

package/dist/hoc/withSyzyAuth.d.ts

@@ -0,0 +1 @@
+export declare function withSyzyAuth<P extends object>(WrappedComponent: React.ComponentType<P>): (props: P) => import("react/jsx-runtime").JSX.Element;

package/dist/hoc/withSyzyAuth.js

@@ -0,0 +1,86 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useEffect, useState } from "react";
+import AppContext from "../store/AppContext";
+import LoginForm from "../components/Login/Login";
+import { getCurrentUser } from "aws-amplify/auth";
+import { AppActionEnum } from "../store/AppAction";
+import { Client } from "../services/Client.Service";
+import { fetchAuthSession } from 'aws-amplify/auth';
+import { getComponentsByRoleOnly, getRolesMappingByUserIdAndEntityFun, useGetUserMappingByUserId } from "../api/mapping-api";
+import { EntityTypes } from "../domain/type/EntityTypes";
+import { Status } from "../domain/type/StatusEnum";
+export function withSyzyAuth(WrappedComponent) {
+    const ComponentWithAuthenticator = (props) => {
+        const [currentUser, setCurrentUser] = useState();
+        const { user, dispatch } = useContext(AppContext) || { user: undefined, allowedComponents: undefined, dispatch: undefined };
+        const [_isLoggedIn, setIsLoggedIn] = useState(false);
+        const [_emailVerifiedStatus, setEmailVerifiedStatus] = useState("");
+        const [isSessionReady, setIsSessionReady] = useState(false);
+        useEffect(() => {
+            if (!user?.userName) {
+                setCurrentUser(null);
+                setIsSessionReady(false);
+            }
+        }, [user]);
+        const fetchSession = async () => {
+            try {
+                const session = await getCurrentUser();
+                const userInfo = await fetchAuthSession({ forceRefresh: true });
+                setEmailVerifiedStatus(userInfo.tokens?.idToken?.payload.email_verified?.toString() ?? "");
+                if (session) {
+                    const userId = session.signInDetails?.loginId ?? session.username;
+                    setCurrentUser(userId);
+                }
+                else {
+                    setCurrentUser(null);
+                }
+            }
+            catch (err) {
+                setCurrentUser(null);
+            }
+        };
+        useEffect(() => {
+            fetchSession();
+        }, []);
+        useEffect(() => {
+            const stopResetScheduler = Client.startClientResetScheduler();
+            return () => stopResetScheduler();
+        }, []);
+        useEffect(() => {
+            setIsLoggedIn(!!user?.userName);
+        }, [user]);
+        const { userMappingByUserId } = useGetUserMappingByUserId(currentUser ?? "");
+        useEffect(() => {
+            const updateSession = async () => {
+                if (!currentUser)
+                    return;
+                const branchId = userMappingByUserId?.pk ?? "";
+                // Fetch roles of this user
+                const roleData = await getRolesMappingByUserIdAndEntityFun(branchId, currentUser, EntityTypes.ROLE);
+                const activeRoles = roleData.filter(r => r.status === Status.Active);
+                const roleNames = activeRoles.map(r => r.roleName);
+                // Fetch components for each active role
+                const compData = await Promise.all(activeRoles.map(role => getComponentsByRoleOnly(role.roleId)));
+                const allowedComponents = compData.flat().map(c => c.componentTitle);
+                // Build and dispatch user session
+                const userSession = {
+                    userName: currentUser,
+                    branchId,
+                    roles: roleNames,
+                    allowedComponents: [...new Set(allowedComponents)],
+                };
+                dispatch?.({ session: userSession, type: AppActionEnum.SignIn });
+                setIsSessionReady(true);
+            };
+            updateSession();
+        }, [currentUser, userMappingByUserId]);
+        // Login handler
+        const login = (loggedIn) => {
+            setIsLoggedIn(loggedIn);
+            if (loggedIn)
+                fetchSession();
+        };
+        return (_jsx("div", { children: currentUser === null ? _jsx(LoginForm, { login: login }) : _jsx(WrappedComponent, { ...props, isSessionReady: isSessionReady }) }));
+    };
+    return ComponentWithAuthenticator;
+}

package/dist/hooks/useCurrentUser.d.ts

@@ -0,0 +1,3 @@
+export declare const useCurrentUser: () => {
+    user: import("../store/AppContextType").AppSession;
+};

package/dist/hooks/useCurrentUser.js

@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import AppContext from "../store/AppContext";
+export const useCurrentUser = () => {
+    const { user } = useContext(AppContext);
+    return { user };
+};

package/dist/hooks/useDispatch.d.ts

@@ -0,0 +1,3 @@
+export declare const useDispatch: () => {
+    dispatch: import("react").Dispatch<import("../store/AppAction").AppAction> | undefined;
+};

package/dist/hooks/useDispatch.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import AppContext from "../store/AppContext";
+import { defaultSession } from "../store/AppContextType";
+export const useDispatch = () => {
+    const { dispatch } = useContext(AppContext) || { user: defaultSession };
+    return { dispatch };
+};

package/dist/hooks/usePermission.d.ts

@@ -0,0 +1 @@
+export declare function AmIPermitted(componentName: string): boolean;

package/dist/hooks/usePermission.js

@@ -0,0 +1,7 @@
+// hooks/usePermissions.ts
+import { useContext } from "react";
+import AppContext from "../store/AppContext";
+export function AmIPermitted(componentName) {
+    const { user } = useContext(AppContext) || {};
+    return user?.allowedComponents?.includes(componentName) ?? false;
+}

package/dist/store/AppAction.d.ts

@@ -0,0 +1,11 @@
+import { AppSession } from "./AppContextType";
+export declare enum AppActionEnum {
+    SignIn = "SIGNIN",
+    SignOut = "SIGNOUT"
+}
+export type AppAction = {
+    type: AppActionEnum.SignIn;
+    session: AppSession;
+} | {
+    type: AppActionEnum.SignOut;
+};

package/dist/store/AppAction.js

@@ -0,0 +1,5 @@
+export var AppActionEnum;
+(function (AppActionEnum) {
+    AppActionEnum["SignIn"] = "SIGNIN";
+    AppActionEnum["SignOut"] = "SIGNOUT";
+})(AppActionEnum || (AppActionEnum = {}));

package/dist/store/AppContext.d.ts

@@ -0,0 +1,3 @@
+import { AppContextProps } from './AppContextType';
+declare const AppContext: import("react").Context<AppContextProps | undefined>;
+export default AppContext;

package/dist/store/AppContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const AppContext = createContext(undefined);
+export default AppContext;

package/dist/store/AppContextType.d.ts

@@ -0,0 +1,12 @@
+import { AppAction } from "./AppAction";
+export interface AppSession {
+    userName: string;
+    branchId?: string;
+    roles: string[];
+    allowedComponents?: string[];
+}
+export declare const defaultSession: AppSession;
+export interface AppContextProps {
+    user: AppSession;
+    dispatch: React.Dispatch<AppAction>;
+}

package/dist/store/AppContextType.js

@@ -0,0 +1,6 @@
+export const defaultSession = {
+    userName: '',
+    branchId: undefined,
+    roles: [],
+    allowedComponents: [],
+};

package/dist/store/AppProvider.d.ts

@@ -0,0 +1,7 @@
+import React, { ReactNode } from "react";
+import 'react-toastify/dist/ReactToastify.css';
+interface AppProviderProps {
+    children: ReactNode;
+}
+declare const AppProvider: React.FC<AppProviderProps>;
+export default AppProvider;

package/dist/store/AppProvider.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { defaultSession } from "./AppContextType";
+import AppContext from "./AppContext";
+import { ToastContainer } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
+import { AppActionEnum } from "./AppAction";
+import { sessionStorage } from "aws-amplify/utils";
+import { APPHOSTSESSION_KEY, useSessionReducer } from "./SesssionReducer";
+import { logger } from "../util/Logger";
+const appContextReducer = (state, action) => {
+    logger.debug("Action:", action);
+    let newState = state;
+    switch (action.type) {
+        case AppActionEnum.SignIn:
+            newState = {
+                ...action.session,
+            };
+            break;
+        case AppActionEnum.SignOut:
+            newState = { ...defaultSession };
+            sessionStorage.clear();
+            break;
+        default:
+            newState = state;
+    }
+    return newState;
+};
+const AppProvider = ({ children }) => {
+    const [state, dispatch] = useSessionReducer(appContextReducer, defaultSession, APPHOSTSESSION_KEY);
+    return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, { position: "top-right", autoClose: 5000 }), _jsx(AppContext.Provider, { value: { user: state, dispatch }, children: children })] }));
+};
+export default AppProvider;

package/dist/store/HostedInContainerContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const HostedInContainerProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare const useHostedInContainer: () => boolean;

package/dist/store/HostedInContainerContext.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext } from 'react';
+const HostedInContainerContext = createContext(false);
+export const HostedInContainerProvider = ({ children }) => {
+    const isHosted = (() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        return urlParams.get('hosted_in_container') === 'true';
+    })();
+    return (_jsx(HostedInContainerContext.Provider, { value: isHosted, children: children }));
+};
+export const useHostedInContainer = () => useContext(HostedInContainerContext);

package/dist/store/SesssionReducer.d.ts

@@ -0,0 +1,4 @@
+import { Reducer, Dispatch } from 'react';
+import { AppSession } from './AppContextType';
+export declare const APPHOSTSESSION_KEY = "AppHostSession";
+export declare const useSessionReducer: <T extends AppSession, A>(reducer: Reducer<T, A>, initialState: T, storageKey: string) => [T, Dispatch<A>];

package/dist/store/SesssionReducer.js

@@ -0,0 +1,16 @@
+import { useReducer, useEffect } from 'react';
+export const APPHOSTSESSION_KEY = 'AppHostSession';
+export const useSessionReducer = (reducer, initialState, storageKey) => {
+    const [state, dispatch] = useReducer(reducer, initialState, () => {
+        const value = localStorage.getItem(storageKey); // use storageKey here
+        let retState = { ...initialState };
+        if (value) {
+            retState = JSON.parse(value);
+        }
+        return retState;
+    });
+    useEffect(() => {
+        localStorage.setItem(storageKey, JSON.stringify(state)); // same key
+    }, [storageKey, state]);
+    return [state, dispatch];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syzy/apphost",
-  "version": "1.0.17",
+  "version": "1.0.18",
   "private": false,
   "type": "module",
   "main": "dist/index.js",