refactor: colocate frontend component files

src/features/auth/ui/AuthForm/AuthForm.module.css

@@ -0,0 +1,4 @@
+.fieldset {
+	border: 0;
+	padding: 0;
+}

src/features/auth/ui/AuthForm/AuthForm.test.tsx

@@ -0,0 +1,34 @@
+import { MantineProvider } from "@mantine/core";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { describe, expect, it, vi } from "vitest";
+import { AuthForm } from "./AuthForm";
+
+describe("AuthForm", () => {
+	it("does not submit registration when password confirmation differs", async () => {
+		const onSubmit = vi.fn();
+		render(
+			<MantineProvider>
+				<MemoryRouter>
+					<AuthForm register onSubmit={onSubmit} />
+				</MemoryRouter>
+			</MantineProvider>,
+		);
+
+		fireEvent.change(screen.getByLabelText("Email"), {
+			target: { value: "user@example.com" },
+		});
+		fireEvent.change(screen.getByLabelText("Пароль"), {
+			target: { value: "a secure password" },
+		});
+		fireEvent.change(screen.getByLabelText("Подтвердите пароль"), {
+			target: { value: "another secure password" },
+		});
+		fireEvent.click(screen.getByRole("button", { name: "Регистрация" }));
+
+		await waitFor(() => expect(onSubmit).not.toHaveBeenCalled());
+		await waitFor(() =>
+			expect(screen.getByText("Пароли не совпадают")).toBeInTheDocument(),
+		);
+	});
+});

src/features/auth/ui/AuthForm/AuthForm.tsx

@@ -0,0 +1,80 @@
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Alert, Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import type { FC } from "react";
+import { useState } from "react";
+import { FormProvider, type Resolver, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router";
+import {
+	type AuthFormValues,
+	loginSchema,
+	registerSchema,
+} from "../../model/validation";
+import classes from "./AuthForm.module.css";
+
+type AuthFormProps = {
+	register?: true;
+	onSubmit: (email: string, password: string) => Promise<void>;
+};
+
+const AuthForm: FC<AuthFormProps> = (props) => {
+	const { register, onSubmit } = props;
+	const { t } = useTranslation();
+	const schema = register ? registerSchema : loginSchema;
+	const methods = useForm<AuthFormValues>({
+		resolver: zodResolver(schema) as Resolver<AuthFormValues>,
+	});
+	const {
+		formState: { errors, isSubmitting },
+	} = methods;
+	const [submitError, setSubmitError] = useState<string | null>(null);
+	return (
+		<FormProvider {...methods}>
+			<form
+				onSubmit={methods.handleSubmit(async (values) => {
+					setSubmitError(null);
+					try {
+						await onSubmit(values.email, values.password);
+					} catch {
+						setSubmitError(t("auth.requestError"));
+					}
+				})}
+			>
+				<fieldset className={classes.fieldset} disabled={isSubmitting}>
+					<Stack>
+						<TextInput
+							label={t("auth.email")}
+							{...methods.register("email")}
+							error={errors.email?.message as string}
+						/>
+						<PasswordInput
+							label={t("auth.password")}
+							{...methods.register("password")}
+							error={errors.password?.message as string}
+						/>
+						{register && (
+							<PasswordInput
+								label={t("auth.passwordConfirmation")}
+								{...methods.register("passwordConfirmation")}
+								error={errors.passwordConfirmation?.message as string}
+							/>
+						)}
+						{submitError && <Alert color="red">{submitError}</Alert>}
+						<Button type="submit" loading={isSubmitting}>
+							{t(register ? "auth.register" : "auth.login")}
+						</Button>
+						<Button
+							component={Link}
+							to={register ? "/login" : "/register"}
+							variant="subtle"
+						>
+							{t(register ? "auth.haveAccount" : "auth.noAccount")}
+						</Button>
+					</Stack>
+				</fieldset>
+			</form>
+		</FormProvider>
+	);
+};
+
+export { AuthForm };