import { Button } from "@/components/ui/button";
import { FieldGroup } from "@/components/ui/field";
import { loginServerFn } from "@/functions/auth";
import { useAppForm } from "@/hooks/use-app-form";
import { loginSchema } from "@/schemas/user";
import { useNavigate } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { EyeIcon, EyeOffIcon, LogInIcon, MailIcon } from "lucide-react";
import { useState } from "react";
import type z from "zod";
export const LoginForm = () => {
const navigate = useNavigate();
const loginFn = useServerFn(loginServerFn);
const [showPassword, setShowPassword] = useState<boolean>(false);
const form = useAppForm<z.infer<typeof loginSchema>>({
defaultValues: { email: "", password: "" },
validators: {
onSubmit: loginSchema,
onSubmitAsync: async ({ value: data }) => {
const { ok, error } = await loginFn({ data });
if (ok) return;
return { fields: error };
},
},
onSubmit: async () => {
await navigate({ to: "/" });
},
});
return (
<form
onSubmit={(event) => {
event.preventDefault();
form.handleSubmit();
}}
>
<FieldGroup>
<form.AppField name="email">
{(field) => (
<field.Input />
)}
</form.AppField>
<form.AppField name="password">
{(field) => (
<field.Input />
)}
</form.AppField>
<Button disabled={form.state.isSubmitting}>
<LogInIcon /> Login
</Button>
</FieldGroup>
</form>
);
};
import { Button } from "@/components/ui/button";
import { FieldGroup } from "@/components/ui/field";
import { loginServerFn } from "@/functions/auth";
import { useAppForm } from "@/hooks/use-app-form";
import { loginSchema } from "@/schemas/user";
import { useNavigate } from "@tanstack/react-router";
import { useServerFn } from "@tanstack/react-start";
import { EyeIcon, EyeOffIcon, LogInIcon, MailIcon } from "lucide-react";
import { useState } from "react";
import type z from "zod";
export const LoginForm = () => {
const navigate = useNavigate();
const loginFn = useServerFn(loginServerFn);
const [showPassword, setShowPassword] = useState<boolean>(false);
const form = useAppForm<z.infer<typeof loginSchema>>({
defaultValues: { email: "", password: "" },
validators: {
onSubmit: loginSchema,
onSubmitAsync: async ({ value: data }) => {
const { ok, error } = await loginFn({ data });
if (ok) return;
return { fields: error };
},
},
onSubmit: async () => {
await navigate({ to: "/" });
},
});
return (
<form
onSubmit={(event) => {
event.preventDefault();
form.handleSubmit();
}}
>
<FieldGroup>
<form.AppField name="email">
{(field) => (
<field.Input />
)}
</form.AppField>
<form.AppField name="password">
{(field) => (
<field.Input />
)}
</form.AppField>
<Button disabled={form.state.isSubmitting}>
<LogInIcon /> Login
</Button>
</FieldGroup>
</form>
);
};