From 9551fb997ce279cf413066b881239f8bf818e3c3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Arthur=20CRAH=C3=89?= <crahe.arthur@gmail.com>
Date: Sun, 28 Apr 2024 23:32:01 +0200
Subject: [PATCH] header for disconnected pages

---
 .../(disconnected)/(front-office)/layout.tsx  | 19 ------
 .../{(front-office) => }/connexion/layout.tsx |  0
 .../{(front-office) => }/connexion/page.tsx   |  0
 frontend/src/app/(disconnected)/layout.tsx    | 24 +++++++
 .../mot-de-passe-oublie/layout.tsx            |  0
 .../mot-de-passe-oublie/page.tsx              |  0
 .../reinitialisation-mot-de-passe/layout.tsx  |  0
 .../reinitialisation-mot-de-passe/loading.tsx |  0
 .../reinitialisation-mot-de-passe/page.tsx    |  0
 .../verification-mail/layout.tsx              |  0
 .../verification-mail/loading.tsx             |  0
 .../verification-mail/page.tsx                |  0
 frontend/src/components/header.tsx            |  3 +-
 frontend/src/components/offlineHeader.tsx     | 67 +++++++++++++++++++
 14 files changed, 92 insertions(+), 21 deletions(-)
 delete mode 100644 frontend/src/app/(disconnected)/(front-office)/layout.tsx
 rename frontend/src/app/(disconnected)/{(front-office) => }/connexion/layout.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/connexion/page.tsx (100%)
 create mode 100644 frontend/src/app/(disconnected)/layout.tsx
 rename frontend/src/app/(disconnected)/{(front-office) => }/mot-de-passe-oublie/layout.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/mot-de-passe-oublie/page.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/reinitialisation-mot-de-passe/layout.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/reinitialisation-mot-de-passe/loading.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/reinitialisation-mot-de-passe/page.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/verification-mail/layout.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/verification-mail/loading.tsx (100%)
 rename frontend/src/app/(disconnected)/{(front-office) => }/verification-mail/page.tsx (100%)
 create mode 100644 frontend/src/components/offlineHeader.tsx

diff --git a/frontend/src/app/(disconnected)/(front-office)/layout.tsx b/frontend/src/app/(disconnected)/(front-office)/layout.tsx
deleted file mode 100644
index a9e4272..0000000
--- a/frontend/src/app/(disconnected)/(front-office)/layout.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-// /connexion/layout.tsx
-
-import React from 'react';
-import type { Metadata } from 'next';
-import { Card } from 'antd';
-export const metadata: Metadata = {
-       title: 'Ressources relationnelles',
-};
-export default function RootLayout({ children }: { children: React.ReactNode }) {
-       return (
-              <div className="flex flex-row justify-center items-center h-screen">
-                     <Card className='w-fit'>
-                            <div className="p-10">
-                                   {children}
-                            </div>
-                     </Card>
-              </div>
-       );
-}
diff --git a/frontend/src/app/(disconnected)/(front-office)/connexion/layout.tsx b/frontend/src/app/(disconnected)/connexion/layout.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/connexion/layout.tsx
rename to frontend/src/app/(disconnected)/connexion/layout.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/connexion/page.tsx b/frontend/src/app/(disconnected)/connexion/page.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/connexion/page.tsx
rename to frontend/src/app/(disconnected)/connexion/page.tsx
diff --git a/frontend/src/app/(disconnected)/layout.tsx b/frontend/src/app/(disconnected)/layout.tsx
new file mode 100644
index 0000000..6e24148
--- /dev/null
+++ b/frontend/src/app/(disconnected)/layout.tsx
@@ -0,0 +1,24 @@
+// /connexion/layout.tsx
+"use client"
+import React from 'react';
+import { Card, Layout } from 'antd';
+
+import OfflineHeader from '@/components/offlineHeader';
+const { Content } = Layout;
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+       return (
+              <Layout style={{ minHeight: '100vh' }}>
+                     <Layout>
+                            <OfflineHeader />
+                            <Content className="py-20 px-10 lg:px-32">
+                                   <Card className='w-full h-full flex flex-row justify-center'>
+                                          <div className="p-10">
+                                                 {children}
+                                          </div>
+                                   </Card>
+                            </Content>
+                     </Layout>
+              </Layout>
+       );
+}
diff --git a/frontend/src/app/(disconnected)/(front-office)/mot-de-passe-oublie/layout.tsx b/frontend/src/app/(disconnected)/mot-de-passe-oublie/layout.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/mot-de-passe-oublie/layout.tsx
rename to frontend/src/app/(disconnected)/mot-de-passe-oublie/layout.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/mot-de-passe-oublie/page.tsx b/frontend/src/app/(disconnected)/mot-de-passe-oublie/page.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/mot-de-passe-oublie/page.tsx
rename to frontend/src/app/(disconnected)/mot-de-passe-oublie/page.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/reinitialisation-mot-de-passe/layout.tsx b/frontend/src/app/(disconnected)/reinitialisation-mot-de-passe/layout.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/reinitialisation-mot-de-passe/layout.tsx
rename to frontend/src/app/(disconnected)/reinitialisation-mot-de-passe/layout.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/reinitialisation-mot-de-passe/loading.tsx b/frontend/src/app/(disconnected)/reinitialisation-mot-de-passe/loading.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/reinitialisation-mot-de-passe/loading.tsx
rename to frontend/src/app/(disconnected)/reinitialisation-mot-de-passe/loading.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/reinitialisation-mot-de-passe/page.tsx b/frontend/src/app/(disconnected)/reinitialisation-mot-de-passe/page.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/reinitialisation-mot-de-passe/page.tsx
rename to frontend/src/app/(disconnected)/reinitialisation-mot-de-passe/page.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/verification-mail/layout.tsx b/frontend/src/app/(disconnected)/verification-mail/layout.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/verification-mail/layout.tsx
rename to frontend/src/app/(disconnected)/verification-mail/layout.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/verification-mail/loading.tsx b/frontend/src/app/(disconnected)/verification-mail/loading.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/verification-mail/loading.tsx
rename to frontend/src/app/(disconnected)/verification-mail/loading.tsx
diff --git a/frontend/src/app/(disconnected)/(front-office)/verification-mail/page.tsx b/frontend/src/app/(disconnected)/verification-mail/page.tsx
similarity index 100%
rename from frontend/src/app/(disconnected)/(front-office)/verification-mail/page.tsx
rename to frontend/src/app/(disconnected)/verification-mail/page.tsx
diff --git a/frontend/src/components/header.tsx b/frontend/src/components/header.tsx
index f104f74..d8dfeae 100644
--- a/frontend/src/components/header.tsx
+++ b/frontend/src/components/header.tsx
@@ -1,6 +1,6 @@
 
 import { Layout, Menu, Avatar, Spin, Tooltip } from "antd"
-import { FileDoneOutlined, FolderOpenOutlined, StarOutlined, PlusCircleOutlined, UserOutlined, LogoutOutlined, DashboardOutlined, UnorderedListOutlined } from '@ant-design/icons';
+import { FileDoneOutlined, FolderOpenOutlined, StarOutlined, PlusCircleOutlined, UserOutlined, LogoutOutlined, DashboardOutlined } from '@ant-design/icons';
 import { useUser } from "@/providers/userProvider";
 import { useState, useEffect } from "react";
 import useLogout from "@/utils/logout";
@@ -9,7 +9,6 @@ import Link from "next/link";
 const { Header: AntdHeader } = Layout;
 import Image from 'next/image';
 import logo from "/public/logo.png"
-const { Sider } = Layout;
 
 export default function Header({ collapsed, setCollapsed }: { collapsed: Boolean, setCollapsed: (collapsed: boolean) => void }) {
        const { user } = useUser();
diff --git a/frontend/src/components/offlineHeader.tsx b/frontend/src/components/offlineHeader.tsx
new file mode 100644
index 0000000..3778a67
--- /dev/null
+++ b/frontend/src/components/offlineHeader.tsx
@@ -0,0 +1,67 @@
+"use client"
+
+import { Layout, Menu, Tooltip, Button } from "antd"
+import { usePathname } from "next/navigation";
+import Link from "next/link";
+const { Header: AntdHeader } = Layout;
+import Image from 'next/image';
+import logo from "/public/logo.png"
+
+export default function OfflineHeader() {
+       const pathname = usePathname();
+       const selectedKey = pathname.split('/')[1];
+
+       // Définir les éléments du menu en fonction du rôle de l'utilisateur
+       const headerItems = [
+              {
+                     label: <Link href={"/connexion"}><Button type="primary">{`Se connecter / S'inscrire`}</Button></Link>,
+                     key: 'connexion',
+              },
+              // Ajouter le tableau de bord uniquement si l'utilisateur est un modérateur ou plus
+       ];
+
+       return (
+              <AntdHeader style={{
+                     padding: 0,
+                     position: 'sticky',
+                     top: 0,
+                     display: 'flex',
+                     alignItems: 'center',
+                     justifyContent: 'space-between', // Utilisez cette propriété pour aligner les éléments à gauche et à droite
+                     zIndex: 5,
+                     background: 'white'
+              }}>
+                     <div style={
+                            {
+                                   borderBottomWidth: 1,
+                                   borderBottomStyle: 'solid',
+                                   borderBottomColor: 'rgba(5, 5, 5, 0.06)',
+                            }
+                     }
+                            className="w-fit h-full flex flex-row items-center">
+                            <Tooltip title="(Re)Sources Relationnelles - Ministère des solidarités et de la santé ">
+                                   <Image
+                                          draggable={false}
+                                          className='rounded-none pl-8 py-2'
+                                          src={logo}
+                                          alt="Logo du ministère des solidarités et de la santé"
+                                          width={95}
+                                          height={110}
+                                   />
+                            </Tooltip>
+
+                            <Link href={'/'} className="ml-5 text-lg font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-500">
+                            {`Bienvenue sur (Re)Sources Relationnelles`}
+                     </Link>
+                     </div>
+                     <Menu
+                            mode="horizontal"
+                            items={headerItems}
+                            selectedKeys={[selectedKey]}
+                            className="flex flex-row justify-end"
+                            style={{ minWidth: 0, flex: "auto" }}
+                            theme="light"
+                     />
+              </AntdHeader>
+       );
+}