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.
This commit is contained in:
parent
7ee0a52bea
commit
92c451efe5
3
.gitignore
vendored
3
.gitignore
vendored
@ -14,3 +14,6 @@ node_modules
|
|||||||
# Scripts de développement
|
# Scripts de développement
|
||||||
copy.sh
|
copy.sh
|
||||||
start.sh
|
start.sh
|
||||||
|
|
||||||
|
# Playbook développement
|
||||||
|
ansible/playbooks/dev
|
||||||
@ -6,9 +6,34 @@ import "./globals.css";
|
|||||||
import { MainNav } from "@/components/main-nav";
|
import { MainNav } from "@/components/main-nav";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { SessionProvider } from "next-auth/react";
|
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"] });
|
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 {
|
interface RootLayoutProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}
|
}
|
||||||
@ -17,9 +42,10 @@ export default function RootLayout({
|
|||||||
children,
|
children,
|
||||||
}: Readonly<RootLayoutProps>): JSX.Element {
|
}: Readonly<RootLayoutProps>): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<html lang='en'>
|
<html lang='fr'>
|
||||||
<body className={`${inter.className} bg-background text-foreground`}>
|
<body className={`${inter.className} bg-background text-foreground`}>
|
||||||
<SessionProvider>
|
<SessionProvider>
|
||||||
|
<AuthCheck>
|
||||||
<div className='min-h-screen flex flex-col'>
|
<div className='min-h-screen flex flex-col'>
|
||||||
<MainNav />
|
<MainNav />
|
||||||
<main className='flex-1'>{children}</main>
|
<main className='flex-1'>{children}</main>
|
||||||
@ -29,17 +55,18 @@ export default function RootLayout({
|
|||||||
Support
|
Support
|
||||||
</Link>
|
</Link>
|
||||||
<Link href='/help' className='hover:text-white'>
|
<Link href='/help' className='hover:text-white'>
|
||||||
Help Center
|
Centre d'aide
|
||||||
</Link>
|
</Link>
|
||||||
<Link href='/privacy' className='hover:text-white'>
|
<Link href='/privacy' className='hover:text-white'>
|
||||||
Privacy
|
Confidentialité
|
||||||
</Link>
|
</Link>
|
||||||
<Link href='/tos' className='hover:text-white'>
|
<Link href='/tos' className='hover:text-white'>
|
||||||
Terms of Service
|
Conditions d'utilisation
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
</AuthCheck>
|
||||||
</SessionProvider>
|
</SessionProvider>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -6,10 +6,13 @@ import { CalendarWidget } from "@/components/calendar-widget";
|
|||||||
import { News } from "@/components/news";
|
import { News } from "@/components/news";
|
||||||
import { Todo } from "@/components/todo";
|
import { Todo } from "@/components/todo";
|
||||||
|
|
||||||
|
export const metadata = {
|
||||||
|
title: "Enkun - Dashboard",
|
||||||
|
};
|
||||||
|
|
||||||
export default function Page() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<SpaceNav />
|
|
||||||
<div className='container mx-auto p-4'>
|
<div className='container mx-auto p-4'>
|
||||||
<div className='grid grid-cols-12 gap-4'>
|
<div className='grid grid-cols-12 gap-4'>
|
||||||
<div className='col-span-3'>
|
<div className='col-span-3'>
|
||||||
|
|||||||
@ -1,90 +1,14 @@
|
|||||||
"use client";
|
import { Metadata } from "next";
|
||||||
|
import { LoginCard } from "@/components/auth/login-card";
|
||||||
|
|
||||||
import { useState } from "react";
|
export const metadata: Metadata = {
|
||||||
import { Button } from "@/components/ui/button";
|
title: "Enkun - Connexion",
|
||||||
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 default function SignInPage() {
|
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 (
|
return (
|
||||||
<div className='flex items-center justify-center min-h-screen bg-gray-100'>
|
<div className='flex h-[80vh] w-screen flex-col items-center justify-center'>
|
||||||
<Card className='w-full max-w-md'>
|
<LoginCard />
|
||||||
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
32
front/components/auth/login-card.tsx
Normal file
32
front/components/auth/login-card.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user