Merge pull request #10 from Hadi2102060/main

Last update

Author: Hadi2102060

src/assets/image.png

@@ -1,7 +1,7 @@
 import { Button } from "./ui/button";
 import { ArrowRight, Calendar, Trophy } from "lucide-react";
 import { Link } from "react-router-dom";
-import bannerImage from "@/assets/hero-cricket.jpg";
+import bannerImage from "@/assets/unnamed.jpg";
 import { useEffect, useState } from "react";
 import { fetchAllTournaments } from "@/lib/api";
 

src/assets/unnamed.jpg

@@ -13,6 +13,4 @@ export function buildUrl(path: string): string {
   const base = API_BASE.endsWith("/") ? API_BASE.slice(0, -1) : API_BASE;
   const p = path.startsWith("/") ? path : `/${path}`;
   return `${base}${p}`;
-}
-
-
+}

src/components/Hero.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import { AuthContext, AuthContextValue, User, Credentials } from './auth-shared';
-import { login as apiLogin, registerUser as apiRegister, getAuthToken, fetchCurrentPlayerProfile } from "@/lib/api";
+import { login as apiLogin, registerUser as apiRegister, getAuthToken, fetchCurrentPlayerProfile, setGlobalLogoutHandler, clearAuthTokens } from "@/lib/api";
 
 const STORAGE_USERS = "cpl_users";
 const STORAGE_CURRENT = "cpl_current_user";
@@ -116,12 +116,38 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   const logout = async () => {
     try {
-      localStorage.removeItem(ACCESS_TOKEN_KEY);
+      clearAuthTokens();
     } finally {
       persistCurrent(null);
     }
   };
 
+  // Set up global logout handler for session expiry
+  useEffect(() => {
+    setGlobalLogoutHandler(() => {
+      persistCurrent(null);
+      // Redirect to login page if we're in a protected route
+      if (window.location.pathname !== '/auth' && !window.location.pathname.startsWith('/admin')) {
+        window.location.href = '/auth';
+      }
+    });
+
+    // Listen for session expiry from BroadcastChannel
+    let bc: BroadcastChannel | null = null;
+    try {
+      bc = new BroadcastChannel('auth-updates');
+      bc.onmessage = (ev: MessageEvent) => {
+        if (ev.data?.type === 'session-expired') {
+          logout();
+        }
+      };
+    } catch {}
+
+    return () => {
+      try { bc?.close(); } catch {}
+    };
+  }, []);
+
   const updateUser = async (patch: Partial<User>) => {
     // Without a dedicated profile API, update only local state for now.
     if (!user) throw new Error('Not authenticated');

src/config/api.ts

@@ -416,6 +416,21 @@ export function getAuthToken(): string | null {
   }
 }
 
+// Global logout handler for session expiry
+let globalLogoutHandler: (() => void) | null = null;
+export function setGlobalLogoutHandler(handler: () => void) {
+  globalLogoutHandler = handler;
+}
+
+// Clear auth tokens
+export function clearAuthTokens() {
+  try {
+    localStorage.removeItem(ACCESS_TOKEN_KEY_PRIMARY);
+    localStorage.removeItem(ACCESS_TOKEN_KEY_FALLBACK);
+    localStorage.removeItem("cpl_current_user");
+  } catch {}
+}
+
 async function apiFetchJson<T>(path: string, init?: JsonInit): Promise<T> {
   const { body, headers, ...rest } = init || {};
   const token = getAuthToken();
@@ -424,6 +439,24 @@ async function apiFetchJson<T>(path: string, init?: JsonInit): Promise<T> {
     body: body !== undefined ? JSON.stringify(body) : undefined,
     ...rest,
   });
+  
+  // Check for session expiry (401 Unauthorized or 403 Forbidden)
+  if (res.status === 401 || res.status === 403) {
+    // Clear tokens
+    clearAuthTokens();
+    // Trigger global logout handler if set
+    if (globalLogoutHandler) {
+      globalLogoutHandler();
+    }
+    // Also trigger logout via BroadcastChannel for cross-tab communication
+    try {
+      const bc = new BroadcastChannel('auth-updates');
+      bc.postMessage({ type: 'session-expired' });
+      bc.close();
+    } catch {}
+    throw new Error('Session expired. Please login again.');
+  }
+  
   if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
   // Handle 204 No Content
   if (res.status === 204) return undefined as unknown as T;
@@ -456,6 +489,21 @@ export async function uploadPlayerProfileImage(file: File): Promise<unknown> {
   fd.set("file", file);
   const token = getAuthToken();
   const res = await fetch(buildUrl(API_PATHS.uploadPlayerProfile), { method: "POST", headers: token ? { Authorization: `Bearer ${token}` } : undefined, body: fd });
+  
+  // Check for session expiry
+  if (res.status === 401 || res.status === 403) {
+    clearAuthTokens();
+    if (globalLogoutHandler) {
+      globalLogoutHandler();
+    }
+    try {
+      const bc = new BroadcastChannel('auth-updates');
+      bc.postMessage({ type: 'session-expired' });
+      bc.close();
+    } catch {}
+    throw new Error('Session expired. Please login again.');
+  }
+  
   if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
   return await res.json();
 }

src/context/AuthContext.tsx

@@ -3,7 +3,7 @@ import Footer from "@/components/Footer";
 import { Card, CardContent } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Trophy, Users, Target, Shield, Sparkles, Handshake } from "lucide-react";
-import heroImg from "@/assets/hero-cricket.jpg";
+import heroImg from "@/assets/unnamed.jpg";
 import { Link } from "react-router-dom";
 import Stats from "@/components/Stats";