lvs/brackets
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Added ref login

Browse Source
This commit is contained in:
WilliamSoderberg
2026-03-15 21:41:40 +01:00 Verified
parent f42f93abbe
commit 8031e8cfd5
18 changed files with 120 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Layout/Layout.tsx
+20 -5
View File
@@ -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
+3 -3
View File
@@ -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
+6 -6
View File
@@ -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();
frontend/src/pages/Dashboard.tsx
+6 -8
View File
@@ -8,7 +8,6 @@ import TournamentForm from '../components/Forms/TournamentForm';
import Modal from '../components/UI/Modal';
import api, { WS_URL } from '../services/api';
export interface TournamentType {
id: string | number;
name: string;
@@ -21,13 +20,13 @@ export interface TournamentType {
interface OutletContextType {
setNavTitle: (title: string) => void;
setNavSubtitle: (subtitle: string) => void;
isAdmin: boolean;
role: 'admin' | 'ref' | null;
showSettings: boolean;
setShowSettings: (show: boolean) => void;
}
export default function Dashboard() {
const { setNavTitle, setNavSubtitle, isAdmin, showSettings, setShowSettings } = useOutletContext<OutletContextType>();
const { setNavTitle, setNavSubtitle, role, showSettings, setShowSettings } = useOutletContext<OutletContextType>();
const [tournaments, setTournaments] = useState<TournamentType[]>([]);
const [editTarget, setEditTarget] = useState<TournamentType | null>(null);
@@ -48,7 +47,6 @@ export default function Dashboard() {
useEffect(() => {
setNavTitle('Dashboard');
setNavSubtitle('');
// eslint-disable-next-line react-hooks/set-state-in-effect
void loadDashboard();
localStorage.removeItem('volley_view');
@@ -114,7 +112,7 @@ export default function Dashboard() {
<div className="h-full overflow-y-auto pt-8 sm:pt-12 pb-32">
<div className="container mx-auto max-w-5xl px-4 space-y-12">
{isAdmin && (
{role === 'admin' && (
<div className="flex justify-center md:justify-end">
<button onClick={() => { setEditTarget(null); setShowSettings(true); }} className="bg-orange-600 hover:bg-orange-500 text-white px-5 py-2.5 rounded-xl flex items-center gap-2 text-[10px] font-black uppercase tracking-wider shadow-xl shadow-orange-600/20 active:scale-95 transition">
<Plus size={16} strokeWidth={4} /> Create
@@ -131,7 +129,7 @@ export default function Dashboard() {
</span> Live Events
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{groups.live.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
{groups.live.map(t => <DashCard key={t.id} t={t} isAdmin={role === 'admin'} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
</div>
</section>
)}
@@ -143,7 +141,7 @@ export default function Dashboard() {
{groups.future.length > 0 ? (
<>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{futureShow.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
{futureShow.map(t => <DashCard key={t.id} t={t} isAdmin={role === 'admin'} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
</div>
{groups.future.length > 4 && (
<div className="mt-8 text-center">
@@ -165,7 +163,7 @@ export default function Dashboard() {
</button>
{showPast && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 opacity-75 hover:opacity-100 transition-opacity">
{groups.past.map(t => <DashCard key={t.id} t={t} isAdmin={isAdmin} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
{groups.past.map(t => <DashCard key={t.id} t={t} isAdmin={role === 'admin'} onSelect={(id) => navigate(`/tournaments/${id}`)} onEdit={handleEdit} />)}
</div>
)}
</section>
frontend/src/pages/Login.tsx
+6 -2
View File
@@ -43,8 +43,12 @@ export default function Login() {
</div>
</div>
<h1 className="text-2xl font-black text-center text-zinc-900 dark:text-white tracking-tight mb-2">Admin Access</h1>
<p className="text-center text-zinc-500 text-sm font-medium mb-8">Enter administrative credentials</p>
<h1 className="text-2xl font-black text-center text-zinc-900 dark:text-white tracking-tight mb-2">
Staff Login
</h1>
<p className="text-center text-zinc-500 text-sm font-medium mb-8">
Enter staff credentials
</p>
{error && (
<div className="mb-6 p-4 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-xs font-bold uppercase tracking-wide rounded-xl text-center border border-red-100 dark:border-red-900/50">
frontend/src/pages/Tournament.tsx
+8 -4
View File
@@ -52,12 +52,12 @@ export interface ProcessedMatch extends RawMatch {
interface OutletContextType {
setNavTitle: (title: string) => void;
setNavSubtitle: (subtitle: string) => void;
isAdmin: boolean;
role: 'admin' | 'ref' | null;
}
export default function Tournament() {
const { id } = useParams<{ id: string }>();
const { setNavTitle, setNavSubtitle, isAdmin } = useOutletContext<OutletContextType>();
const { setNavTitle, setNavSubtitle, role } = useOutletContext<OutletContextType>();
const [matches, setMatches] = useState<ProcessedMatch[]>([]);
const [view, setView] = useState<string>(() => localStorage.getItem('volley_view') || 'bracket');
@@ -190,7 +190,11 @@ export default function Tournament() {
<CalendarDays size={16} /> Schedule
</button>
</div>
{isAdmin && <button onClick={() => setShowSettings(true)} className="p-2 text-zinc-400 hover:text-orange-600 transition rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800"><SlidersHorizontal size={20} /></button>}
{role === 'admin' && (
<button onClick={() => setShowSettings(true)} className="p-2 text-zinc-400 hover:text-orange-600 transition rounded-lg hover:bg-zinc-100 dark:hover:bg-zinc-800">
<SlidersHorizontal size={20} />
</button>
)}
</div>
<div className="flex-1 overflow-hidden relative print:overflow-visible print:h-auto print:block">
@@ -205,7 +209,7 @@ export default function Tournament() {
isOpen={!!scoreMatch}
onClose={() => setScoreMatch(null)}
match={scoreMatch}
isAdmin={isAdmin}
isAuthenticated={!!role}
onClear={async (mid: string | number, c: string) => {
await api.delete(`/tournaments/${id}/matches/${mid}/score?code=${encodeURIComponent(c || '')}`);
setScoreMatch(null);