ADD: added new auth middleware and changed the roles value ind the jwt token to a array

frontend/src/components/utils/jwt.tsx

@@ -4,7 +4,7 @@ import { jwtDecode } from 'jwt-decode';
 export interface TokenPayload {
   userId: string;
   email: string;
-  role: string;
+  role: string[];
   exp: number;
 }
 

frontend/src/pages/AuthContext.tsx

@@ -4,7 +4,7 @@ import { getUserFromToken } from '../components/utils/jwt';
 interface AuthContextType {
   token: string | null;
   userId: string | null;
-  login: (token: string, userId: string, role: string) => void;
+  login: (token: string, userId: string, role: string[]) => void;
   logout: () => void;
 }
 
@@ -13,7 +13,7 @@ const AuthContext = createContext<AuthContextType | undefined>(undefined);
 export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [token, setToken] = useState<string | null>(null);
   const [userId, setUserId] = useState<string | null>(null);
-  const [role, setRole] = useState<string | null>(null);
+  const [role, setRole] = useState<string[] | null>(null);
 
   useEffect(() => {
     const storedToken = localStorage.getItem('token');
@@ -40,13 +40,13 @@ export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children
 
   }, []);
 
-  const login = (token: string, userId: string, role: string) => {
+  const login = (token: string, userId: string, role: string[]) => {
     setToken(token);
     setUserId(userId);
     setRole(role);
     localStorage.setItem('token', token);
     localStorage.setItem('userId', userId);
-    localStorage.setItem('role', role);
+    localStorage.setItem('role', JSON.stringify(role)); // Store array as string
   };
 
   const logout = () => {

frontend/src/pages/Teams.tsx

@@ -19,7 +19,7 @@ const TeamManagement = () => {
 
   const token = localStorage.getItem('token');
   const user = token ? getUserFromToken(token) : null;
-  const isAdmin = user?.role === 'admin';
+  const isAdmin = user?.role?.includes('admin');
 
   const fetchTeams = async () => {
     const res = await fetch('/api/teams', {

frontend/src/pages/ViewEditPlayer.tsx

@@ -9,7 +9,7 @@ const ViewEditPlayer = () => {
   const { id } = useParams<{ id: string }>();
   const token = localStorage.getItem('token');
   const currentUser = token ? getUserFromToken(token) : null;
-  const isAdmin = currentUser?.role === 'admin';
+  const isAdmin = currentUser?.role?.includes('admin');
 
   const [player, setPlayer] = useState<User | null>(null);
   const [name, setName] = useState('');