61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
import { useForm } from "react-hook-form";
|
|
import { type LoginData, useLoginMutation } from "../api/auth";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
|
|
export type LoginFormProps = {
|
|
onClose: () => void;
|
|
onRegister: () => void;
|
|
};
|
|
|
|
export const LoginForm = ({ onClose, onRegister }: LoginFormProps) => {
|
|
const queryClient = useQueryClient();
|
|
const mutation = useLoginMutation();
|
|
|
|
const form = useForm<LoginData>({
|
|
defaultValues: {
|
|
login: "",
|
|
password: "",
|
|
},
|
|
});
|
|
|
|
const onSubmit = form.handleSubmit((data) => {
|
|
mutation.mutate(data, {
|
|
onSuccess() {
|
|
form.reset();
|
|
onClose();
|
|
queryClient.invalidateQueries({ queryKey: ["user"] });
|
|
},
|
|
});
|
|
});
|
|
|
|
return (
|
|
<form className="flex flex-col gap-2 mt-5" onSubmit={onSubmit}>
|
|
<input
|
|
type="text"
|
|
placeholder="login"
|
|
className="w-full"
|
|
{...form.register("login", {
|
|
required: true,
|
|
})}
|
|
/>
|
|
<input
|
|
type="password"
|
|
placeholder="password"
|
|
className="w-full"
|
|
{...form.register("password", {
|
|
required: true,
|
|
})}
|
|
/>
|
|
<button type="submit" className="w-full mt-2">
|
|
Continue
|
|
</button>
|
|
<p>
|
|
Don't have an account?{" "}
|
|
<button type="button" onClick={() => onRegister()}>
|
|
Register
|
|
</button>
|
|
</p>
|
|
</form>
|
|
);
|
|
};
|