@canmingir/link 1.2.5 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/context/reducer.js

@@ -1,13 +1,10 @@
-import config from "../config/config";
 import { jwtDecode } from "jwt-decode";
 import { storage } from "@nucleoidjs/webstorage";
 
-const { name } = config();
-
 let login = true;
 const itemId = storage.get("itemId");
 try {
-  const token = storage.get(name, "accessToken");
+  const token = storage.get("link", "accessToken");
   const decodedToken = jwtDecode(token);
 
   if (decodedToken.exp * 1000 < Date.now()) {

package/src/http/index.js

@@ -15,8 +15,8 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use((request) => {
-  const { name, base } = config();
-  const accessToken = storage.get(name, "accessToken");
+  const { base } = config();
+  const accessToken = storage.get("link", "accessToken");
 
   if (!accessToken) {
     window.location.href = base === "/" ? "/login" : `${base}/login`;
@@ -85,14 +85,17 @@ export const fetcher = (url) => instance.get(url).then((res) => res.data);
 
 const refreshAuthLogic = async (failedRequest) => {
   try {
-    const { name, appId } = config();
+    const { appId } = config();
 
     const projectId = storage.get("projectId");
 
+    const identityProvider = storage.get("link", "identityProvider");
+
     const { data } = await oauth.post("/oauth", {
-      refreshToken: storage.get(name, "refreshToken"),
+      refreshToken: storage.get("link", "refreshToken"),
       appId,
       projectId,
+      identityProvider,
     });
 
     const accessToken = data.accessToken;
@@ -100,13 +103,13 @@ const refreshAuthLogic = async (failedRequest) => {
     failedRequest.response.config.headers["Authorization"] =
       "Bearer " + accessToken;
 
-    storage.set(name, "accessToken", accessToken);
+    storage.set("link", "accessToken", accessToken);
     return Promise.resolve();
   } catch (error) {
     const { name, base } = config();
 
-    storage.remove(name, "accessToken");
-    storage.remove(name, "refreshToken");
+    storage.remove("link", "accessToken");
+    storage.remove("link", "refreshToken");
 
     window.location.href = `${window.location.origin}${base}/login`;
     return Promise.reject(error);
@@ -122,7 +125,7 @@ refreshInterceptor(instance, refreshAuthLogic, {
   statusCodes: [401, 403],
   shouldRefresh: () => {
     const { name, base } = config();
-    const token = storage.get(name, "accessToken");
+    const token = storage.get("link", "accessToken");
 
     if (!token) {
       window.location.href = `${window.location.origin}${base}/login`;

package/src/http/user.js

@@ -1,6 +1,8 @@
 import axios from "axios";
 import config from "../config/config.js";
 import http from "./index";
+import { jwtDecode } from "jwt-decode";
+import oauth from "./oauth";
 import { storage } from "@nucleoidjs/webstorage";
 
 const instance = axios.create({
@@ -11,15 +13,8 @@ const instance = axios.create({
   },
 });
 
-function getProjectName() {
-  const { name } = config();
-  if (name) {
-    return name;
-  }
-}
-
 instance.interceptors.request.use(async (request) => {
-  const refreshToken = await storage.get(getProjectName(), "refreshToken");
+  const refreshToken = await storage.get("link", "refreshToken");
   if (refreshToken) {
     request.headers["Authorization"] = `Bearer ${refreshToken}`;
   }
@@ -28,25 +23,62 @@ instance.interceptors.request.use(async (request) => {
 
 instance.getUserDetails = async () => {
   try {
-    const refreshToken = await storage.get(getProjectName(), "refreshToken");
+    const refreshToken = await storage.get("link", "refreshToken");
+
     if (!refreshToken) {
       console.log("No refresh token found");
       return null;
     }
 
+    let accessToken = await storage.get("link", "accessToken");
+
+    if (!accessToken) {
+      console.log("No access token found");
+      return null;
+    }
+
+    try {
+      const decodedToken = jwtDecode(accessToken);
+      const isExpired = decodedToken.exp * 1000 < Date.now();
+
+      if (isExpired) {
+        console.log(
+          "Access token expired, refreshing before fetching user details..."
+        );
+        const { appId } = config();
+        const projectId = storage.get("projectId");
+        const identityProvider = storage.get("link", "identityProvider");
+
+        const { data } = await oauth.post("/oauth", {
+          refreshToken,
+          appId,
+          projectId,
+          identityProvider,
+        });
+
+        accessToken = data.accessToken;
+        storage.set("link", "accessToken", accessToken);
+        console.log(
+          "Access token refreshed successfully, now fetching user details"
+        );
+      }
+    } catch (error) {
+      console.error("Error checking or refreshing token:", error);
+      return null;
+    }
+
     const response = await http.get("/oauth/user", {
       headers: {
-        'X-Refresh-Token': refreshToken
-      }
+        "X-Refresh-Token": refreshToken,
+      },
     });
-    
+
     if (response.data && response.data.user) {
       return response.data.user;
     }
-    
+
     console.log("No user data received from server");
     return null;
-    
   } catch (error) {
     console.error("Error fetching user details from server:", error);
     return null;
@@ -55,7 +87,7 @@ instance.getUserDetails = async () => {
 
 instance.getPermittedUsers = async () => {
   const userIds = [];
-  const refreshToken = await storage.get(getProjectName(), "refreshToken");
+  const refreshToken = await storage.get("link", "refreshToken");
   const response = await http.get("/permissions");
 
   response.data.forEach((permission) => {
@@ -75,4 +107,4 @@ instance.getPermittedUsers = async () => {
   return users;
 };
 
-export default instance;
+export default instance;

package/src/layouts/DashboardLayout/nav-mini.jsx

@@ -9,15 +9,16 @@ import SettingsDialog from "../../widgets/SettingsDialog";
 import Stack from "@mui/material/Stack";
 import config from "../../config/config";
 import { hideScroll } from "../../theme/css";
+import { useResponsive } from "../../hooks/use-responsive";
 import { useUser } from "../../hooks/use-user";
 
 import React, { useState } from "react";
 
 export default function NavMini({ only }) {
   const { user } = useUser();
-  const { sideMenu } = config().menu;
+  const { sideMenu, actionButtons } = config().menu;
   const [openSettings, setOpenSettings] = useState(false);
-
+  const lgUp = useResponsive("up", "lg");
   const handleCloseSettings = () => {
     setOpenSettings(false);
   };
@@ -57,21 +58,40 @@ export default function NavMini({ only }) {
           }}
         />
         <Box sx={{ flexGrow: 1 }} />
-        <Button
-          data-cy="end-item"
-          fullWidth={true}
-          onClick={() => setOpenSettings(true)}
+        <Stack
+          direction={"column"}
+          alignItems={"center"}
+          justifyItems={"center"}
+          sx={{
+            marginBottom: lgUp ? 3 : 0,
+            position: lgUp ? "static" : "fixed",
+            bottom: lgUp ? "auto" : 66,
+            width: "100%",
+          }}
+          gap={2}
         >
-          <Iconify
-            icon={"ic:baseline-settings"}
+          {actionButtons &&
+            actionButtons.map((Action, index) => (
+              <Box key={index} component={Action}></Box>
+            ))}
+          <Button
+            onClick={() => setOpenSettings(true)}
             sx={{
-              width: 32,
-              height: 32,
-              color: "text.secondary",
-              mx: "auto",
+              position: lgUp ? "static" : "fixed",
+              bottom: lgUp ? "auto" : 16,
+              width: "100%",
             }}
-          />
-        </Button>
+          >
+            <Iconify
+              icon={"ic:baseline-settings"}
+              sx={{
+                width: 32,
+                height: 32,
+                color: "text.secondary",
+              }}
+            />
+          </Button>
+        </Stack>
         <SettingsDialog open={openSettings} handleClose={handleCloseSettings} />
       </Stack>
     </Box>

package/src/layouts/FullScreenLayout/nav-horizontal.jsx

@@ -16,7 +16,7 @@ function NavHorizontal() {
 
   const { user } = useUser();
 
-  const { sideMenu } = config().menu;
+  const { sideMenu, actionButtons } = config().menu;
   return (
     <AppBar component="div" data-cy="nav-horizontal">
       <Toolbar
@@ -35,6 +35,11 @@ function NavHorizontal() {
             ...theme.mixins.toolbar,
           }}
         />
+
+        {actionButtons &&
+          actionButtons.map((Action, index) => (
+            <Box key={index} component={Action}></Box>
+          ))}
       </Toolbar>
 
       <HeaderShadow />

package/src/layouts/common/ProjectBar/index.jsx

@@ -1,10 +1,3 @@
-import { Button, DialogActions } from "@mui/material";
-import Dialog, { dialogClasses } from "@mui/material/Dialog";
-import React, { useCallback, useState } from "react";
-import { publish, useEvent } from "@nucleoidai/react-event";
-import { storage, useStorage } from "@nucleoidjs/webstorage";
-import { useMediaQuery, useTheme } from "@mui/material";
-
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Iconify from "../../../components/Iconify";
@@ -29,9 +22,16 @@ import { useEventListener } from "../../../hooks/use-event-listener";
 import { useNavigate } from "react-router-dom";
 import useProjects from "../../../hooks/useProjects";
 
+import { Button, DialogActions } from "@mui/material";
+import Dialog, { dialogClasses } from "@mui/material/Dialog";
+import React, { useCallback, useState } from "react";
+import { publish, useEvent } from "@nucleoidai/react-event";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
+import { useMediaQuery, useTheme } from "@mui/material";
+
 function ProjectBar() {
   const label = config().template?.projectBar?.label;
-  const { appId, name } = config();
+  const { appId } = config();
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down(435));
   const { loading, projects, getProjects } = useProjects();
@@ -91,15 +91,15 @@ function ProjectBar() {
   const handleSelect = (project) => {
     const { id: projectId } = project;
 
-    const refreshToken = storage.get(name, "refreshToken");
-    const provider = storage.get(name, "provider");
+    const refreshToken = storage.get("link", "refreshToken");
+    const identityProvider = storage.get("link", "identityProvider");
 
     oauth
-      .post("/oauth", { appId, refreshToken, projectId, provider })
+      .post("/oauth", { appId, refreshToken, projectId, identityProvider })
       .then(({ data }) => {
         const { refreshToken, accessToken } = data;
-        storage.set(name, "accessToken", accessToken);
-        storage.set(name, "refreshToken", refreshToken);
+        storage.set("link", "accessToken", accessToken);
+        storage.set("link", "refreshToken", refreshToken);
         storage.set("projectId", projectId);
       })
       .finally(() => {

package/src/layouts/common/account-popover.jsx

@@ -19,7 +19,6 @@ import CustomPopover, { usePopover } from "../../components/custom-popover";
 // ----------------------------------------------------------------------
 
 export default function AccountPopover() {
-  const { name } = config();
   const { options } = config().menu;
   const router = useRouter();
   const { user } = useUser();
@@ -28,8 +27,8 @@ export default function AccountPopover() {
 
   const handleLogout = async () => {
     try {
-      storage.remove(name, "accessToken");
-      storage.remove(name, "refreshToken");
+      storage.remove("link", "accessToken");
+      storage.remove("link", "refreshToken");
       popover.onClose();
       router.replace("/login");
     } catch (error) {

package/src/lib/Flow/FlowNode.jsx

@@ -25,23 +25,19 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
     styleTokens = style;
   }
 
-  let plugins = null;
+  let _plugin = null;
   if (plugin) {
     if (typeof plugin === "function") {
-      plugin = plugin(type, node);
-    } else if (
-      typeof plugin === "object" &&
-      (typeof plugin.renderNode === "function" ||
-        typeof plugin.resolveStyle === "function")
-    ) {
-      plugins = plugin;
+      _plugin = plugin(type, node) || null;
+    } else if (typeof plugin === "object") {
+      _plugin = plugin;
     }
   }
 
   let pluginTokens = {};
-  if (plugins && typeof plugins.resolveStyle === "function") {
+  if (_plugin && typeof _plugin.style === "function") {
     pluginTokens =
-      plugins.resolveStyle({
+      _plugin.style({
         node,
         style: styleTokens,
       }) || {};
@@ -194,8 +190,8 @@ const FlowNode = ({ node, type, variant, style, plugin }) => {
   };
 
   const renderContent = () => {
-    if (plugin && typeof plugin.renderNode === "function") {
-      return plugin.renderNode({
+    if (_plugin && typeof _plugin.node === "function") {
+      return _plugin.node({
         node,
         title,
         subtitle,

package/src/pages/Callback.jsx

@@ -1,5 +1,3 @@
-import { useEffect, useRef } from "react";
-
 import Page from "../layouts/Page";
 import React from "react";
 import config from "../config/config";
@@ -10,6 +8,8 @@ import { useContext } from "../ContextProvider/ContextProvider";
 import { useLocation } from "react-router-dom";
 import { useNavigate } from "react-router-dom";
 
+import { useEffect, useRef } from "react";
+
 function Callback() {
   const { project: appConfig, name, appId } = config();
   const projectBar = config().template?.projectBar;
@@ -28,12 +28,12 @@ function Callback() {
     const parsedQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
     const { code, error, error_description, state } = parsedQuery;
 
-    let provider;
+    let identityProvider;
     let stateData = {};
 
     if (state) {
       stateData = JSON.parse(decodeURIComponent(state));
-      provider = stateData.provider;
+      identityProvider = stateData.identityProvider;
     }
 
     if (error) {
@@ -59,7 +59,7 @@ function Callback() {
       google,
     };
 
-    const providerConfig = providerConfigs[provider];
+    const providerConfig = providerConfigs[identityProvider];
 
     if (!providerConfig) {
       console.error("Could not determine OAuth provider or redirect URI");
@@ -85,7 +85,7 @@ function Callback() {
         appId,
         code,
         redirectUri,
-        provider: provider,
+        identityProvider: identityProvider,
         grant_type: "authorization_code",
       })
       .then(({ data }) => {
@@ -93,10 +93,10 @@ function Callback() {
         const refreshToken = data.refreshToken;
         const userInfo = data.user;
 
-        storage.set(name, "accessToken", accessToken);
-        storage.set(name, "refreshToken", refreshToken);
+        storage.set("link", "accessToken", accessToken);
+        storage.set("link", "refreshToken", refreshToken);
         // TODO - update provider info
-        storage.set(name, "provider", provider);
+        storage.set("link", "identityProvider", identityProvider);
 
         dispatch({ type: "LOGIN", payload: { user: userInfo } });
 

package/src/pages/LoginPage.jsx

@@ -11,7 +11,10 @@ function LoginPage() {
   const navigate = useNavigate();
 
   function token() {
-    if (storage.get(name, "refreshToken") && storage.get(name, "accessToken")) {
+    if (
+      storage.get("link", "refreshToken") &&
+      storage.get("link", "accessToken")
+    ) {
       return true;
     } else {
       return false;

package/src/widgets/Login/Login.jsx

@@ -19,7 +19,10 @@ export default function Auth0LoginView() {
   const navigate = useNavigate();
 
   function token() {
-    if (storage.get(name, "refreshToken") && storage.get(name, "accessToken")) {
+    if (
+      storage.get("link", "refreshToken") &&
+      storage.get("link", "accessToken")
+    ) {
       return true;
     } else {
       return false;

package/src/widgets/LoginForm/LoginForm.jsx

@@ -1,17 +1,17 @@
-import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
-import React, { useState } from "react";
-
 import NucleoidLoginForm from "../../components/NucleoidLoginForm";
 import SocialLoginButtons from "../../components/SocialLoginButtons";
 import Stack from "@mui/material/Stack";
 import config from "../../config/config";
 
+import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
+import React, { useState } from "react";
+
 const handleOAuthLogin = (
   { redirectUri, authUrl, clientId, scope },
-  provider
+  identityProvider
 ) => {
   const state = JSON.stringify({
-    provider: provider,
+    identityProvider: identityProvider,
   });
   const encodedState = encodeURIComponent(state);
   window.location.href = `${authUrl}?client_id=${clientId}&scope=${scope}&response_type=code&redirect_uri=${redirectUri}&state=${encodedState}`;