add web ui and user route

web/src/components/LoginForm.tsx

@@ -0,0 +1,60 @@
+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>
+  );
+};