Added new transition and loader

app/[...login]/page.tsx

@@ -136,7 +136,7 @@ const LoginPage = ({ params }: { params: { login: string[] } }) => {
       } else {
         toast.success("Login successful!");
         localStorage.setItem("jwt", data.token);
-        router.push("/dashboard");
+        router.push("/dash/overview");
       }
     } catch (error) {
       toast.error("An error occurred. Please try again later.");
@@ -184,7 +184,7 @@ const LoginPage = ({ params }: { params: { login: string[] } }) => {
       } else {
         toast.success("Login successful!");
         localStorage.setItem("jwt", data.token);
-        router.push("/dashboard");
+        router.push("/dash/overview");
       }
     } catch (error) {
       toast.error("An error occurred. Please try again later.");

app/dashboard/layout.tsx → app/dash/[path]/layout.tsx

@@ -1,4 +1,4 @@
-import "../globals.css";
+import "../../globals.css";
 import { config } from "@fortawesome/fontawesome-svg-core";
 import "@fortawesome/fontawesome-svg-core/styles.css";
 config.autoAddCss = false;

app/dash/[path]/page.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { Suspense, lazy, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import Navigation from "@/components/navigation";
+
+const OverviewPage = lazy(() => import("@/pages/subpages/overview"));
+const SettingsPage = lazy(() => import("@/pages/subpages/settings"));
+const AliasesPage = lazy(() => import("@/pages/subpages/aliases"));
+
+import { Toaster } from "react-hot-toast";
+
+import Loader from "@/components/loader";
+
+const PageContent = ({ path }: any) => {
+  switch (path) {
+    case "overview":
+      return <OverviewPage />;
+    case "settings":
+      return <SettingsPage />;
+    case "aliases":
+      return <AliasesPage />;
+    default:
+      return <Loader />;
+  }
+};
+
+const MainPage = ({ params }: { params: { path: string } }) => {
+  const router = useRouter();
+
+  useEffect(() => {
+    if (!["overview", "settings", "aliases"].includes(params.path)) {
+      router.push("/");
+    }
+  }, [params.path, router]);
+
+  return (
+    <div className="flex items-center justify-center min-h-screen p-6 animate-gradient-x">
+      <Toaster position="top-right" />
+      <div className="bg-slate-800 text-white p-5 rounded-lg shadow-md w-full max-w-6xl min-h-[790px]">
+        <Navigation />
+        <Suspense fallback={<Loader />}>
+          <PageContent path={params.path} />
+        </Suspense>
+      </div>
+    </div>
+  );
+};
+
+export default MainPage;

components/loader.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import "../app/globals.css";
+
+const Loader = () => {
+  const [fadeIn, setFadeIn] = useState(true);
+
+  useEffect(() => {
+    const timeout = setTimeout(() => setFadeIn(false), 500);
+    return () => clearTimeout(timeout);
+  }, []);
+
+  return (
+    <div
+      className={`fixed inset-0 flex text-center items-center justify-center animate-gradient-x"> transition-opacity duration-500 ${
+        fadeIn ? 'opacity-100' : 'opacity-0'
+      }`}
+    >
+      <img
+        src="https://cdn.solun.pm/images/logo/solun-logo.png"
+        className="animate-pulse w-20 h-20"
+        alt="Logo"
+      />
+    </div>
+  );
+};
+
+export default Loader;

components/navigation.tsx

@@ -1,86 +1,69 @@
 import { useState } from "react";
 import Link from "next/link";
-import { useRouter, usePathname } from "next/navigation";
+import { useRouter } from "next/navigation";
+import { usePathname } from 'next/navigation'
 
 const Navigation = () => {
   const router = useRouter();
-  const pathname = usePathname();
+  const pathname = usePathname()
 
   const handleLogout = () => {
     localStorage.removeItem("jwt");
     router.push("/login");
   };
 
-  const goToOverview = () => {
-    router.push("/dashboard");
-  };
-
-  const goToSettings = () => {
-    router.push("/dashboard/settings");
-  };
-
-  const goToAliases = () => {
-    router.push("/dashboard/aliases");
-  };
-
-  const goToDomains = () => {
-    router.push("/dashboard/domains");
-  };
-
   return (
-      <>
-        <nav className="flex flex-col md:flex-row md:justify-between items-center md:space-x-4 space-y-2 md:space-y-0 bg-slate-950 p-4 mb-4 rounded-lg shadow-xl">
-          <div className="flex flex-col md:flex-row justify-start md:space-x-4 space-y-2 md:space-y-0 w-full">
-            <button
-              onClick={goToOverview}
+    <>
+      <nav className="flex flex-col md:flex-row md:justify-between items-center md:space-x-4 space-y-2 md:space-y-0 bg-slate-950 p-4 mb-4 rounded-lg shadow-xl">
+        <div className="flex flex-col md:flex-row justify-start md:space-x-4 space-y-2 md:space-y-0 w-full">
+          <Link href="/dash/overview"
               className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${
-                pathname === "/dashboard" ? "bg-blue-500" : "hover:bg-blue-500"
+                pathname === "/dash/overview"
+                  ? "bg-blue-500"
+                  : "hover:bg-blue-500"
               }`}
             >
               Overview
-            </button>
-            <button
-              onClick={goToSettings}
+          </Link>
+          <Link href="/dash/settings"
               className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${
-                pathname === "/dashboard/settings"
+                pathname === "/dash/settings"
                   ? "bg-blue-500"
                   : "hover:bg-blue-500"
               }`}
             >
               Settings
-            </button>
-            <button
-              onClick={goToAliases}
+          </Link>
+          <Link href="/dash/aliases"
               className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${
-                pathname === "/dashboard/aliases"
+                pathname === "/dash/aliases"
                   ? "bg-blue-500"
                   : "hover:bg-blue-500"
               }`}
             >
               Aliases
-            </button>
-            {/*
-            <button
-              onClick={goToDomains}
+          </Link>
+          {/*
+          <Link href="/dash/domains"
               className={`text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center ${
-                pathname === "/dashboard/domains"
+                pathname === "/dash/domains"
                   ? "bg-blue-500"
                   : "hover:bg-blue-500"
               }`}
             >
               Domains
-            </button>
-            */}
-          </div>
-          <button
-            onClick={handleLogout}
-            className="text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center md:text-left hover:bg-blue-500 mt-4 md:mt-0"
-          >
-            Logout
-          </button>
-        </nav>
-      </>
+          </Link>
+          */}
+        </div>
+        <button
+          onClick={handleLogout}
+          className="text-white font-bold py-2 px-4 rounded transition-all w-full md:w-auto text-center md:text-left hover:bg-blue-500 mt-4 md:mt-0"
+        >
+          Logout
+        </button>
+      </nav>
+    </>
   );
 };
 
-export default Navigation;
+export default Navigation;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "solun-auth",
-  "version": "0.1.27",
+  "version": "0.1.48",
   "private": true,
   "scripts": {
     "dev": "next dev",

app/dashboard/aliases/page.tsx → pages/subpages/aliases.tsx

@@ -15,8 +15,8 @@ const AliasesPage = () => {
 
   const [currentPage, setCurrentPage] = useState(1);
   const itemsPerPage = 4*2;
-  const { userInfo, userDetails } = useFetchUserInfo() as any;
   const [aliases, setAliases] = useState([]) as any;
+  const { userInfo, userDetails } = useFetchUserInfo() as any;
 
   const getAliases = useCallback(async () => {
     const res = await fetch(process.env.NEXT_PUBLIC_API_DOMAIN + "/user/get_alias", {
@@ -48,46 +48,42 @@ const AliasesPage = () => {
   const aliasesToShow = aliases.slice((currentPage-1)*itemsPerPage, currentPage*itemsPerPage);
 
   return (
-    <div className="flex items-center justify-center p-6 min-h-screen animate-gradient-x">
-      <Toaster position="top-right" />
-      <div className="bg-slate-800 text-white p-5 rounded-lg shadow-md w-full max-w-6xl">
-        <Navigation />
+    <>
         <h1 className="text-2xl font-bold">Manage Aliases</h1>
         <AliasesTopBar userInfo={userInfo} aliasCount={aliases.length} refreshAliases={getAliases} />
         {aliases.length === 0 ? (
-          <div className="text-slate-300 text-center mt-16 mb-8 text-md">
+            <div className="text-slate-300 text-center mt-16 mb-8 text-md">
             You don't have any aliases yet. They're handy, why not add some?
-          </div>
+            </div>
         ) : (
-          <>
+            <>
             <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mt-4">
-              {aliasesToShow.map((alias: any, index: any) => (
+                {aliasesToShow.map((alias: any, index: any) => (
                 <AliasCard key={index} userInfo={userInfo} aliasName={alias.alias_name} domain={alias.domain} refreshAliases={getAliases} />
-              ))}
+                ))}
             </div>
             <div className="flex justify-center mt-4">
-              <button 
+                <button 
                 onClick={() => setCurrentPage((oldPage) => Math.max(oldPage - 1, 1))} 
                 className={`mx-2 px-4 py-2 text-white rounded transition-all ${currentPage === 1 ? 'bg-slate-900 hover:bg-slate-950' : 'bg-blue-500 hover:bg-blue-600'}`}
                 disabled={currentPage === 1}
-              >
+                >
                 Previous
-              </button>
-              <div className="mx-2 px-4 py-2 text-white">
+                </button>
+                <div className="mx-2 px-4 py-2 text-white">
                 {currentPage} / {Math.ceil(aliases.length / itemsPerPage)}
-              </div>
-              <button 
+                </div>
+                <button 
                 onClick={() => setCurrentPage((oldPage) => Math.min(oldPage + 1, Math.ceil(aliases.length / itemsPerPage)))} 
                 className={`mx-2 px-4 py-2 text-white rounded transition-all ${currentPage === Math.ceil(aliases.length / itemsPerPage) ? 'bg-slate-900 hover:bg-slate-950' : 'bg-blue-500 hover:bg-blue-600'}`}
                 disabled={currentPage === Math.ceil(aliases.length / itemsPerPage)}
-              >
+                >
                 Next
-              </button>
+                </button>
             </div>
-          </>
+            </>
         )}
-      </div>
-    </div>
+    </>
   );
 };
 

app/dashboard/page.tsx → pages/subpages/overview.tsx

@@ -20,7 +20,6 @@ const DashboardPage = () => {
   const router = useRouter();
   const [showTooltipMailPro, setShowTooltipMailPro] = useState(false);
   const [showTooltipWebmail, setShowTooltipWebmail] = useState(false);
-
   const { userInfo, userDetails } = useFetchUserInfo() as any;
 
   if (!userInfo || !userDetails) {
@@ -54,11 +53,7 @@ const DashboardPage = () => {
   };
 
   return (
-    <div className="flex items-center justify-center min-h-screen p-6 animate-gradient-x">
-      <Toaster position="top-right" />
-      <div className="bg-slate-800 text-white p-5 rounded-lg shadow-md w-full max-w-6xl">
-        {/* <h1 className="text-2xl font-bold mb-2">Dashboard</h1> */}
-        <Navigation />
+    <>
         <Suspense fallback={<div>Loading...</div>}>
           {/* @ts-ignore */}
           <h1 className="text-2xl font-bold">
@@ -173,9 +168,8 @@ const DashboardPage = () => {
             </div>
           </div>
         </Suspense>
-      </div>
-    </div>
+      </>
   );
 };
 
-export default DashboardPage;
+export default DashboardPage;

app/dashboard/settings/page.tsx → pages/subpages/settings.tsx

@@ -11,30 +11,25 @@ import { useFetchUserInfo } from "@/hooks/fetchUserInfo";
 
 const SettingsPage = () => {
   const router = useRouter();
-
   const { userInfo, userDetails } = useFetchUserInfo() as any;
 
   if (!userInfo || !userDetails) {
     return null;
   }
 
   return (
-    <div className="flex items-center justify-center p-6 min-h-screen animate-gradient-x">
-      <Toaster position="top-right" />
-      <div className="bg-slate-800 text-white p-5 rounded-lg shadow-md w-full max-w-6xl">
-        <Navigation />
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
-          <div className="grid grid-cols-1 gap-5 align-start">
-            <ChangePassword userInfo={userInfo} />
-            <TwoFactorAuthSetup userDetails={userDetails} userInfo={userInfo} />
-          </div>
-          <div className="flex flex-col">
-            <PrivacySettings userDetails={userDetails} userInfo={userInfo} />
-          </div>
+    <>
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+        <div className="grid grid-cols-1 gap-5 align-start">
+        <ChangePassword userInfo={userInfo} />
+        <TwoFactorAuthSetup userDetails={userDetails} userInfo={userInfo} />
+        </div>
+        <div className="flex flex-col">
+        <PrivacySettings userDetails={userDetails} userInfo={userInfo} />
         </div>
-      </div>
     </div>
+    </>
   );
 };
 
-export default SettingsPage;
+export default SettingsPage;