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
5
.gitignore
vendored
5
.gitignore
vendored
@ -13,4 +13,7 @@ node_modules
|
||||
|
||||
# Scripts de développement
|
||||
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 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,29 +42,31 @@ 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>
|
||||
<div className='min-h-screen flex flex-col'>
|
||||
<MainNav />
|
||||
<main className='flex-1'>{children}</main>
|
||||
<footer className='w-full p-4 bg-black text-white/80'>
|
||||
<div className='flex space-x-4 text-sm'>
|
||||
<Link href='/support' className='hover:text-white'>
|
||||
Support
|
||||
</Link>
|
||||
<Link href='/help' className='hover:text-white'>
|
||||
Help Center
|
||||
</Link>
|
||||
<Link href='/privacy' className='hover:text-white'>
|
||||
Privacy
|
||||
</Link>
|
||||
<Link href='/tos' className='hover:text-white'>
|
||||
Terms of Service
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
<AuthCheck>
|
||||
<div className='min-h-screen flex flex-col'>
|
||||
<MainNav />
|
||||
<main className='flex-1'>{children}</main>
|
||||
<footer className='w-full p-4 bg-black text-white/80'>
|
||||
<div className='flex space-x-4 text-sm'>
|
||||
<Link href='/support' className='hover:text-white'>
|
||||
Support
|
||||
</Link>
|
||||
<Link href='/help' className='hover:text-white'>
|
||||
Centre d'aide
|
||||
</Link>
|
||||
<Link href='/privacy' className='hover:text-white'>
|
||||
Confidentialité
|
||||
</Link>
|
||||
<Link href='/tos' className='hover:text-white'>
|
||||
Conditions d'utilisation
|
||||
</Link>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</AuthCheck>
|
||||
</SessionProvider>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
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