Checkpoint: Ajout d'une page de choix de connexion à la racine (/) permettant de sélectionner entre "Connexion Manus OAuth" et "Connexion locale". La page affiche deux cartes avec icônes distinctes (bouclier bleu pour OAuth, clé verte pour connexion locale) et redirige vers la page appropriée selon le choix de l'utilisateur. Cette page résout le problème de redirection automatique vers OAuth en production en offrant un point d'entrée clair pour les deux modes d'authentification.

This commit is contained in:
Manus Sandbox
2025-11-23 05:45:41 -05:00
parent 614680ac95
commit 83b32f44ab
3 changed files with 113 additions and 1 deletions

View File

@@ -0,0 +1,92 @@
import { useLocation } from "wouter";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { APP_LOGO, APP_TITLE, getLoginUrl } from "@/const";
import { KeyRound, Shield } from "lucide-react";
export default function LoginChoice() {
const [, setLocation] = useLocation();
const handleManusLogin = () => {
window.location.href = getLoginUrl();
};
const handleLocalLogin = () => {
setLocation("/login");
};
return (
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-4">
<Card className="w-full max-w-2xl">
<CardHeader className="space-y-4">
<div className="flex justify-center">
<img src={APP_LOGO} alt="Logo" className="h-20 w-auto" />
</div>
<div className="text-center">
<CardTitle className="text-3xl font-bold">{APP_TITLE}</CardTitle>
<CardDescription className="mt-3 text-base">
Choisissez votre méthode de connexion
</CardDescription>
</div>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{/* Connexion Manus OAuth */}
<Card className="border-2 hover:border-primary transition-colors cursor-pointer group" onClick={handleManusLogin}>
<CardHeader className="text-center pb-4">
<div className="flex justify-center mb-4">
<div className="p-4 bg-blue-100 rounded-full group-hover:bg-blue-200 transition-colors">
<Shield className="h-12 w-12 text-blue-600" />
</div>
</div>
<CardTitle className="text-xl">Connexion Manus</CardTitle>
<CardDescription className="mt-2">
Utilisez votre compte Manus (Google, Microsoft, Apple)
</CardDescription>
</CardHeader>
<CardContent>
<Button
className="w-full"
size="lg"
onClick={handleManusLogin}
>
Se connecter avec Manus
</Button>
</CardContent>
</Card>
{/* Connexion Locale */}
<Card className="border-2 hover:border-primary transition-colors cursor-pointer group" onClick={handleLocalLogin}>
<CardHeader className="text-center pb-4">
<div className="flex justify-center mb-4">
<div className="p-4 bg-green-100 rounded-full group-hover:bg-green-200 transition-colors">
<KeyRound className="h-12 w-12 text-green-600" />
</div>
</div>
<CardTitle className="text-xl">Connexion Locale</CardTitle>
<CardDescription className="mt-2">
Utilisez votre identifiant et mot de passe
</CardDescription>
</CardHeader>
<CardContent>
<Button
className="w-full"
variant="outline"
size="lg"
onClick={handleLocalLogin}
>
Se connecter localement
</Button>
</CardContent>
</Card>
</div>
<div className="mt-6 text-center text-sm text-gray-600">
<p>Vous n'avez pas de compte ?</p>
<p className="mt-1">Contactez l'administrateur</p>
</div>
</CardContent>
</Card>
</div>
);
}