refactor login page

client/src/Pages/Auth/Login/index.tsx

@@ -1,9 +1,9 @@
 import { BaseAuthPage, TextLink } from "@/Components/design-elements";
-import { Button, TextField } from "@/Components/inputs";
+import { Button } from "@/Components/inputs";
 
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useForm, Controller } from "react-hook-form";
+import { useForm, FormProvider } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
 import { useLoginForm } from "@/Hooks/useLoginForm";
 import type { LoginFormData } from "@/Validation/login";
@@ -11,6 +11,7 @@ import { useDispatch } from "react-redux";
 import { useNavigate } from "react-router-dom";
 import { setAuthState } from "@/Features/Auth/authSlice";
 import { useLazyGet, usePost } from "@/Hooks/UseApi";
+import { FormTextField } from "@/Components/inputs/forms/FormTextField";
 
 const LoginPage = () => {
 	const { t } = useTranslation();
@@ -31,11 +32,13 @@ const LoginPage = () => {
 
 	const { schema, defaults } = useLoginForm();
 
-	const { control, handleSubmit } = useForm<LoginFormData>({
+	const form = useForm<LoginFormData>({
 		resolver: zodResolver(schema),
 		defaultValues: defaults,
 	});
 
+	const { handleSubmit } = form;
+
 	if (isCheckingAdmin) return null;
 
 	const onSubmit = async (data: LoginFormData) => {
@@ -50,53 +53,40 @@ const LoginPage = () => {
 	};
 
 	return (
-		<BaseAuthPage
-			component="form"
-			onSubmit={handleSubmit(onSubmit)}
-			title={t("pages.auth.login.title")}
-			subtitle={t("pages.auth.login.subtitle")}
-		>
-			<Controller
-				name="email"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						fieldLabel={t("pages.auth.common.form.option.email.label")}
-						placeholder={t("pages.auth.common.form.option.email.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Controller
-				name="password"
-				control={control}
-				render={({ field, fieldState }) => (
-					<TextField
-						{...field}
-						type="password"
-						fieldLabel={t("pages.auth.common.form.option.password.label")}
-						placeholder={t("pages.auth.common.form.option.password.placeholder")}
-						error={!!fieldState.error}
-						helperText={fieldState.error ? t(fieldState.error.message ?? "") : ""}
-					/>
-				)}
-			/>
-			<Button
-				variant="contained"
-				type="submit"
-				loading={loading}
+		<FormProvider {...form}>
+			<BaseAuthPage
+				component="form"
+				onSubmit={handleSubmit(onSubmit)}
+				title={t("pages.auth.login.title")}
+				subtitle={t("pages.auth.login.subtitle")}
 			>
-				{t("pages.auth.login.submit")}
-			</Button>
-			<TextLink
-				alignSelf={"center"}
-				text={t("pages.auth.login.links.forgotPassword.text")}
-				linkText={t("pages.auth.login.links.forgotPassword.linkText")}
-				href="/forgot-password"
-			/>
-		</BaseAuthPage>
+				<FormTextField
+					name="email"
+					type="email"
+					fieldLabel={t("pages.auth.common.form.option.email.label")}
+					placeholder={t("pages.auth.common.form.option.email.placeholder")}
+				/>
+				<FormTextField
+					name="password"
+					type="password"
+					fieldLabel={t("pages.auth.common.form.option.password.label")}
+					placeholder={t("pages.auth.common.form.option.password.placeholder")}
+				/>
+				<Button
+					variant="contained"
+					type="submit"
+					loading={loading}
+				>
+					{t("pages.auth.login.submit")}
+				</Button>
+				<TextLink
+					alignSelf={"center"}
+					text={t("pages.auth.login.links.forgotPassword.text")}
+					linkText={t("pages.auth.login.links.forgotPassword.linkText")}
+					href="/forgot-password"
+				/>
+			</BaseAuthPage>
+		</FormProvider>
 	);
 };