feat(LoginForm): use component as prop pattern to add customizable input and button components

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() {
+export function LoginForm({ InputComponent, ButtonComponent }: Props) {
-  const { formData, setEmail, setPassword, login } = useAuthStore();
+  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
+      {InputComponent ? (
-        type="email"
+        cloneElement(InputComponent, {
-        aria-label="Email"
+          type: "email",
-        value={formData?.email?.value ?? ""}
+          value: email,
-        onChange={handleEmailChange}
+          onChange: handleEmailChange,
-      />
+          "aria-label": "Email",
-      <input
+        })
-        type="password"
+      ) : (
-        aria-label="Password"
+        <DefaultInputComponent
-        value={formData?.password?.value ?? ""}
+          type="email"
-        onChange={handlePasswordChange}
+          value={email}
-      />
+          onChange={handleEmailChange}
-      <button type="submit" disabled={disabled}>
+          aria-label="Email"
-        Login
+        />
-      </button>
+      )}
+      {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>
   );
 }