refactor: enforce frontend view model boundaries

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

@@ -11,7 +11,7 @@ import {
 	type AuthFormValues,
 	loginSchema,
 	registerSchema,
-} from "../../model/validation";
+} from "../../model/auth.schema";
 import classes from "./AuthForm.module.css";
 
 type AuthFormProps = {
@@ -23,26 +23,33 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 	const { onSubmit, register } = 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<null | string>(null);
+
+	const onSubmit2 = methods.handleSubmit(async (values) => {
+		setSubmitError(null);
+
+		try {
+			await onSubmit(values.email, values.password);
+		}
+		catch {
+			setSubmitError(t("auth.requestError"));
+		}
+	});
+
+	const to = register ? "/login" : "/register";
+
 	return (
 		<FormProvider {...methods}>
-			<form
-				onSubmit={methods.handleSubmit(async (values) => {
-					setSubmitError(null);
-					try {
-						await onSubmit(values.email, values.password);
-					}
-					catch {
-						setSubmitError(t("auth.requestError"));
-					}
-				})}
-			>
+			<form onSubmit={onSubmit2}>
 				<fieldset className={classes.fieldset} disabled={isSubmitting}>
 					<Stack>
 						<TextInput
@@ -50,11 +57,13 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 							{...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")}
@@ -62,15 +71,14 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 								error={errors.passwordConfirmation?.message as string}
 							/>
 						)}
+
 						{submitError && <Alert color="red">{submitError}</Alert>}
+
 						<Button loading={isSubmitting} type="submit">
 							{t(register ? "auth.register" : "auth.login")}
 						</Button>
-						<Button
-							component={Link}
-							to={register ? "/login" : "/register"}
-							variant="subtle"
-						>
+
+						<Button component={Link} to={to} variant="subtle">
 							{t(register ? "auth.haveAccount" : "auth.noAccount")}
 						</Button>
 					</Stack>

src/features/auth/ui/AuthPageLayout/AuthPageLayout.tsx

@@ -8,11 +8,13 @@ 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>

src/features/auth/ui/LoginForm.tsx

@@ -1,25 +0,0 @@
-import type { FC } from "react";
-
-import { useLocation, useNavigate } from "react-router";
-
-import { useAuth } from "../model/auth-context";
-import { AuthForm } from "./AuthForm/AuthForm";
-
-const LoginForm: FC = () => {
-	const { login } = useAuth();
-	const navigate = useNavigate();
-	const location = useLocation();
-	const returnTo
-		= (location.state as null | { returnTo?: string })?.returnTo ?? "/accounts";
-
-	return (
-		<AuthForm
-			onSubmit={async (email, password) => {
-				await login(email, password);
-				await navigate(returnTo, { replace: true });
-			}}
-		/>
-	);
-};
-
-export { LoginForm };

src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -0,0 +1,12 @@
+import type { FC } from "react";
+
+import { AuthForm } from "../AuthForm/AuthForm";
+import { useLoginFormVm } from "./LoginForm.vm";
+
+const LoginForm: FC = () => {
+	const { onSubmit } = useLoginFormVm();
+
+	return <AuthForm onSubmit={onSubmit} />;
+};
+
+export { LoginForm };

src/features/auth/ui/LoginForm/LoginForm.vm.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps } from "react";
+
+import { useLocation, useNavigate } from "react-router";
+
+import { useAuth } from "../../model/auth-context";
+import { AuthForm } from "../AuthForm/AuthForm";
+
+function useLoginFormVm() {
+	const { login } = useAuth();
+	const navigate = useNavigate();
+	const location = useLocation();
+
+	const returnTo
+		= (location.state as null
+		| { returnTo?: string })?.returnTo ?? "/accounts";
+
+	const onSubmit: ComponentProps<typeof AuthForm>["onSubmit"] = async (
+		email,
+		password,
+	) => {
+		await login(email, password);
+		await navigate(returnTo, { replace: true });
+	};
+
+	return { onSubmit };
+}
+
+export { useLoginFormVm };

src/features/auth/ui/RegisterForm.tsx

@@ -1,26 +0,0 @@
-import type { FC } from "react";
-
-import { useLocation, useNavigate } from "react-router";
-
-import { useAuth } from "../model/auth-context";
-import { AuthForm } from "./AuthForm/AuthForm";
-
-const RegisterForm: FC = () => {
-	const { register } = useAuth();
-	const navigate = useNavigate();
-	const location = useLocation();
-	const returnTo
-		= (location.state as null | { returnTo?: string })?.returnTo ?? "/accounts";
-
-	return (
-		<AuthForm
-			onSubmit={async (email, password) => {
-				await register(email, password);
-				await navigate(returnTo, { replace: true });
-			}}
-			register
-		/>
-	);
-};
-
-export { RegisterForm };

src/features/auth/ui/RegisterForm/RegisterForm.tsx

@@ -0,0 +1,12 @@
+import type { FC } from "react";
+
+import { AuthForm } from "../AuthForm/AuthForm";
+import { useRegisterFormVm } from "./RegisterForm.vm";
+
+const RegisterForm: FC = () => {
+	const { onSubmit } = useRegisterFormVm();
+
+	return <AuthForm onSubmit={onSubmit} register />;
+};
+
+export { RegisterForm };

src/features/auth/ui/RegisterForm/RegisterForm.vm.ts

@@ -0,0 +1,28 @@
+import type { ComponentProps } from "react";
+
+import { useLocation, useNavigate } from "react-router";
+
+import { useAuth } from "../../model/auth-context";
+import { AuthForm } from "../AuthForm/AuthForm";
+
+function useRegisterFormVm() {
+	const { register } = useAuth();
+	const navigate = useNavigate();
+	const location = useLocation();
+
+	const returnTo
+		= (location.state as null
+		| { returnTo?: string })?.returnTo ?? "/accounts";
+
+	const onSubmit: ComponentProps<typeof AuthForm>["onSubmit"] = async (
+		email,
+		password,
+	) => {
+		await register(email, password);
+		await navigate(returnTo, { replace: true });
+	};
+
+	return { onSubmit, register };
+}
+
+export { useRegisterFormVm };