refactor(ui): adopt react-hook-form for the SignUp form

Author: luannmoreira

ui/apps/console/package.json

@@ -35,6 +35,7 @@
     "axios": "^1.18.1",
     "font-logos": "^1.3.0",
     "node-rsa": "^1.1.1",
+    "react-hook-form": "^7.0.0",
     "react-router-dom": "^7.17.0",
     "sshpk": "^1.18.0",
     "zustand": "^5.0.14"

ui/apps/console/src/components/common/fields/rhf/FormCheckboxField.tsx

@@ -0,0 +1,43 @@
+import { useController, type Control, type FieldValues, type Path } from "react-hook-form";
+import CheckboxField from "@/components/common/fields/CheckboxField";
+import type { ComponentProps } from "react";
+
+type CheckboxFieldProps = Omit<
+  ComponentProps<typeof CheckboxField>,
+  "checked" | "onChange"
+>;
+
+type Props<T extends FieldValues> = CheckboxFieldProps & {
+  name: Path<T>;
+  control: Control<T>;
+  /** Called on every value change, in addition to RHF's internal onChange. */
+  onValueChange?: (value: boolean) => void;
+};
+
+export default function FormCheckboxField<T extends FieldValues>({
+  name,
+  control,
+  error: errorOverride,
+  onValueChange,
+  ...rest
+}: Props<T>) {
+  const {
+    field,
+    fieldState: { error: fieldError },
+  } = useController({ name, control });
+
+  const resolvedError = errorOverride ?? fieldError?.message;
+
+  return (
+    <CheckboxField
+      {...rest}
+      checked={field.value}
+      onChange={(v) => {
+        field.onChange(v);
+        onValueChange?.(v);
+      }}
+      onBlur={field.onBlur}
+      error={resolvedError}
+    />
+  );
+}

ui/apps/console/src/components/common/fields/rhf/FormInputField.tsx

@@ -0,0 +1,43 @@
+import { useController, type Control, type FieldValues, type Path } from "react-hook-form";
+import InputField from "@/components/common/fields/InputField";
+import type { ComponentProps } from "react";
+
+type InputFieldProps = Omit<
+  ComponentProps<typeof InputField>,
+  "value" | "onChange"
+>;
+
+type Props<T extends FieldValues> = InputFieldProps & {
+  name: Path<T>;
+  control: Control<T>;
+  /** Called on every value change, in addition to RHF's internal onChange. */
+  onValueChange?: (value: string) => void;
+};
+
+export default function FormInputField<T extends FieldValues>({
+  name,
+  control,
+  error: errorOverride,
+  onValueChange,
+  ...rest
+}: Props<T>) {
+  const {
+    field,
+    fieldState: { error: fieldError },
+  } = useController({ name, control });
+
+  const resolvedError = errorOverride ?? fieldError?.message;
+
+  return (
+    <InputField
+      {...rest}
+      value={field.value}
+      onChange={(v) => {
+        field.onChange(v);
+        onValueChange?.(v);
+      }}
+      onBlur={field.onBlur}
+      error={resolvedError}
+    />
+  );
+}

ui/apps/console/src/components/common/fields/rhf/FormPasswordField.tsx

@@ -0,0 +1,43 @@
+import { useController, type Control, type FieldValues, type Path } from "react-hook-form";
+import PasswordField from "@/components/common/fields/PasswordField";
+import type { ComponentProps } from "react";
+
+type PasswordFieldProps = Omit<
+  ComponentProps<typeof PasswordField>,
+  "value" | "onChange"
+>;
+
+type Props<T extends FieldValues> = PasswordFieldProps & {
+  name: Path<T>;
+  control: Control<T>;
+  /** Called on every value change, in addition to RHF's internal onChange. */
+  onValueChange?: (value: string) => void;
+};
+
+export default function FormPasswordField<T extends FieldValues>({
+  name,
+  control,
+  error: errorOverride,
+  onValueChange,
+  ...rest
+}: Props<T>) {
+  const {
+    field,
+    fieldState: { error: fieldError },
+  } = useController({ name, control });
+
+  const resolvedError = errorOverride ?? fieldError?.message;
+
+  return (
+    <PasswordField
+      {...rest}
+      value={field.value}
+      onChange={(v) => {
+        field.onChange(v);
+        onValueChange?.(v);
+      }}
+      onBlur={field.onBlur}
+      error={resolvedError}
+    />
+  );
+}