Merge pull request #170 from FalkorDB/168-pull-connection-details-fro…

…m-query-params get params from query
FalkorDB · Apr 12, 2024 · 527141c · 527141c
2 parents 4d17d5e + 7288994
commit 527141c
Show file tree

Hide file tree

Showing 3 changed files with 140 additions and 94 deletions.
diff --git a/app/components/LoginForm.tsx b/app/components/LoginForm.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { SignInOptions, SignInResponse, signIn } from "next-auth/react";
+import { FormEvent, useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+const DEFAULT_HOST = "localhost";
+const DEFAULT_PORT = "6379";
+
+export default function LoginForm() {
+  const router = useRouter();
+  const [error, setError] = useState(false);
+
+  const [host, setHost] = useState(DEFAULT_HOST);
+  const [port, setPort] = useState(DEFAULT_PORT);
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const searchParams = useSearchParams();
+
+  useEffect(() => {
+    const hostParam = searchParams.get("host");
+    const portParam = searchParams.get("port");
+    const usernameParam = searchParams.get("username");
+
+    setHost(decodeURIComponent(hostParam ?? DEFAULT_HOST));
+    setPort(decodeURIComponent(portParam ?? DEFAULT_PORT));
+    setUsername(decodeURIComponent(usernameParam ?? ""));
+  }, [searchParams]);
+
+  const onSubmit = (e: FormEvent) => {
+    e.preventDefault();
+
+    const params: SignInOptions = {
+      redirect: false,
+      host: host ?? DEFAULT_HOST,
+      port: port ?? DEFAULT_PORT,
+    };
+    if (username) {
+      params.username = username;
+    }
+    if (password) {
+      params.password = password;
+    }
+
+    signIn("credentials", params).then((res?: SignInResponse) => {
+      if (res && res.error) {
+        setError(true);
+      } else {
+        router.push("/graph");
+      }
+    });
+  };
+
+  return (
+    <form
+      className="p-5 w-1/2 space-y-4 border rounded-lg bg-gray-100 dark:bg-gray-800 flex flex-col"
+      onSubmit={onSubmit}
+    >
+      <div>
+        <Label htmlFor="server">Server</Label>
+        <Input
+          id="server"
+          placeholder={DEFAULT_HOST}
+          type="text"
+          onChange={(e) => setHost(e.target.value)}
+          value={host}
+        />
+      </div>
+      <div>
+        <Label htmlFor="port">Port</Label>
+        <Input
+          id="port"
+          placeholder={DEFAULT_PORT}
+          type="number"
+          min={1}
+          max={65535}
+          onChange={(e) => setPort(e.target.value)}
+          value={port}
+        />
+      </div>
+      <div>
+        <Label htmlFor="username">User Name</Label>
+        <Input
+          id="username"
+          type="text"
+          placeholder="(Optional)"
+          onChange={(e) => setUsername(e.target.value)}
+          value={username}
+        />
+      </div>
+      <div>
+        <Label htmlFor="password">Password</Label>
+        <Input
+          id="password"
+          type="password"
+          placeholder="(Optional)"
+          onChange={(e) => setPassword(e.target.value)}
+          value={password}
+        />
+      </div>
+      <div className="flex justify-center p-4">
+        <Button type="submit">Connect</Button>
+      </div>
+      {error && (
+        <div className="bg-red-400 text-center p-2 rounded-lg">
+          <p>Wrong credentials</p>
+        </div>
+      )}
+    </form>
+  );
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,30 +1,30 @@
-import './globals.css'
-import type { Metadata } from 'next'
-import { Inter } from 'next/font/google'
-import { Toaster } from '@/components/ui/toaster'
-import { cn } from '@/lib/utils'
-import NextAuthProvider from './providers'
+import "./globals.css";
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import { Toaster } from "@/components/ui/toaster";
+import { cn } from "@/lib/utils";
+import NextAuthProvider from "./providers";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: 'FalkorDB Browser',
-  description: 'FalkorDB Browser is a web-based UI for FalkorDB.',
-}
+  title: "FalkorDB Browser",
+  description: "FalkorDB Browser is a web-based UI for FalkorDB.",
+};
 
 export default function RootLayout({
   children,
 }: {
-  children: React.ReactNode
+  children: React.ReactNode;
 }) {
-  // Setting suppressHydrationWarning on html tag to prevent warning 
+  // Setting suppressHydrationWarning on html tag to prevent warning
   // caused by mismatched client/server content caused by next-themes
   return (
     <html lang="en" suppressHydrationWarning>
       <body className={cn("h-screen w-screen", inter.className)}>
-          <NextAuthProvider>{children}</NextAuthProvider>
-          <Toaster />
+        <NextAuthProvider>{children}</NextAuthProvider>
+        <Toaster />
       </body>
     </html>
-  )
+  );
 }
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -1,81 +1,12 @@
-'use client'
-
-import { Label } from "@/components/ui/label"
-import { Input } from "@/components/ui/input"
-import { Button } from "@/components/ui/button"
-import { SignInOptions, SignInResponse, signIn } from "next-auth/react"
-import { FormEvent, useRef, useState } from "react"
-import { useRouter } from "next/navigation"
-
-const DEFAULT_HOST = 'localhost';
-const DEFAULT_PORT = '6379';
+import { Suspense } from "react";
+import LoginForm from "../components/LoginForm";
 
 export default function Page() {
-
-    const router = useRouter()
-    const [error, setError] = useState(false)
-
-    const host = useRef<HTMLInputElement>(null);
-    const port = useRef<HTMLInputElement>(null);
-    const username = useRef<HTMLInputElement>(null);
-    const password = useRef<HTMLInputElement>(null);
-
-    const onSubmit = (e: FormEvent) => {
-        e.preventDefault();
-
-        const params: SignInOptions = {
-            redirect: false,
-            host: host.current?.value ?? DEFAULT_HOST,
-            port: port.current?.value ?? DEFAULT_PORT,
-        }
-        if (username.current) {
-            params.username = username.current.value;
-        }
-        if (password.current) {
-            params.password = password.current.value;
-        }
-
-        signIn(
-            "credentials",
-            params
-        ).then((res?: SignInResponse) => {
-            if (res && res.error) {
-                setError(true)
-            } else {
-                router.push('/graph');
-            }
-
-        })
-    };
-
-    return (
-        <div className="flex items-center justify-center h-screen">
-            <form className="p-5 w-1/2 space-y-4 border rounded-lg bg-gray-100 dark:bg-gray-800 flex flex-col" onSubmit={onSubmit}>
-                <div>
-                    <Label htmlFor="server">Server</Label>
-                    <Input ref={host} id="server" placeholder={DEFAULT_HOST} type="text" defaultValue={DEFAULT_HOST} />
-                </div>
-                <div>
-                    <Label htmlFor="port">Port</Label>
-                    <Input ref={port} id="port" placeholder={DEFAULT_PORT} type="number" min={1} max={65535} defaultValue={DEFAULT_PORT} />
-                </div>
-                <div>
-                    <Label htmlFor="username">User Name</Label>
-                    <Input ref={username} id="username" type="text" placeholder="(Optional)" />
-                </div>
-                <div>
-                    <Label htmlFor="password">Password</Label>
-                    <Input ref={password} id="password" type="password" placeholder="(Optional)" />
-                </div>
-                <div className="flex justify-center p-4">
-                    <Button type="submit">Connect</Button>
-                </div>
-                {error &&
-                    <div className="bg-red-400 text-center p-2 rounded-lg">
-                        <p>Wrong credentials</p>
-                    </div>
-                }
-            </form>
-        </div>
-    )
-}
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <Suspense>
+        <LoginForm />
+      </Suspense>
+    </div>
+  );
+}