Merge pull request #59 from solid/integrating-login-package

updated to use login package

Author: PreciousOritsedere

app/login/page.tsx

@@ -1,15 +1,38 @@
 "use client";
 
 import { Suspense } from "react";
-import AuthWrapper from "../components/AuthWrapper";
-import LoginPage from "../components/LoginPage";
+import { useRouter } from "next/navigation";
+import {
+  SolidLoginNavigationProviderNext,
+  AuthGuard,
+  SolidLoginPage,
+} from "solid-react-component/login/next";
+
+const loadingFallback = (
+  <div className="flex min-h-screen items-center justify-center bg-white">
+    <span>Loading...</span>
+  </div>
+);
 
 export default function Login() {
+  const router = useRouter();
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <AuthWrapper>
-        <LoginPage />
-      </AuthWrapper>
+    <Suspense fallback={loadingFallback}>
+      <SolidLoginNavigationProviderNext
+        config={{ loginPath: "/login", homePath: "/" }}
+      >
+        <AuthGuard fallback={loadingFallback}>
+          <SolidLoginPage
+            onAlreadyLoggedIn={() => router.replace("/")}
+            logo="/file-manager-logo.svg"
+            logoAlt="Solid File Manager Logo"
+            title="Sign in"
+            subtitle="to continue to Solid File Manager"
+            footerGitHubUrl="https://github.com/solid/solid-file-manager"
+            footerIssuesUrl="https://github.com/solid/solid-file-manager/issues/new"
+          />
+        </AuthGuard>
+      </SolidLoginNavigationProviderNext>
     </Suspense>
   );
 }

app/page.tsx

@@ -1,27 +1,33 @@
 "use client";
 
 import { Suspense } from "react";
-import AuthWrapper from "./components/AuthWrapper";
+import {
+  SolidLoginNavigationProviderNext,
+  AuthGuard,
+} from "solid-react-component/login/next";
 import LoadingSpinner from "./components/shared/LoadingSpinner";
 import FileManager from "./components/FileManager";
 
-// FileManagerContent uses useSearchParams, so it needs to be wrapped in Suspense
+const loadingFallback = (
+  <div className="flex min-h-screen items-center justify-center bg-white">
+    <LoadingSpinner size="md" text="Loading..." />
+  </div>
+);
+
 function FileManagerContent() {
   return <FileManager />;
 }
 
 export default function Home() {
   return (
-    <AuthWrapper>
-      <Suspense
-        fallback={
-          <div className="flex min-h-screen items-center justify-center bg-white">
-            <LoadingSpinner size="md" text="Loading..." />
-          </div>
-        }
+    <Suspense fallback={loadingFallback}>
+      <SolidLoginNavigationProviderNext
+        config={{ loginPath: "/login", homePath: "/" }}
       >
-        <FileManagerContent />
-      </Suspense>
-    </AuthWrapper>
+        <AuthGuard fallback={loadingFallback}>
+          <FileManagerContent />
+        </AuthGuard>
+      </SolidLoginNavigationProviderNext>
+    </Suspense>
   );
 }

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  transpilePackages: ["solid-react-component"],
 };
 
 export default nextConfig;