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`.
75 lines
2.5 KiB
TypeScript
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'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'utilisation et notre politique de confidentialité.
|
|
</p>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|