refactor login form

frontend/package.json

@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@fontsource/inter": "^5.0.19",
+    "@hookform/resolvers": "^3.9.0",
     "@it-incubator/prettier-config": "^0.1.2",
     "@monaco-editor/react": "^4.6.0",
     "@radix-ui/react-dialog": "^1.1.1",
@@ -33,6 +34,7 @@
     "lucide-react": "^0.400.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.52.1",
     "sonner": "^1.5.0",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",

frontend/src/components/ui/form/form-input.tsx

@@ -0,0 +1,32 @@
+import { Input, type InputProps } from "@/components/ui";
+import {
+  type Control,
+  type FieldValues,
+  type UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+type Props<T extends FieldValues> = Omit<
+  UseControllerProps<T>,
+  "control" | "defaultValue" | "rules"
+> &
+  Omit<InputProps, "value" | "onChange"> & { control: Control<T> };
+
+export const FormInput = <T extends FieldValues>({
+  control,
+  name,
+  disabled,
+  shouldUnregister,
+  ...rest
+}: Props<T>) => {
+  const {
+    field,
+    fieldState: { error },
+  } = useController({
+    control,
+    name,
+    disabled,
+    shouldUnregister,
+  });
+  return <Input errorMessage={error?.message} {...field} {...rest} />;
+};

frontend/src/components/ui/form/form-select.tsx

@@ -0,0 +1,34 @@
+import { Select } from "@/components/ui";
+import type { ComponentPropsWithoutRef } from "react";
+import {
+  type Control,
+  type FieldValues,
+  type UseControllerProps,
+  useController,
+} from "react-hook-form";
+
+type Props<T extends FieldValues> = Omit<
+  UseControllerProps<T>,
+  "control" | "defaultValue" | "rules"
+> &
+  Omit<ComponentPropsWithoutRef<typeof Select>, "value" | "onValueChange"> & {
+    control: Control<T>;
+  };
+
+export const FormSelect = <T extends FieldValues>({
+  control,
+  name,
+  disabled,
+  shouldUnregister,
+  ...rest
+}: Props<T>) => {
+  const {
+    field: { onChange, ...field },
+  } = useController({
+    control,
+    name,
+    disabled,
+    shouldUnregister,
+  });
+  return <Select {...field} {...rest} onValueChange={onChange} />;
+};

frontend/src/components/ui/form/index.ts

@@ -0,0 +1,2 @@
+export * from "./form-select";
+export * from "./form-input";

frontend/src/components/ui/index.ts

@@ -4,6 +4,7 @@ export * from "./data-table-pagination";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./input";
+export * from "./form";
 export * from "./label";
 export * from "./mode-toggle";
 export * from "./select";

frontend/src/components/ui/input.tsx

@@ -1,14 +1,22 @@
-import * as React from "react";
-
+import { Label } from "@/components/ui/label";
+import { useAutoId } from "@/hooks";
 import { cn } from "@/lib/utils";
+import { type InputHTMLAttributes, forwardRef } from "react";
 
-export interface InputProps
-  extends React.InputHTMLAttributes<HTMLInputElement> {}
+export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  errorMessage?: string;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  ({ className, label, id, errorMessage, ...props }, ref) => {
+    const finalId = useAutoId(id);
 
-const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, ...props }, ref) => {
     return (
+      <div className={"grid gap-1.5"}>
+        {!!label && <Label htmlFor={finalId}>{label}</Label>}
         <input
+          id={finalId}
           className={cn(
             "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             className,
@@ -16,6 +24,10 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
           ref={ref}
           {...props}
         />
+        {!!errorMessage && (
+          <p className="text-red-500 text-xs">{errorMessage}</p>
+        )}
+      </div>
     );
   },
 );

frontend/src/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./use-auto-id";

frontend/src/hooks/use-auto-id.ts

@@ -0,0 +1,6 @@
+import { useId } from 'react'
+
+export const useAutoId = (id?: string) => {
+  const generatedId = useId()
+  return id ?? generatedId
+}

frontend/src/routes/auth/login.tsx

@@ -6,9 +6,9 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Input,
+  FormInput,
+  FormSelect,
   Label,
-  Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
@@ -16,30 +16,122 @@ import {
   ToggleGroup,
   ToggleGroupItem,
 } from "@/components/ui";
-import { useLoginMutation } from "@/services/db";
+import { type LoginArgs, useLoginMutation } from "@/services/db";
 import { useSessionStore } from "@/state/db-session-store";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { createFileRoute } from "@tanstack/react-router";
-import { type FormEventHandler, useState } from "react";
-import { toast } from "sonner";
+import { useState } from "react";
+import { type Control, useForm } from "react-hook-form";
+import { z } from "zod";
 
 export const Route = createFileRoute("/auth/login")({
   component: LoginForm,
 });
 
-function DatabaseTypeSelector() {
+const loginWithConnectionStringSchema = z.object({
+  type: z.enum(["mysql", "postgres"]),
+  connectionString: z.string().trim().min(1, "Connection string is required"),
+});
+
+type LoginWithConnectionStringFields = z.infer<
+  typeof loginWithConnectionStringSchema
+>;
+
+function ConnectionStringForm({
+  onSubmit,
+}: {
+  onSubmit: (values: LoginWithConnectionStringFields) => void;
+}) {
+  const { control, handleSubmit } = useForm<LoginWithConnectionStringFields>({
+    resolver: zodResolver(loginWithConnectionStringSchema),
+    defaultValues: {
+      type: "postgres",
+      connectionString: "",
+    },
+  });
+
   return (
+    <form
+      className="grid gap-2"
+      onSubmit={handleSubmit(onSubmit)}
+      id={"login-form"}
+    >
+      <DatabaseTypeSelector control={control} />
+      <FormInput
+        label={"Connection string"}
+        name={"connectionString"}
+        control={control}
+        placeholder={"postgres://postgres:postgres@localhost:5432/postgres"}
+      />
+    </form>
+  );
+}
+
+const loginWithConnectionFieldsSchema = z.object({
+  type: z.enum(["mysql", "postgres"]),
+  username: z.string().min(1, "Username is required"),
+  password: z.string().min(1, "Password is required"),
+  host: z.string().min(1, "Host is required"),
+  port: z.string().min(1, "Port is required"),
+  database: z.string().min(1, "Database is required"),
+  ssl: z.enum(["false", "true", "require", "allow", "prefer", "verify-full"]),
+});
+type LoginWithConnectionFields = z.infer<
+  typeof loginWithConnectionFieldsSchema
+>;
+
+function ConnectionFieldsForm({
+  onSubmit,
+}: {
+  onSubmit: (values: LoginWithConnectionFields) => void;
+}) {
+  const { control, handleSubmit } = useForm<LoginWithConnectionFields>({
+    resolver: zodResolver(loginWithConnectionFieldsSchema),
+    defaultValues: {
+      type: "postgres",
+      host: "",
+      port: "",
+      username: "",
+      password: "",
+      ssl: "prefer",
+      database: "",
+    },
+  });
+
+  return (
+    <form
+      className="grid gap-3"
+      onSubmit={handleSubmit(onSubmit)}
+      id={"login-form"}
+    >
+      <DatabaseTypeSelector control={control} />
+      <FormInput
+        name={"host"}
+        control={control}
+        label={"Host"}
+        placeholder={"127.0.0.1"}
+      />
+      <FormInput name={"port"} control={control} label={"Port"} />
+      <FormInput name={"username"} control={control} label={"User"} />
+      <FormInput name={"password"} control={control} label={"Password"} />
+      <FormInput name={"database"} control={control} label={"Database"} />
       <div className="grid gap-2">
-      <Label htmlFor="dbType">Database type</Label>
-      <Select defaultValue={"postgres"} name={"type"}>
-        <SelectTrigger className="w-full" id={"dbType"}>
+        <Label htmlFor="ssl">SSL mode</Label>
+        <FormSelect control={control} name={"ssl"}>
+          <SelectTrigger className="w-full" id={"ssl"}>
             <SelectValue />
           </SelectTrigger>
           <SelectContent>
-          <SelectItem value="postgres">Postgres</SelectItem>
-          <SelectItem value="mysql">MySQL</SelectItem>
+            <SelectItem value="false">false</SelectItem>
+            <SelectItem value="true">true</SelectItem>
+            <SelectItem value="require">require</SelectItem>
+            <SelectItem value="allow">allow</SelectItem>
+            <SelectItem value="prefer">prefer</SelectItem>
+            <SelectItem value="verify-full">verify-full</SelectItem>
           </SelectContent>
-      </Select>
+        </FormSelect>
       </div>
+    </form>
   );
 }
 
@@ -49,78 +141,9 @@ function LoginForm() {
   const { mutateAsync } = useLoginMutation();
   const addSession = useSessionStore.use.addSession();
 
-  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
-    e.preventDefault();
-    const formData = new FormData(e.currentTarget);
-    const connectionString = formData.get("connectionString");
-    const type = formData.get("type");
-    if (connectionMethod === "connectionString") {
-      if (
-        connectionString != null &&
-        typeof connectionString === "string" &&
-        type != null &&
-        typeof type === "string"
-      ) {
-        try {
-          await mutateAsync({ connectionString, type });
-          addSession({ connectionString, type });
-        } catch (error) {
-          console.log(error);
-          toast.error("Invalid connection string");
-          return;
-        }
-      } else {
-        toast.error("Please fill all fields");
-      }
-      return;
-    }
-
-    const username = formData.get("username");
-    const password = formData.get("password");
-    const host = formData.get("host");
-    const port = formData.get("port");
-    const database = formData.get("database");
-    const ssl = formData.get("ssl");
-
-    if (
-      database == null ||
-      host == null ||
-      password == null ||
-      port == null ||
-      ssl == null ||
-      type == null ||
-      username == null
-    ) {
-      toast.error("Please fill all fields");
-      return;
-    }
-    if (
-      typeof database !== "string" ||
-      typeof host !== "string" ||
-      typeof password !== "string" ||
-      typeof port !== "string" ||
-      typeof ssl !== "string" ||
-      typeof type !== "string" ||
-      typeof username !== "string"
-    ) {
-      return;
-    }
-    try {
-      await mutateAsync({
-        username,
-        password,
-        host,
-        type,
-        port,
-        database,
-        ssl,
-      });
-      addSession({ username, password, host, type, port, database, ssl });
-    } catch (error) {
-      console.log(error);
-      toast.error("Invalid connection string");
-      return;
-    }
+  const onSubmit = async (args: LoginArgs) => {
+    await mutateAsync(args);
+    addSession(args);
   };
 
   return (
@@ -133,11 +156,7 @@ function LoginForm() {
           </CardDescription>
         </CardHeader>
         <CardContent>
-          <form
-            className="grid gap-4"
-            id={"login-form"}
-            onSubmit={handleSubmit}
-          >
+          <div className="grid gap-4">
             <ToggleGroup
               type="single"
               className="w-full border gap-0.5 rounded-md"
@@ -158,85 +177,11 @@ function LoginForm() {
               </ToggleGroupItem>
             </ToggleGroup>
             {connectionMethod === "fields" ? (
-              <>
-                <DatabaseTypeSelector />
-                <div className="grid gap-2">
-                  <Label htmlFor="host">Host</Label>
-                  <Input
-                    id="host"
-                    name="host"
-                    type="text"
-                    required
-                    placeholder={"127.0.0.1"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="port">Port</Label>
-                  <Input
-                    id="port"
-                    name="port"
-                    type="text"
-                    required
-                    defaultValue={"5432"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="username">User</Label>
-                  <Input id="username" name="username" type="text" required />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="password">Password</Label>
-                  <Input
-                    name="password"
-                    id="password"
-                    type="password"
-                    required
-                    placeholder={"********"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="database">Database</Label>
-                  <Input
-                    name="database"
-                    id="database"
-                    type="text"
-                    defaultValue={"postgres"}
-                    placeholder={"postgres"}
-                  />
-                </div>
-                <div className="grid gap-2">
-                  <Label htmlFor="ssl">SSL mode</Label>
-                  <Select defaultValue={"false"} name={"ssl"}>
-                    <SelectTrigger className="w-full" id={"ssl"}>
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="false">false</SelectItem>
-                      <SelectItem value="true">true</SelectItem>
-                      <SelectItem value="require">require</SelectItem>
-                      <SelectItem value="allow">allow</SelectItem>
-                      <SelectItem value="prefer">prefer</SelectItem>
-                      <SelectItem value="verify-full">verify-full</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </>
+              <ConnectionFieldsForm onSubmit={onSubmit} />
             ) : (
-              <div className="grid gap-2">
-                <DatabaseTypeSelector />
-                <Label htmlFor="connectionString">Connection string</Label>
-                <Input
-                  name="connectionString"
-                  id="connectionString"
-                  type="text"
-                  required
-                  placeholder={
-                    "postgres://postgres:postgres@localhost:5432/postgres"
-                  }
-                />
-              </div>
+              <ConnectionStringForm onSubmit={onSubmit} />
             )}
-          </form>
+          </div>
         </CardContent>
         <CardFooter>
           <Button className="w-full" form={"login-form"}>
@@ -247,3 +192,24 @@ function LoginForm() {
     </div>
   );
 }
+
+function DatabaseTypeSelector({
+  control,
+}: {
+  control: Control<any>;
+}) {
+  return (
+    <div className="grid gap-2">
+      <Label htmlFor="dbType">Database type</Label>
+      <FormSelect control={control} name={"type"}>
+        <SelectTrigger className="w-full" id={"dbType"}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="postgres">Postgres</SelectItem>
+          <SelectItem value="mysql">MySQL</SelectItem>
+        </SelectContent>
+      </FormSelect>
+    </div>
+  );
+}