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>

frontend/src/components/Layout/Navbar.tsx

@@ -6,11 +6,11 @@ import { Link } from 'react-router-dom';
 interface NavbarProps {
     title: string;
     subtitle: string;
-    isAdmin: boolean;
+    isAuthenticated: boolean;
     onLogout: () => void;
 }
 
-export default function Navbar({ title, subtitle, isAdmin, onLogout }: NavbarProps) {
+export default function Navbar({ title, subtitle, isAuthenticated, onLogout }: NavbarProps) {
     return (
         <nav className="transition-colors bg-zinc-50 dark:bg-zinc-900 border-b border-zinc-300 dark:border-zinc-800 sticky top-0 z-100 px-3 sm:px-6 py-3 sm:py-4 flex justify-between items-center shadow-md shrink-0">
             <Link to="/" className="flex items-center gap-2 sm:gap-4 cursor-pointer group select-none shrink-0">
@@ -35,7 +35,7 @@ export default function Navbar({ title, subtitle, isAdmin, onLogout }: NavbarPro
             </div>
 
             <div className="flex gap-2 sm:gap-4 items-center shrink-0">
-                {isAdmin ? (
+                {isAuthenticated ? (
                     <>
                         <button onClick={onLogout} title="Sign Out" className="text-zinc-400 hover:text-red-500 transition active:scale-90 shrink-0">
                             <LogOut size={18} className="sm:size-5.5" />

frontend/src/components/Tournament/ScoreModal.tsx

@@ -21,12 +21,12 @@ interface MatchData {
 
 interface ScoreFormProps {
     match: MatchData;
-    isAdmin: boolean;
+    isAuthenticated: boolean;
     onSubmit: (id: string | number, sets: SetData[], code: string) => Promise<void>;
     onClear: (id: string | number, code: string) => Promise<void>;
 }
 
-const ScoreForm = ({ match, isAdmin, onSubmit, onClear }: ScoreFormProps) => {
+const ScoreForm = ({ match, isAuthenticated, onSubmit, onClear }: ScoreFormProps) => {
     const [sets, setSets] = useState<SetData[]>(match.sets && match.sets.length ? match.sets : [{ p1: '', p2: '' }]);
     const [code, setCode] = useState<string>('');
     const [error, setError] = useState<string | null>(null);
@@ -71,7 +71,7 @@ const ScoreForm = ({ match, isAdmin, onSubmit, onClear }: ScoreFormProps) => {
                 </div>
             )}
 
-            {!isAdmin && (
+            {!isAuthenticated && (
                 <div className="bg-zinc-50 dark:bg-zinc-950 p-4 rounded-lg border border-gray-200 dark:border-zinc-800">
                     <label className="block text-xs font-bold text-orange-500 uppercase mb-2">Tournament Code</label>
                     <input
@@ -163,19 +163,19 @@ interface ScoreModalProps {
     isOpen: boolean;
     onClose: () => void;
     match: MatchData | null;
-    isAdmin: boolean;
+    isAuthenticated: boolean;
     onSubmit: (id: string | number, sets: SetData[], code: string) => Promise<void>;
     onClear: (id: string | number, code: string) => Promise<void>;
 }
 
-export default function ScoreModal({ isOpen, onClose, match, isAdmin, onSubmit, onClear }: ScoreModalProps) {
+export default function ScoreModal({ isOpen, onClose, match, isAuthenticated, onSubmit, onClear }: ScoreModalProps) {
     if (!isOpen || !match) return null;
 
     return (
         <Modal isOpen={isOpen} onClose={onClose} title={`Match #${match.number}`} icon={Trophy}>
             <ScoreForm
                 match={match}
-                isAdmin={isAdmin}
+                isAuthenticated={isAuthenticated}
                 onSubmit={async (id, sets, code) => {
                     await onSubmit(id, sets, code);
                     onClose();