Handle form in client side

import {useForm} from "@tanstack/react-form";
import {createFileRoute} from "@tanstack/react-router";

export const Route = createFileRoute("/_auth/login")({
  component: RouteComponent,
});

function RouteComponent() {
  return <LoginForm />;
}

export const LoginForm = () => {
  const form = useForm({
    defaultValues: {email: ""},
    onSubmit: async (values) => {
      console.log("Form submitted with values:", values);
    },
  });

  return (
    <form
      method="post"
      onSubmit={(event) => {
        console.log("Submitting form", event);
        console.log("Event type:", event.type);
        console.log("Event target:", event.target);

        event.preventDefault();
        event.stopPropagation();
        form.handleSubmit();
      }}
    >
      <div className="grid gap-6">
        <form.Field name="email">
          {(field) => (
            <div className="grid gap-3">
              <Label htmlFor={field.name}>Email</Label>
              <Input
                placeholder="email@example.com"
                id={field.name}
                name={field.name}
                type="email"
                value={field.state.value}
                onBlur={field.handleBlur}
                onChange={(event) => field.handleChange(event.target.value)}
                required
              />
            </div>
          )}
        </form.Field>

        <form.Subscribe>
          {(state) => (
            <Button
              type="submit"
              className="w-full"
              disabled={!state.canSubmit || state.isSubmitting}
            >
              {state.isSubmitting ? (
                <LoaderCircleIcon className="animate-spin" />
              ) : null}
              {state.isSubmitting ? "Sending..." : "Send me a magic link"}
            </Button>
          )}
        </form.Subscribe>
      </div>
    </form>
  );
};

import {useForm} from "@tanstack/react-form";
import {createFileRoute} from "@tanstack/react-router";

export const Route = createFileRoute("/_auth/login")({
  component: RouteComponent,
});

function RouteComponent() {
  return <LoginForm />;
}

export const LoginForm = () => {
  const form = useForm({
    defaultValues: {email: ""},
    onSubmit: async (values) => {
      console.log("Form submitted with values:", values);
    },
  });

  return (
    <form
      method="post"
      onSubmit={(event) => {
        console.log("Submitting form", event);
        console.log("Event type:", event.type);
        console.log("Event target:", event.target);

        event.preventDefault();
        event.stopPropagation();
        form.handleSubmit();
      }}
    >
      <div className="grid gap-6">
        <form.Field name="email">
          {(field) => (
            <div className="grid gap-3">
              <Label htmlFor={field.name}>Email</Label>
              <Input
                placeholder="email@example.com"
                id={field.name}
                name={field.name}
                type="email"
                value={field.state.value}
                onBlur={field.handleBlur}
                onChange={(event) => field.handleChange(event.target.value)}
                required
              />
            </div>
          )}
        </form.Field>

        <form.Subscribe>
          {(state) => (
            <Button
              type="submit"
              className="w-full"
              disabled={!state.canSubmit || state.isSubmitting}
            >
              {state.isSubmitting ? (
                <LoaderCircleIcon className="animate-spin" />
              ) : null}
              {state.isSubmitting ? "Sending..." : "Send me a magic link"}
            </Button>
          )}
        </form.Subscribe>
      </div>
    </form>
  );
};