Fix Broken/Empty Pages On Some System

docker/docker-compose-prod.yml

@@ -12,10 +12,14 @@ services:
       - postgres
     networks:
       - prod_network
+    ports:
+      # This is generally expected to run under a reverse proxy, like Caddy.
+      - "127.0.0.1:6006:6006"
     environment:
       GBANS_DATABASE_DSN: postgresql://gbans:gbans@postgres:5432/gbans
       GBANS_GENERAL_STEAM_KEY: ${GBANS_GENERAL_STEAM_KEY}
     command: ./gbans serve
+
   postgres:
     image: postgis/postgis:15-3.3
     restart: always
@@ -30,9 +34,26 @@ services:
     networks:
       - prod_network
 
+  minio:
+    # Files are currently designed to be served from
+    image: docker.io/bitnami/minio:2023
+    restart: always
+    environment:
+      # *must* be >= 8 chars or minio will not start
+      - MINIO_ROOT_USER=gbansgbans
+      - MINIO_ROOT_PASSWORD=gbansgbans
+    ports:
+      - '127.0.0.1:9000:9000'
+      - '127.0.0.1:9001:9001'
+    volumes:
+      - 'minio_data:/bitnami/minio/data'
+    networks:
+      - prod_network
+
 volumes:
   dl_cache:
   gbans_db:
+  minio_data:
 
 networks:
   prod_network:

docker/docker-compose-test.yml

@@ -21,14 +21,27 @@ services:
     expose:
       - "5434"
     ports:
-      - 5434:5434
+      - "5434:5434"
     environment:
       POSTGRES_USER: gbans
       POSTGRES_DB: gbans
       POSTGRES_PASSWORD: gbans
     networks:
       - test_network
     command: "-p 5434"
+  minio:
+    # Files are currently designed to be served from
+    image: docker.io/bitnami/minio:2023
+    restart: always
+    environment:
+      # *must* be >= 8 chars or minio will not start
+      - MINIO_ROOT_USER=gbansgbans
+      - MINIO_ROOT_PASSWORD=gbansgbans
+    ports:
+      - '127.0.0.1:9000:9000'
+      - '127.0.0.1:9001:9001'
+    networks:
+      - test_network
 
 networks:
   test_network:

frontend/package.json

@@ -37,13 +37,13 @@
     "@ebay/nice-modal-react": "^1.2.13",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@eslint/js": "^8.53.0",
-    "@mui/base": "5.0.0-beta.23",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/lab": "^5.0.0-alpha.152",
-    "@mui/material": "^5.14.17",
-    "@mui/system": "^5.14.17",
-    "@mui/utils": "^5.14.17",
+    "@eslint/js": "^8.54.0",
+    "@mui/base": "5.0.0-beta.24",
+    "@mui/icons-material": "^5.14.18",
+    "@mui/lab": "^5.0.0-alpha.153",
+    "@mui/material": "^5.14.18",
+    "@mui/system": "^5.14.18",
+    "@mui/utils": "^5.14.18",
     "@mui/x-charts": "^6.18.1",
     "@mui/x-date-pickers": "^6.18.1",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -54,22 +54,23 @@
     "@types/leaflet": "^1.9.8",
     "@types/lodash-es": "^4.17.11",
     "@types/minimatch": "^5.1.2",
-    "@types/node": "^20.9.0",
+    "@types/node": "^20.9.1",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
     "@types/steamid": "^2.0.3",
     "@types/video-react": "^0.15.4",
     "@types/webpack": "^5.28.5",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "base64-js": "^1.5.1",
     "chai": "^4.3.10",
     "cidr-js": "^2.3.1",
     "copy-webpack-plugin": "^11.0.0",
+    "core-js": "3.33.2",
     "cross-env": "^7.0.3",
     "css-loader": "^6.8.1",
     "date-fns": "^2.30.0",
-    "eslint": "^8.53.0",
+    "eslint": "^8.54.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-jest": "^27.6.0",
     "eslint-plugin-no-loops": "^0.3.0",
@@ -93,22 +94,22 @@
     "minimatch": "^9.0.3",
     "moment": "^2.29.4",
     "node-sass": "^9.0.0",
-    "prettier": "^3.0.3",
+    "prettier": "^3.1.0",
     "pretty-bytes": "^6.1.1",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-leaflet": "^4.2.1",
-    "react-router": "^6.18.0",
-    "react-router-dom": "^6.18.0",
+    "react-router": "^6.19.0",
+    "react-router-dom": "^6.19.0",
     "react-timer-hook": "^3.0.7",
     "react-use-websocket": "^4.5.0",
     "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "steamid": "^2.0.0",
     "string-to-color": "^2.2.2",
     "style-loader": "^3.3.3",
-    "ts-loader": "^9.5.0",
+    "ts-loader": "^9.5.1",
     "ts-node": "^10.9.1",
     "typescript": "^5.2.2",
     "url-loader": "^4.1.1",

frontend/src/api/auth.ts

@@ -1,5 +1,7 @@
+import 'core-js/stable/atob';
 import { jwtDecode, JwtPayload } from 'jwt-decode';
 import { logErr } from '../util/errors';
+import { emptyOrNullString } from '../util/types';
 import { apiCall, EmptyBody } from './common';
 
 export const refreshKey = 'refresh';
@@ -34,19 +36,23 @@ export const refreshToken = async () => {
 };
 
 export const isTokenExpired = (token: string): boolean => {
-    if (!token || token == '') {
+    if (emptyOrNullString(token)) {
         return true;
     }
 
-    const claims: JwtPayload = jwtDecode(token);
-    if (!claims || !claims.exp) {
-        return true;
-    }
-
-    const expirationTimeInSeconds = claims.exp * 1000;
     const now = new Date();
 
-    return expirationTimeInSeconds <= now.getTime();
+    try {
+        const claims: JwtPayload = jwtDecode(token);
+        if (!claims || !claims.exp) {
+            return true;
+        }
+
+        const expirationTimeInSeconds = claims.exp * 1000;
+        return expirationTimeInSeconds <= now.getTime();
+    } catch (e) {
+        return true;
+    }
 };
 
 export const writeAccessToken = (token: string) => {

frontend/src/api/common.ts

@@ -1,3 +1,4 @@
+import { logErr } from '../util/errors';
 import { parseDateTime } from '../util/text';
 import { emptyOrNullString } from '../util/types';
 import {
@@ -126,10 +127,13 @@ export const apiCall = async <
         credentials: 'include',
         method: method.toUpperCase()
     };
-
-    const accessToken = await getAccessToken(isRefresh ?? false);
-
-    if (accessToken != '') {
+    let accessToken = '';
+    try {
+        accessToken = await getAccessToken(isRefresh ?? false);
+    } catch (e) {
+        logErr(e);
+    }
+    if (!emptyOrNullString(accessToken)) {
         headers['Authorization'] = `Bearer ${accessToken}`;
     }
 

frontend/src/component/LazyTable.tsx

@@ -213,8 +213,8 @@ export const LazyTableHeader = <T,>({
                                                 col.sortKey != sortColumn
                                                     ? 'none'
                                                     : order == 'asc'
-                                                    ? 'underline'
-                                                    : 'overline'
+                                                      ? 'underline'
+                                                      : 'overline'
                                         }}
                                         variant={'button'}
                                     >