Ajout d'une vérification d'authentification dans le layout principal, mise à jour des métadonnées des pages et création d'un nouveau composant LoginCard pour la connexion avec Keycloak. Mise à jour du fichier .gitignore pour inclure les playbooks de développement.

2025-02-21 14:10:21 +01:00 · 2025-02-21 14:10:21 +01:00 · 92c451efe5
commit 92c451efe5
parent 7ee0a52bea
5 changed files with 95 additions and 106 deletions
--- a/.gitignore
+++ b/.gitignore
@ -14,3 +14,6 @@ node_modules
 # Scripts de développement
 copy.sh
 start.sh
+
+# Playbook développement
+ansible/playbooks/dev
--- a/front/app/layout.tsx
+++ b/front/app/layout.tsx
@ -6,9 +6,34 @@ import "./globals.css";
 import { MainNav } from "@/components/main-nav";
 import Link from "next/link";
 import { SessionProvider } from "next-auth/react";
+import { useSession } from "next-auth/react";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect } from "react";

 const inter = Inter({ subsets: ["latin"] });

+function AuthCheck({ children }: { children: React.ReactNode }) {
+  const { data: session, status } = useSession();
+  const pathname = usePathname();
+  const router = useRouter();
+
+  useEffect(() => {
+    if (status === "unauthenticated" && pathname !== "/signin") {
+      router.push("/signin");
+    }
+  }, [status, router, pathname]);
+
+  if (status === "loading") {
+    return <div>Chargement...</div>;
+  }
+
+  if (status === "unauthenticated" && pathname !== "/signin") {
+    return null;
+  }
+
+  return <>{children}</>;
+}
+
 interface RootLayoutProps {
  children: React.ReactNode;
 }
@ -17,9 +42,10 @@ export default function RootLayout({
  children,
 }: Readonly<RootLayoutProps>): JSX.Element {
  return (
-    <html lang='en'>
+    <html lang='fr'>
      <body className={`${inter.className} bg-background text-foreground`}>
        <SessionProvider>
+          <AuthCheck>
            <div className='min-h-screen flex flex-col'>
              <MainNav />
              <main className='flex-1'>{children}</main>
@ -29,17 +55,18 @@ export default function RootLayout({
                    Support
                  </Link>
                  <Link href='/help' className='hover:text-white'>
-                  Help Center
+                    Centre d'aide
                  </Link>
                  <Link href='/privacy' className='hover:text-white'>
-                  Privacy
+                    Confidentialité
                  </Link>
                  <Link href='/tos' className='hover:text-white'>
-                  Terms of Service
+                    Conditions d'utilisation
                  </Link>
                </div>
              </footer>
            </div>
+          </AuthCheck>
        </SessionProvider>
      </body>
    </html>
--- a/front/app/page.tsx
+++ b/front/app/page.tsx
@ -6,10 +6,13 @@ import { CalendarWidget } from "@/components/calendar-widget";
 import { News } from "@/components/news";
 import { Todo } from "@/components/todo";

+export const metadata = {
+  title: "Enkun - Dashboard",
+};
+
 export default function Page() {
  return (
    <div>
-      <SpaceNav />
      <div className='container mx-auto p-4'>
        <div className='grid grid-cols-12 gap-4'>
          <div className='col-span-3'>
--- a/front/app/signin/page.tsx
+++ b/front/app/signin/page.tsx
@ -1,90 +1,14 @@
-"use client";
+import { Metadata } from "next";
+import { LoginCard } from "@/components/auth/login-card";

-import { useState } from "react";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import { FaGoogle } from "react-icons/fa";
+export const metadata: Metadata = {
+  title: "Enkun - Connexion",
+};

 export default function SignInPage() {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Handle sign-in logic here
-    console.log("Sign in attempted with:", email, password);
-  };
-
  return (
-    <div className='flex items-center justify-center min-h-screen bg-gray-100'>
-      <Card className='w-full max-w-md'>
-        <CardHeader>
-          <CardTitle>Sign In</CardTitle>
-          <CardDescription>
-            Enter your credentials to access your account
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <form onSubmit={handleSubmit} className='space-y-4'>
-            <div className='space-y-2'>
-              <Label htmlFor='email'>Email</Label>
-              <Input
-                id='email'
-                type='email'
-                placeholder='your@email.com'
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
-            </div>
-            <div className='space-y-2'>
-              <Label htmlFor='password'>Password</Label>
-              <Input
-                id='password'
-                type='password'
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                required
-              />
-            </div>
-            <Button type='submit' className='w-full'>
-              Sign In
-            </Button>
-          </form>
-        </CardContent>
-        <CardFooter className='flex flex-col space-y-4'>
-          <div className='relative w-full'>
-            <div className='absolute inset-0 flex items-center'>
-              <span className='w-full border-t' />
-            </div>
-            <div className='relative flex justify-center text-xs uppercase'>
-              <span className='bg-white px-2 text-muted-foreground'>
-                Or continue with
-              </span>
-            </div>
-          </div>
-          <div className='grid grid-cols-2 gap-4'>
-            <Button variant='outline' onClick={() => console.log("SSO login")}>
-              SSO
-            </Button>
-            <Button
-              variant='outline'
-              onClick={() => console.log("Google login")}
-            >
-              <FaGoogle className='mr-2 h-4 w-4' /> Google
-            </Button>
-          </div>
-        </CardFooter>
-      </Card>
+    <div className='flex h-[80vh] w-screen flex-col items-center justify-center'>
+      <LoginCard />
    </div>
  );
 }
--- a/front/components/auth/login-card.tsx
+++ b/front/components/auth/login-card.tsx
@ -0,0 +1,32 @@
+"use client";
+
+import { signIn } from "next-auth/react";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export function LoginCard() {
+  return (
+    <Card className='w-[400px]'>
+      <CardHeader>
+        <CardTitle>Bienvenue sur Enkun</CardTitle>
+        <CardDescription>
+          Connectez-vous pour accéder à votre espace
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Button
+          className='w-full'
+          onClick={() => signIn("keycloak", { callbackUrl: "/" })}
+        >
+          Se connecter avec Keycloak
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}