feat(ui): add login page, club picker, and dashboard
Implements Task 21: Login Page + First-Login Club Picker + Dashboard
New pages:
- Login page: Sign in with Keycloak button, clean centered layout
- Select club page: Club selection cards for multi-club users
- Dashboard: Summary with task/shift counts and quick links
Key features:
- Login delegates to Keycloak via NextAuth signIn('keycloak')
- Club picker shows cards with name + sport type
- Clicking club → setActiveClub() → redirects to /dashboard
- Dashboard shows active club name, open tasks count, upcoming shifts count
- Quick action links to /tasks and /shifts pages
- TanStack Query hooks with proper filters (status: 'Open', future shifts only)
TDD:
- 2 login tests (component export, signIn exists)
- 2 select-club tests (component export, useTenant exists)
- 4 dashboard tests (component export, hooks exist)
Task 21 tests: 8/8 pass. Build succeeds (9 routes registered).
Note: 38 pre-existing tests from Tasks 10,18-20 fail due to Bun+vitest
test infrastructure issues (vi.mocked() not supported, localStorage mock).
This is technical debt to be addressed separately.
This commit is contained in:
26
frontend/src/app/login/page.tsx
Normal file
26
frontend/src/app/login/page.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
'use client';
|
||||
|
||||
import { signIn } from 'next-auth/react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export default function LoginPage() {
|
||||
const handleSignIn = () => {
|
||||
signIn('keycloak');
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center min-h-screen bg-gray-50">
|
||||
<Card className="w-96">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-2xl text-center">WorkClub Manager</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Button onClick={handleSignIn} className="w-full">
|
||||
Sign in with Keycloak
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user