fix: missing .env chore: splashScreen

src/app/(auth)/layout.tsx

@@ -1,12 +1,12 @@
 import Header from "#/components/header";
 
 export default function AuthLayout({ children }: { children: React.ReactNode }) {
-    return(
+  return (
-        <div className="flex flex-col min-h-screen">
+    <div className="flex flex-col min-h-screen">
-            <Header /> 
+      <Header />
-            <div className="flex flex-1 justify-center items-center bg-blue-100">
+      <div className="flex flex-1 justify-center items-center bg-blue-100">
-                {children}
+        {children}
-            </div>
+      </div>
-        </div>
+    </div>
-    )
+  )
 }

src/app/(auth)/login/page.tsx

@@ -50,34 +50,34 @@ export default function LoginPage() {
 
   return (
     <div className="d-flex flex-column bg-bluegray h-100 align-items-center">
-    <div className="login-main d-flex justify-content-center align-items-center position-relative">
+      <div className="login-main d-flex justify-content-center align-items-center position-relative">
-      <Form
+        <Form
-        title="Connexion"
+          title="Connexion"
-        formClassName="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
+          formClassName="bg-white p-10 shadow-2xl w-3/4 lg:w-lg"
-        fields={[
+          fields={[
-          {
+            {
-            label: "Email",
+              label: "Email",
-            name: "email",
+              name: "email",
-            type: "email",
+              type: "email",
-            placeholder: "Entrer votre email"
+              placeholder: "Entrer votre email"
-          },
+            },
-          {
+            {
-            label: "Password",
+              label: "Password",
-            name: "password",
+              name: "password",
-            type: "password",
+              type: "password",
-            placeholder: "Enter votre mot de passe",
+              placeholder: "Enter votre mot de passe",
-            showPasswordToggle: true
+              showPasswordToggle: true
-          }
+            }
-        ]}
+          ]}
-        submit={mutation.mutate}
+          submit={mutation.mutate}
-        schema={loginSchema}
+          schema={loginSchema}
-        child={<div className="d-flex justify-content-center w-100"> <button disabled={mutation.isPending} type="submit" className={`${mutation.isPending ? "btn-auth-loading" : "btn-auth"} cta  modal-cta`}>{mutation.isPending ? "Chargement..." : "Connexion"}</button></div>}
+          child={<div className="d-flex justify-content-center w-100"> <button disabled={mutation.isPending} type="submit" className={`${mutation.isPending ? "btn-auth-loading" : "btn-auth"} cta  modal-cta`}>{mutation.isPending ? "Chargement..." : "Connexion"}</button></div>}
-      />
+        />
-    </div>
+      </div>
-    <div className="version">
+      <div className="version">
-      <p className="fw-bold" >Version 0.0.1</p>
+        <p className="fw-bold" >Version 0.0.1</p>
-    </div>
+      </div>
-    
+
     </div>
   )
 }

src/app/globals.css

@@ -203,6 +203,34 @@ input[type="checkbox"]:checked::before {
 }
 
 
+/* Splash Screnn */
+
+.splash-screen {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--bluegray);
+  z-index: 99;
+}
+.splash-screen p{
+  width: max-content;
+  font-size: 32px;
+  margin: auto;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.splash-screen span {
+  /* font-family: "Inter 200"; */
+  font-weight: 100 !important;
+}
+
+
+
 /* Scroll Bar  */
 
 ::-webkit-scrollbar {
@@ -268,6 +296,13 @@ input[type="checkbox"]:checked::before {
   left: 22px;
   animation: bounce 1s infinite ease-in-out;
 }
+.splash-screen .dot{
+  font-size: 48px;
+  top: -28px;
+  left: 28px;
+  animation: bounce 1s infinite ease-in-out;
+}
+
 
 @keyframes bounce {
 
@@ -304,6 +339,9 @@ input[type="checkbox"]:checked::before {
 
 @media (max-width: 768px) {
 
+  .splash-screen p{
+    font-size: 24px;
+  }
 
   .login-main{
     width: 100%;

src/app/layout.tsx

@@ -4,6 +4,7 @@ import NextTopLoader from "nextjs-toploader";
 import "../assets/css/ruben-ui.css"
 import { AuthProvider } from "#/components/provider/authProvider";
 import { QueryClientProvide } from "#/components/provider/queryClient";
+import SplashScreen from "#/components/splashScreen";
 
 export const metadata: Metadata = {
   title: "Private Docs",
@@ -15,20 +16,21 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
-  
+
   return (
     <html lang="en">
       <head>
         <link rel="icon" href="/favicon.svg" />
         <link rel="favicon.svg" href="/favicon.svg" />
-        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossOrigin="anonymous"/>
+        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossOrigin="anonymous" />
         <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossOrigin="anonymous"></script>
       </head>
       <body>
         <AuthProvider>
           <QueryClientProvide>
-            <NextTopLoader color="#246BFD" shadow="0"  />
+            <SplashScreen name="White" label="developer" timer={2000} />
-            {children}
+              <NextTopLoader color="#246BFD" shadow="0" />
+              {children}
           </QueryClientProvide>
         </AuthProvider>
       </body>

src/components/header.tsx

@@ -11,7 +11,6 @@ export default function Header() {
           className="text-red-500 h-auto"
           height={30}
         />
-        {/* <p className="text-2xl font-bold text-black">Private Docs</p> */}
         <p className="r-p-m-0 word">Pr<span className="dot">•</span>ıvate Docs</p>
       </div>
     </div>

src/components/splashScreen.tsx

@@ -0,0 +1,63 @@
+"use client"
+import Image from "next/image";
+import { icons } from "#/assets/icons";
+import { ReactNode, useEffect, useState } from "react";
+
+interface Props {
+  name: string
+  label: string
+  timer: number,
+}
+
+export default function SplashScreen({ name, label, timer }: Props) {
+
+  const [showSplash, setShowSplash] = useState(false);
+
+
+  useEffect(() => {
+
+    const timeout = setTimeout(() => setShowSplash(false), timer);
+
+    if (typeof window !== undefined) {
+
+      if (!sessionStorage.getItem('sessionInitialized')) {
+        setShowSplash(true);
+        // Set session
+      } else {
+        setShowSplash(false);
+        //console.log('Session already exists');
+      }
+      const handleUnload = () => sessionStorage.removeItem('sessionInitialized')
+
+      window.addEventListener("beforeunload", handleUnload);
+
+      return () => {
+        clearTimeout(timeout)
+        handleUnload
+      } // Clean up the timeout on unmount
+
+    }
+
+  }, [timer]);
+
+
+
+  return (
+    <>
+      {showSplash &&
+        <div className="splash-screen w-[100vw] h-[100vh] ">
+          <div className="d-flex justify-content-center align-items-center gap-3">
+            <Image
+              src={icons.logo}
+              alt="Private Docs"
+              className="text-red-500 h-auto"
+              height={48}
+            />
+            <p className="r-p-m-0 word">Pr<span className="dot">•</span>ıvate Docs</p>
+          </div>
+        </div>
+
+      }
+    </>
+  )
+}