refactor: tighten types and reuse instrument UI

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

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

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

@@ -1,9 +1,9 @@
 import type { FC } from "react";
 
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Alert, Button, PasswordInput, Stack, TextInput } from "@mantine/core";
+import { Alert, Button, Fieldset, PasswordInput, Stack, TextInput } from "@mantine/core";
 import { useState } from "react";
-import { FormProvider, type Resolver, useForm } from "react-hook-form";
+import { FormProvider, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 
@@ -12,7 +12,6 @@ import {
 	loginSchema,
 	registerSchema,
 } from "../../model/auth.schema";
-import classes from "./AuthForm.module.css";
 
 type AuthFormProps = {
 	onSubmit: (email: string, password: string) => Promise<void>;
@@ -25,7 +24,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 	const schema = register ? registerSchema : loginSchema;
 
 	const methods = useForm<AuthFormValues>({
-		resolver: zodResolver(schema) as Resolver<AuthFormValues>,
+		resolver: zodResolver(schema),
 	});
 
 	const {
@@ -34,7 +33,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 
 	const [submitError, setSubmitError] = useState<null | string>(null);
 
-	const onSubmit2 = methods.handleSubmit(async (values) => {
+	const submit = methods.handleSubmit(async (values) => {
 		setSubmitError(null);
 
 		try {
@@ -49,26 +48,26 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 
 	return (
 		<FormProvider {...methods}>
-			<form onSubmit={onSubmit2}>
-				<fieldset className={classes.fieldset} disabled={isSubmitting}>
+			<form onSubmit={submit}>
+				<Fieldset disabled={isSubmitting} variant="unstyled">
 					<Stack>
 						<TextInput
 							label={t("auth.email")}
 							{...methods.register("email")}
-							error={errors.email?.message as string}
+							error={errors.email?.message}
 						/>
 
 						<PasswordInput
 							label={t("auth.password")}
 							{...methods.register("password")}
-							error={errors.password?.message as string}
+							error={errors.password?.message}
 						/>
 
 						{register && (
 							<PasswordInput
 								label={t("auth.passwordConfirmation")}
 								{...methods.register("passwordConfirmation")}
-								error={errors.passwordConfirmation?.message as string}
+								error={errors.passwordConfirmation?.message}
 							/>
 						)}
 
@@ -82,7 +81,7 @@ const AuthForm: FC<AuthFormProps> = (props) => {
 							{t(register ? "auth.haveAccount" : "auth.noAccount")}
 						</Button>
 					</Stack>
-				</fieldset>
+				</Fieldset>
 			</form>
 		</FormProvider>
 	);