refactor: align frontend ownership boundaries

Close audit gaps across API drift, query policy, UI, and tests.

src/features/auth/index.ts

@@ -1,3 +1,4 @@
 export { AuthProvider, useAuth } from "./model/auth";
+export { AuthPageLayout } from "./ui/AuthPageLayout";
 export { LoginForm } from "./ui/LoginForm";
 export { RegisterForm } from "./ui/RegisterForm";

src/features/auth/model/auth.tsx

@@ -8,8 +8,7 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { apiClient, configureAuthClient } from "@/shared/api";
-import type { paths } from "@/shared/api/generated/schema";
+import { apiClient, configureAuthClient, type paths } from "@/shared/api";
 
 type User =
 	paths["/api/v1/auth/me"]["get"]["responses"][200]["content"]["application/json"];

src/features/auth/model/validation.ts

@@ -0,0 +1,48 @@
+import { z } from "zod";
+import { validationMessage } from "@/shared/i18n";
+
+function isEmailCharacterInvalid(character: string): boolean {
+	return (
+		/\s/.test(character) ||
+		character.charCodeAt(0) < 32 ||
+		character.charCodeAt(0) === 127
+	);
+}
+
+const email = z
+	.string()
+	.trim()
+	.toLowerCase()
+	.max(254)
+	.refine(
+		(value) =>
+			value.split("@").length === 2 &&
+			value.split("@").every(Boolean) &&
+			!value.split("").some(isEmailCharacterInvalid),
+		validationMessage("auth.validation.invalidEmail"),
+	);
+const password = z
+	.string()
+	.refine(
+		(value) =>
+			new TextEncoder().encode(value).length >= 12 &&
+			new TextEncoder().encode(value).length <= 72,
+		validationMessage("auth.validation.invalidPasswordLength"),
+	);
+
+const loginSchema = z.object({
+	email,
+	password,
+	passwordConfirmation: z.string().optional(),
+});
+const registerSchema = loginSchema.refine(
+	(value) => value.password === value.passwordConfirmation,
+	(value) => ({
+		path: ["passwordConfirmation"],
+		...validationMessage("auth.validation.passwordsDoNotMatch")(value),
+	}),
+);
+
+type AuthFormValues = z.input<typeof loginSchema>;
+
+export { type AuthFormValues, loginSchema, registerSchema };

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

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

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

@@ -1,18 +1,10 @@
 import { MantineProvider } from "@mantine/core";
-import {
-	cleanup,
-	fireEvent,
-	render,
-	screen,
-	waitFor,
-} from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { MemoryRouter } from "react-router";
-import { afterEach, describe, expect, it, vi } from "vitest";
+import { describe, expect, it, vi } from "vitest";
 import { AuthForm } from "./AuthForm";
 
 describe("AuthForm", () => {
-	afterEach(cleanup);
-
 	it("does not submit registration when password confirmation differs", async () => {
 		const onSubmit = vi.fn();
 		render(

src/features/auth/ui/AuthForm.tsx

@@ -5,52 +5,13 @@ import { useState } from "react";
 import { FormProvider, type Resolver, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import { z } from "zod";
+import {
+	type AuthFormValues,
+	loginSchema,
+	registerSchema,
+} from "../model/validation";
+import classes from "./AuthForm.module.css";
 
-import { validationMessage } from "@/shared/i18n";
-
-function isEmailCharacterInvalid(character: string): boolean {
-	return (
-		/\s/.test(character) ||
-		character.charCodeAt(0) < 32 ||
-		character.charCodeAt(0) === 127
-	);
-}
-
-const email = z
-	.string()
-	.trim()
-	.toLowerCase()
-	.max(254)
-	.refine(
-		(value) =>
-			value.split("@").length === 2 &&
-			value.split("@").every(Boolean) &&
-			!value.split("").some(isEmailCharacterInvalid),
-		validationMessage("auth.validation.invalidEmail"),
-	);
-const password = z
-	.string()
-	.refine(
-		(value) =>
-			new TextEncoder().encode(value).length >= 12 &&
-			new TextEncoder().encode(value).length <= 72,
-		validationMessage("auth.validation.invalidPasswordLength"),
-	);
-
-const loginSchema = z.object({
-	email,
-	password,
-	passwordConfirmation: z.string().optional(),
-});
-const registerSchema = loginSchema.refine(
-	(value) => value.password === value.passwordConfirmation,
-	(value) => ({
-		path: ["passwordConfirmation"],
-		...validationMessage("auth.validation.passwordsDoNotMatch")(value),
-	}),
-);
-type AuthFormValues = z.input<typeof loginSchema>;
 type AuthFormProps = {
 	register?: true;
 	onSubmit: (email: string, password: string) => Promise<void>;
@@ -79,7 +40,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 					}
 				})}
 			>
-				<fieldset disabled={isSubmitting}>
+				<fieldset className={classes.fieldset} disabled={isSubmitting}>
 					<Stack>
 						<TextInput
 							label={t("auth.email")}

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

@@ -0,0 +1,12 @@
+.page {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	min-height: 100dvh;
+	padding: var(--mantine-spacing-xl);
+}
+
+.card {
+	box-shadow: 0 12px 32px rgba(30, 41, 59, 0.1);
+	width: min(100%, 26rem);
+}

src/features/auth/ui/AuthPageLayout.tsx

@@ -0,0 +1,21 @@
+import { Paper, Stack, Title } from "@mantine/core";
+import type { FC, PropsWithChildren } from "react";
+import classes from "./AuthPageLayout.module.css";
+
+type AuthPageLayoutProps = PropsWithChildren<{ title: string }>;
+
+const AuthPageLayout: FC<AuthPageLayoutProps> = (props) => {
+	const { children, title } = props;
+	return (
+		<main className={classes.page}>
+			<Paper className={classes.card} p="xl" radius="lg" withBorder>
+				<Stack gap="lg">
+					<Title order={1}>{title}</Title>
+					{children}
+				</Stack>
+			</Paper>
+		</main>
+	);
+};
+
+export { AuthPageLayout };