fix token expiration issue, styling enhancements

Author: filippomc

applications/osb-portal/src/components/common/OSBPagination.tsx

@@ -24,7 +24,7 @@ const StyledPagination = styled(Pagination)(() => ({
   },
 }));
 
-export default (props: OSBPaginationProps) => {
+export const OSBPagination = (props: OSBPaginationProps) => {
   return (
     <StyledPagination
       sx={{ borderTop: props?.removeTopBorder ? 0 : `1px solid ${lineColor}` }}
@@ -36,3 +36,5 @@ export default (props: OSBPaginationProps) => {
     />
   );
 };
+
+export default OSBPagination;

applications/osb-portal/src/components/common/RepositoriesWorkspacesSearchField.tsx

@@ -14,7 +14,7 @@ import { debounce } from "lodash";
 
 const StyledTextField = styled(TextField)({
   backgroundColor: bgRegular,
-  padding: 1,
+  padding: "0.75rem",
   marginRight: "0.286rem",
   "& .MuiSvgIcon-root": {
     width: "1.25rem",

applications/osb-portal/src/components/common/SearchFilterReposWorkspaces.tsx

@@ -48,7 +48,7 @@ const StyledLabel = styled(Typography)({
   color: bgInputs,
   fontWeight: 700,
   fontSize: ".88rem",
-  marginBottom: 1,
+  marginBottom: "0.75rem",
   display: "inline-block",
 });
 
@@ -68,7 +68,7 @@ const StyledPopover = styled(Popover)({
       paddingBottom: 0,
       marginBottom: ".88rem",
       "& .MuiSvgIcon-root": {
-        marginLeft: 1,
+        marginLeft: "0.75rem",
         color: paragraph,
       },
       "& .MuiInputBase-root": {

applications/osb-portal/src/components/common/ThumbnailUploadArea.tsx

@@ -19,10 +19,10 @@ export const StyledDropZoneBox = styled(Box)({
   color: bgInputs,
   border: `2px dashed ${bgInputs}`,
   borderRadius: 5,
-  padding: 4,
+  padding: "2rem",
   "& .MuiTypography-subtitle2": {
-    marginTop: 1,
-    marginBottom: 2,
+    marginTop: "0.75rem",
+    marginBottom: "1rem",
   },
   "& .MuiButton-outlined": {
     margin: "0 auto",
@@ -43,7 +43,7 @@ export const StyledImagePreviewSection = styled("section")(() => ({
   flex: 1,
 }));
 
-export const dropAreaStyle = (error: any) => ({
+const dropAreaStyle = (error: any) => ({
   flex: 1,
   display: "flex",
   alignItems: "center",

applications/osb-portal/src/components/styled/FormLabel.tsx

@@ -8,10 +8,10 @@ import styled from "@mui/system/styled";
 
 export const StyledLabel = styled((props: any) => (
   <Typography {...props} component="label" />
-))(({ theme }) => ({
+))({
   fontWeight: "bold",
   lineHeight: "2em",
   fontSize: "0.8rem",
-}));
+});
 
 export default StyledLabel;

applications/osb-portal/src/components/workspace/WorkspaceEditor.tsx

@@ -24,7 +24,7 @@ import "react-markdown-editor-lite/lib/index.css";
 
 //style
 import styled from "@mui/system/styled";
-import { bgLight, radius, gutter, bgInputs, bgDarkest } from "../../theme";
+import { bgLight } from "../../theme";
 
 //types
 import { Workspace } from "../../types/workspace";
@@ -39,7 +39,7 @@ import { readFile } from "../../utils";
 
 
 
-const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
+const StyledAutocomplete = styled(Autocomplete)({
   "& .MuiChip-root": {
     backgroundColor: bgLight,
   },
@@ -51,7 +51,7 @@ const StyledAutocomplete = styled(Autocomplete)(({ theme }) => ({
       border: "0 !important",
     },
   },
-}));
+});
 
 interface WorkspaceEditProps {
   workspace: Workspace;

applications/osb-portal/src/pages/Repositories/RepositoriesCards.tsx

@@ -34,8 +34,6 @@ import RepositoryActionsMenu from "../../components/repository/RepositoryActions
 import CardTitle from "../../components/styled/CardTitle";
 import Grid from "@mui/material/Grid";
 import CardFooter from "../../components/styled/CardFooter";
-import { useNavigate } from "react-router-dom";
-import { refreshRepositories } from "../../store/actions/repositories";
 
 interface RepositoriesProps {
   repositories: OSBRepository[];
@@ -45,15 +43,15 @@ interface RepositoriesProps {
   refreshRepositories: () => void;
 }
 
-export const StyledContextChip = styled(Chip)((theme) => ({
+export const StyledContextChip = styled(Chip)({
   background: chipBg,
   borderRadius: "16px",
   maxWidth: "5.5rem",
   overflow: "hidden",
   color: chipTextColor,
   fontSize: "0.857rem",
   padding: "0.143rem",
-}));
+});
 
 export const RepositoriesListCards = (props: RepositoriesProps) => {
   const { repositories, loading, handleRepositoryClick, refreshRepositories } =

applications/osb-portal/src/service/UserService.tsx

@@ -64,6 +64,10 @@ function getCookie(name): string {
   return null;
 }
 
+function deleteCookie(name: string) {
+  document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=${getBaseDomain()}`;
+}
+
 function parseJwt(token: string) {
   if (!token) {
     return null;
@@ -84,7 +88,45 @@ function parseJwt(token: string) {
 }
 
 export function getToken(): string {
-  return getCookie("kc-access");
+  const token = getCookie("kc-access");
+  
+  if (!token) {
+    return null;
+  }
+
+  try {
+    // Use the existing parseJwt function to decode the token
+    const decoded = parseJwt(token);
+    
+    if (!decoded || !decoded.exp) {
+      // If token doesn't have expiration field, delete cookies (only if not localhost)
+      if (!window.location.hostname.includes('localhost')) {
+        deleteCookie("kc-access");
+        deleteCookie("accessToken");
+      }
+      return null;
+    }
+
+    // Check if token is expired (exp is in seconds, Date.now() is in milliseconds)
+    const currentTime = Math.floor(Date.now() / 1000);
+    if (decoded.exp < currentTime) {
+      // Token is expired, delete cookies (only if not localhost)
+      if (!window.location.hostname.includes('localhost')) {
+        deleteCookie("kc-access");
+        deleteCookie("accessToken");
+      }
+      return null;
+    }
+
+    return token;
+  } catch {
+    // If decoding fails, delete the cookies (only if not localhost)
+    if (!window.location.hostname.includes('localhost')) {
+      deleteCookie("kc-access");
+      deleteCookie("accessToken");
+    }
+    return null;
+  }
 }
 
 export function initUser(): UserInfo {