Avnyr cab80e6aef feat: add dashboard, projects, and persons pages with reusable components
Implemented the following:
- `DashboardPage`: displays an overview of stats, recent projects, and tabs for future analytics/reports.
- `ProjectsPage` and `PersonsPage`: include searchable tables, actions, and mobile-friendly card views.
- Integrated reusable components like `AuthLoading`, `DropdownMenu`, `Table`, and `Card`.
2025-05-16 14:43:14 +02:00

75 lines
2.5 KiB
TypeScript

"use client";
import { useState } from "react";
import { Github } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
export default function LoginPage() {
const [isLoading, setIsLoading] = useState(false);
const handleGitHubLogin = async () => {
setIsLoading(true);
try {
// Get the callbackUrl from the URL if present
const urlParams = new URLSearchParams(window.location.search);
const callbackUrl = urlParams.get('callbackUrl');
// Use the API service to get the GitHub OAuth URL
const { url } = await import('@/lib/api').then(module =>
module.authAPI.getGitHubOAuthUrl()
);
// Store the callbackUrl in sessionStorage to use after authentication
if (callbackUrl) {
sessionStorage.setItem('callbackUrl', callbackUrl);
}
// Redirect to GitHub OAuth page
window.location.href = url;
} catch (error) {
console.error('Login error:', error);
setIsLoading(false);
// You could add error handling UI here
}
};
return (
<div className="flex min-h-screen items-center justify-center bg-background p-4">
<Card className="w-full max-w-md">
<CardHeader className="space-y-1 text-center">
<CardTitle className="text-2xl font-bold">Connexion</CardTitle>
<CardDescription>
Connectez-vous pour accéder à l&apos;application de création de groupes
</CardDescription>
</CardHeader>
<CardContent className="flex flex-col gap-4">
<Button
variant="outline"
onClick={handleGitHubLogin}
disabled={isLoading}
className="w-full"
>
{isLoading ? (
<span className="flex items-center gap-2">
<span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
Connexion en cours...
</span>
) : (
<span className="flex items-center gap-2">
<Github className="h-5 w-5" />
Se connecter avec GitHub
</span>
)}
</Button>
</CardContent>
<CardFooter className="flex flex-col text-center text-sm text-muted-foreground">
<p>
En vous connectant, vous acceptez nos conditions d&apos;utilisation et notre politique de confidentialité.
</p>
</CardFooter>
</Card>
</div>
);
}