work-club-manager/frontend/src/app/login/page.tsx

'use client';

import { useEffect } from 'react';
import { signIn, signOut, useSession } from 'next-auth/react';
import { useRouter, useSearchParams } from 'next/navigation';
import { Card, CardHeader, CardTitle, CardContent, CardFooter } from '@/components/ui/card';
import { Button } from '@/components/ui/button';

export default function LoginPage() {
  const { status } = useSession();
  const router = useRouter();
  const searchParams = useSearchParams();
  const hasError = searchParams.get('error') || searchParams.get('callbackUrl');

  useEffect(() => {
    if (status === 'authenticated') {
      router.push('/dashboard');
    }
  }, [status, router]);

  const handleSignIn = () => {
    signIn('keycloak', { callbackUrl: '/dashboard' });
  };

  const handleSwitchAccount = () => {
    const keycloakLogoutUrl = `${process.env.NEXT_PUBLIC_KEYCLOAK_ISSUER || 'http://localhost:8080/realms/workclub'}/protocol/openid-connect/logout?redirect_uri=${encodeURIComponent(window.location.origin + '/login')}`;
    signOut({ redirect: false }).then(() => {
      window.location.href = keycloakLogoutUrl;
    });
  };

  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 className="space-y-3">
          <Button onClick={handleSignIn} className="w-full">
            Sign in with Keycloak
          </Button>
          <Button variant="outline" onClick={handleSwitchAccount} className="w-full">
            Use different credentials
          </Button>
        </CardContent>
        {hasError && (
          <CardFooter>
            <p className="text-sm text-muted-foreground text-center w-full">
              Having trouble? Try &quot;Use different credentials&quot; to clear your session.
            </p>
          </CardFooter>
        )}
      </Card>
    </div>
  );
}