Added ref login

frontend/src/components/Layout/Layout.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import { getToken } from '../../services/api';
+import api, { getToken } from '../../services/api';
 import ThemeButton from "../UI/ThemeButton";
 import Navbar from './Navbar';
 
@@ -14,17 +14,32 @@ interface LayoutProps {
 export interface OutletContextType {
     setNavTitle: React.Dispatch<React.SetStateAction<string>>;
     setNavSubtitle: React.Dispatch<React.SetStateAction<string>>;
-    isAdmin: boolean;
+    role: 'admin' | 'ref' | null;
     showSettings: boolean;
     setShowSettings: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 export default function Layout({ darkMode, setDarkMode }: LayoutProps) {
-    const [isAdmin] = useState<boolean>(!!getToken());
+    const [role, setRole] = useState<'admin' | 'ref' | null>(null);
     const [navTitle, setNavTitle] = useState<string>('');
     const [navSubtitle, setNavSubtitle] = useState<string>('');
     const [showSettings, setShowSettings] = useState<boolean>(false);
 
+    useEffect(() => {
+        const verifyAuth = async () => {
+            if (getToken()) {
+                try {
+                    const res = await api.get<{ role: 'admin' | 'ref' }>('/auth/check');
+                    setRole(res.role);
+                } catch {
+                    setRole(null);
+                    localStorage.removeItem('volleyToken');
+                }
+            }
+        };
+        verifyAuth();
+    }, []);
+
     useEffect(() => {
         if (navTitle) {
             document.title = `${navTitle} | VolleyManager`;
@@ -41,7 +56,7 @@ export default function Layout({ darkMode, setDarkMode }: LayoutProps) {
     const contextValue: OutletContextType = {
         setNavTitle,
         setNavSubtitle,
-        isAdmin,
+        role,
         showSettings,
         setShowSettings
     };
@@ -52,7 +67,7 @@ export default function Layout({ darkMode, setDarkMode }: LayoutProps) {
                 <Navbar
                     title={navTitle}
                     subtitle={navSubtitle}
-                    isAdmin={isAdmin}
+                    isAuthenticated={!!role}
                     onLogout={handleLogout}
                 />
             </div>