refactor: remove ProfileForm and update loading state display

- Removed the ProfileForm component from HomePage, simplifying the UI during loading.
- Added a loading spinner and message to indicate redirection to the login page, enhancing user experience.

app/login/page.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useEffect, useState } from "react";
+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";
+
+interface LoginPageProps {}
+
+export default function LoginPage({}: LoginPageProps) {
+  const [teams, setTeams] = useState<Team[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [authenticating, setAuthenticating] = 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;
+        }
+
+        // Charger les équipes
+        const teamsResponse = await fetch("/api/teams");
+        if (teamsResponse.ok) {
+          const teamsData = await teamsResponse.json();
+          setTeams(teamsData);
+        }
+      } catch (error) {
+        console.error("Error initializing login page:", error);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    initialize();
+  }, [router]);
+
+  const handleSubmit = async (profile: UserProfile) => {
+    setAuthenticating(true);
+    try {
+      await AuthService.login(profile);
+      router.push("/");
+    } catch (error) {
+      console.error("Login failed:", error);
+      // Vous pouvez ajouter une notification d'erreur ici
+    } finally {
+      setAuthenticating(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">
+        <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="flex items-center justify-center min-h-[400px]">
+            <div className="text-center">
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400 mx-auto mb-4"></div>
+              <p className="text-white">Chargement...</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  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">
+            Bienvenue sur PeakSkills
+          </h1>
+          <p className="text-lg text-slate-400 mb-8">
+            Évaluez vos compétences techniques et suivez votre progression
+          </p>
+        </div>
+
+        <div className="max-w-2xl mx-auto">
+          <div className="relative">
+            {authenticating && (
+              <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>
+                </div>
+              </div>
+            )}
+            <ProfileForm teams={teams} onSubmit={handleSubmit} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -2,7 +2,6 @@
 
 import { useEffect, useState } from "react";
 import { useEvaluation } from "@/hooks/use-evaluation";
-import { ProfileForm } from "@/components/profile-form";
 import { SkillsRadarChart } from "@/components/radar-chart";
 import {
   Card,
@@ -58,8 +57,7 @@ function getScoreColors(score: number) {
 }
 
 export default function HomePage() {
-  const { userEvaluation, skillCategories, teams, loading, updateProfile } =
+  const { userEvaluation, skillCategories, teams, loading } = useEvaluation();
-    useEvaluation();
 
   const { setUserInfo } = useUser();
   const [expandedCategory, setExpandedCategory] = useState<string | null>(null);
@@ -104,17 +102,13 @@ export default function HomePage() {
         <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="flex items-center justify-center min-h-[400px]">
-            <h1 className="text-4xl font-bold mb-4 text-white">
+            <div className="text-center">
-              Bienvenue sur PeakSkills
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-400 mx-auto mb-4"></div>
-            </h1>
+              <p className="text-white">
-            <p className="text-lg text-slate-400 mb-8">
+                Redirection vers la page de connexion...
-              Évaluez vos compétences techniques et suivez votre progression
               </p>
             </div>
-
-          <div className="max-w-2xl mx-auto">
-            <ProfileForm teams={teams} onSubmit={updateProfile} />
           </div>
         </div>
       </div>

middleware.ts

@@ -0,0 +1,54 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const COOKIE_NAME = "peakSkills_userId";
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+
+  // Pages qui ne nécessitent pas d'authentification
+  const publicPaths = ["/login"];
+
+  // Pages API qui ne nécessitent pas d'authentification
+  const publicApiPaths = ["/api/auth", "/api/teams"];
+
+  // Vérifier si c'est une route publique
+  if (
+    publicPaths.includes(pathname) ||
+    publicApiPaths.some((path) => pathname.startsWith(path))
+  ) {
+    return NextResponse.next();
+  }
+
+  // Vérifier si c'est un fichier statique
+  if (
+    pathname.includes("/_next/") ||
+    pathname.includes("/favicon.ico") ||
+    pathname.includes("/public/")
+  ) {
+    return NextResponse.next();
+  }
+
+  // Vérifier le cookie d'authentification
+  const userId = request.cookies.get(COOKIE_NAME)?.value;
+
+  if (!userId) {
+    // Rediriger vers la page de login si pas authentifié
+    const loginUrl = new URL("/login", request.url);
+    return NextResponse.redirect(loginUrl);
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: [
+    /*
+     * Match all request paths except for the ones starting with:
+     * - api (API routes)
+     * - _next/static (static files)
+     * - _next/image (image optimization files)
+     * - favicon.ico (favicon file)
+     */
+    "/((?!_next/static|_next/image|favicon.ico).*)",
+  ],
+};