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() {
-  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
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          type: "email",
+          value: email,
+          onChange: handleEmailChange,
+          "aria-label": "Email",
+        })
+      ) : (
+        <DefaultInputComponent
           type="email"
-        aria-label="Email"
-        value={formData?.email?.value ?? ""}
+          value={email}
           onChange={handleEmailChange}
+          aria-label="Email"
         />
-      <input
+      )}
+      {InputComponent ? (
+        cloneElement(InputComponent, {
+          type: "password",
+          value: password,
+          onChange: handlePasswordChange,
+          "aria-label": "Password",
+        })
+      ) : (
+        <DefaultInputComponent
           type="password"
-        aria-label="Password"
-        value={formData?.password?.value ?? ""}
+          value={password}
           onChange={handlePasswordChange}
+          aria-label="Password"
         />
-      <button type="submit" disabled={disabled}>
+      )}
+      {ButtonComponent ? (
+        cloneElement(ButtonComponent, {
+          type: "submit",
+          disabled: disabled,
+          children: "Login",
+        })
+      ) : (
+        <DefaultButtonComponent type="submit" disabled={disabled}>
           Login
-      </button>
+        </DefaultButtonComponent>
+      )}
     </form>
   );
 }