From 8d283064a099c6bd4ca26d4d3a6c1c63660e0abc Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Tue, 31 Mar 2026 12:54:43 +0300
Subject: [PATCH] feat(LoginForm): use component as prop pattern to add
 customizable input and button components

---
 src/features/auth/ui/LoginForm/LoginForm.tsx | 100 +++++++++++++++----
 1 file changed, 81 insertions(+), 19 deletions(-)

diff --git a/src/features/auth/ui/LoginForm/LoginForm.tsx b/src/features/auth/ui/LoginForm/LoginForm.tsx
index 5b1c8f7..bfe4e7f 100644
--- a/src/features/auth/ui/LoginForm/LoginForm.tsx
+++ b/src/features/auth/ui/LoginForm/LoginForm.tsx
@@ -1,16 +1,52 @@
 import {
+  selectEmail,
   selectFormValid,
+  selectPassword,
   selectStatusIsLoading,
   useAuthStore,
 } from "../../model";
-import type { SubmitEvent, ChangeEvent } from "react";
+import {
+  type SubmitEvent,
+  type ChangeEvent,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type ButtonHTMLAttributes,
+  cloneElement,
+  type ReactElement,
+} from "react";
+
+export type InputAttributes = InputHTMLAttributes<HTMLInputElement>;
+export type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
+
+export interface Props {
+  InputComponent?: ReactElement<InputAttributes>;
+  ButtonComponent?: ReactElement<ButtonAttributes>;
+}
+
+const DefaultInputComponent = ({
+  value,
+  onChange,
+  ["aria-label"]: ariaLabel,
+}: InputAttributes) => (
+  <input
+    type="email"
+    value={value}
+    onChange={onChange}
+    aria-label={ariaLabel}
+  />
+);
+
+const DefaultButtonComponent = ({ disabled }: ButtonAttributes) => (
+  <button type="submit" disabled={disabled} />
+);
 
 /**
  * Login form component
  */
-export function LoginForm() {
-  const { formData, setEmail, setPassword, login } = useAuthStore();
-
+export function LoginForm({ InputComponent, ButtonComponent }: Props) {
+  const { setEmail, setPassword, login } = useAuthStore();
+  const email = useAuthStore(selectEmail);
+  const password = useAuthStore(selectPassword);
   const formValid = useAuthStore(selectFormValid);
   const isLoading = useAuthStore(selectStatusIsLoading);
 
@@ -31,21 +67,47 @@ export function LoginForm() {
 
   return (
     <form aria-label="Login form" onSubmit={handleSubmit}>
-      <input
-        type="email"
-        aria-label="Email"
-        value={formData?.email?.value ?? ""}
-        onChange={handleEmailChange}
-      />
-      <input
-        type="password"
-        aria-label="Password"
-        value={formData?.password?.value ?? ""}
-        onChange={handlePasswordChange}
-      />
-      <button type="submit" disabled={disabled}>
-        Login
-      </button>
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          type: "email",
+          value: email,
+          onChange: handleEmailChange,
+          "aria-label": "Email",
+        })
+      ) : (
+        <DefaultInputComponent
+          type="email"
+          value={email}
+          onChange={handleEmailChange}
+          aria-label="Email"
+        />
+      )}
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          type: "password",
+          value: password,
+          onChange: handlePasswordChange,
+          "aria-label": "Password",
+        })
+      ) : (
+        <DefaultInputComponent
+          type="password"
+          value={password}
+          onChange={handlePasswordChange}
+          aria-label="Password"
+        />
+      )}
+      {ButtonComponent ? (
+        cloneElement(ButtonComponent, {
+          type: "submit",
+          disabled: disabled,
+          children: "Login",
+        })
+      ) : (
+        <DefaultButtonComponent type="submit" disabled={disabled}>
+          Login
+        </DefaultButtonComponent>
+      )}
     </form>
   );
 }