feat: handling SSR on home page

app/login/page.tsx

@@ -5,7 +5,16 @@ import { useRouter } from "next/navigation";
 import { ProfileForm } from "@/components/profile-form";
 import { AuthService } from "@/lib/auth-utils";
 import { UserProfile, Team } from "@/lib/types";
-import { Code2 } from "lucide-react";
+import { Code2, LogOut, Edit, X, Home } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import Link from "next/link";
 
 interface LoginPageProps {}
 
@@ -13,17 +22,16 @@ export default function LoginPage({}: LoginPageProps) {
   const [teams, setTeams] = useState<Team[]>([]);
   const [loading, setLoading] = useState(true);
   const [authenticating, setAuthenticating] = useState(false);
+  const [currentUser, setCurrentUser] = useState<UserProfile | null>(null);
+  const [isEditing, setIsEditing] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
     async function initialize() {
       try {
         // Vérifier si l'utilisateur est déjà connecté
-        const currentUser = await AuthService.getCurrentUser();
-        if (currentUser) {
-          router.push("/");
-          return;
-        }
+        const user = await AuthService.getCurrentUser();
+        setCurrentUser(user);
 
         // Charger les équipes
         const teamsResponse = await fetch("/api/teams");
@@ -39,13 +47,20 @@ export default function LoginPage({}: LoginPageProps) {
     }
 
     initialize();
-  }, [router]);
+  }, []);
 
   const handleSubmit = async (profile: UserProfile) => {
     setAuthenticating(true);
     try {
       await AuthService.login(profile);
-      router.push("/");
+      if (isEditing) {
+        // Si on modifie le profil existant, mettre à jour l'état
+        setCurrentUser(profile);
+        setIsEditing(false);
+      } else {
+        // Si c'est un nouveau login, rediriger
+        router.push("/");
+      }
     } catch (error) {
       console.error("Login failed:", error);
       // Vous pouvez ajouter une notification d'erreur ici
@@ -54,6 +69,24 @@ export default function LoginPage({}: LoginPageProps) {
     }
   };
 
+  const handleLogout = async () => {
+    try {
+      await AuthService.logout();
+      setCurrentUser(null);
+      setIsEditing(false);
+    } catch (error) {
+      console.error("Logout failed:", error);
+    }
+  };
+
+  const handleEdit = () => {
+    setIsEditing(true);
+  };
+
+  const handleCancelEdit = () => {
+    setIsEditing(false);
+  };
+
   if (loading) {
     return (
       <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
@@ -72,6 +105,100 @@ export default function LoginPage({}: LoginPageProps) {
     );
   }
 
+  // Si l'utilisateur est connecté et qu'on ne modifie pas
+  if (currentUser && !isEditing) {
+    const currentTeam = teams.find((t) => t.id === currentUser.teamId);
+
+    return (
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
+        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
+        <div className="absolute inset-0 bg-grid-white/5 bg-[size:50px_50px]" />
+
+        <div className="relative z-10 container mx-auto py-16 px-6">
+          <div className="text-center mb-12">
+            <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/5 border border-white/10 backdrop-blur-sm mb-6">
+              <Code2 className="h-4 w-4 text-blue-400" />
+              <span className="text-sm font-medium text-slate-200">
+                PeakSkills
+              </span>
+            </div>
+
+            <h1 className="text-4xl font-bold mb-4 text-white">
+              Vous êtes connecté
+            </h1>
+            <p className="text-lg text-slate-400 mb-8">
+              Gérez votre profil ou retournez à l'application
+            </p>
+          </div>
+
+          <div className="max-w-2xl mx-auto space-y-6">
+            {/* Informations utilisateur */}
+            <Card className="bg-white/5 border-white/10 backdrop-blur-sm">
+              <CardHeader>
+                <CardTitle className="text-white">Vos informations</CardTitle>
+                <CardDescription className="text-slate-400">
+                  Profil actuellement connecté
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <label className="text-sm font-medium text-slate-300">
+                      Prénom
+                    </label>
+                    <p className="text-white">{currentUser.firstName}</p>
+                  </div>
+                  <div>
+                    <label className="text-sm font-medium text-slate-300">
+                      Nom
+                    </label>
+                    <p className="text-white">{currentUser.lastName}</p>
+                  </div>
+                </div>
+                <div>
+                  <label className="text-sm font-medium text-slate-300">
+                    Équipe
+                  </label>
+                  <p className="text-white">
+                    {currentTeam?.name || "Équipe non trouvée"}
+                  </p>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Actions */}
+            <div className="flex gap-4 justify-center">
+              <Button
+                onClick={() => router.push("/")}
+                className="bg-blue-500 hover:bg-blue-600 text-white"
+              >
+                <Home className="w-4 h-4 mr-2" />
+                Retour à l'accueil
+              </Button>
+              <Button
+                onClick={handleEdit}
+                variant="outline"
+                className="border-white/20 text-white hover:bg-white/10"
+              >
+                <Edit className="w-4 h-4 mr-2" />
+                Modifier le profil
+              </Button>
+              <Button
+                onClick={handleLogout}
+                variant="outline"
+                className="border-red-500/50 text-red-400 hover:bg-red-500/10"
+              >
+                <LogOut className="w-4 h-4 mr-2" />
+                Se déconnecter
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Sinon, afficher le formulaire (nouvel utilisateur ou modification)
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 relative overflow-hidden">
       <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-blue-900/20 via-slate-900 to-slate-950" />
@@ -87,11 +214,26 @@ export default function LoginPage({}: LoginPageProps) {
           </div>
 
           <h1 className="text-4xl font-bold mb-4 text-white">
-            Bienvenue sur PeakSkills
+            {isEditing
+              ? "Modifier vos informations"
+              : "Bienvenue sur PeakSkills"}
           </h1>
           <p className="text-lg text-slate-400 mb-8">
-            Évaluez vos compétences techniques et suivez votre progression
+            {isEditing
+              ? "Mettez à jour vos informations personnelles"
+              : "Évaluez vos compétences techniques et suivez votre progression"}
           </p>
+
+          {isEditing && (
+            <Button
+              onClick={handleCancelEdit}
+              variant="outline"
+              className="mb-8 border-white/20 text-white hover:bg-white/10"
+            >
+              <X className="w-4 h-4 mr-2" />
+              Annuler
+            </Button>
+          )}
         </div>
 
         <div className="max-w-2xl mx-auto">
@@ -100,11 +242,21 @@ export default function LoginPage({}: LoginPageProps) {
               <div className="absolute inset-0 bg-black/20 backdrop-blur-sm z-10 flex items-center justify-center rounded-lg">
                 <div className="text-center">
                   <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-400 mx-auto mb-2"></div>
-                  <p className="text-white text-sm">Connexion en cours...</p>
+                  <p className="text-white text-sm">
+                    {isEditing
+                      ? "Mise à jour en cours..."
+                      : "Connexion en cours..."}
+                  </p>
                 </div>
               </div>
             )}
-            <ProfileForm teams={teams} onSubmit={handleSubmit} />
+            <ProfileForm
+              teams={teams}
+              onSubmit={handleSubmit}
+              initialProfile={
+                isEditing && currentUser ? currentUser : undefined
+              }
+            />
           </div>
         </div>
       </div>