chore: rewrite LoginForm to use defaults from separate files

src/features/auth/ui/LoginForm/LoginForm.tsx

@@ -8,38 +8,23 @@ import {
 import {
   type SubmitEvent,
   type ChangeEvent,
-  type HTMLAttributes,
-  type InputHTMLAttributes,
-  type ButtonHTMLAttributes,
   cloneElement,
   type ReactElement,
 } from "react";
-
+import {
-export type InputAttributes = InputHTMLAttributes<HTMLInputElement>;
+  DefaultButtonComponent,
-export type ButtonAttributes = ButtonHTMLAttributes<HTMLButtonElement>;
+  type ButtonAttributes,
+} from "../DefaultButton/DefaultButton";
+import {
+  DefaultInputComponent,
+  type InputAttributes,
+} from "../DefaultInput/DefaultInput";
 
 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
  */
@@ -67,9 +52,9 @@ export function LoginForm({ InputComponent, ButtonComponent }: Props) {
 
   return (
     <form aria-label="Login form" onSubmit={handleSubmit}>
+      {/* EMAIL */}
       {InputComponent ? (
         cloneElement(InputComponent, {
-          type: "email",
           value: email,
           onChange: handleEmailChange,
           "aria-label": "Email",
@@ -82,9 +67,9 @@ export function LoginForm({ InputComponent, ButtonComponent }: Props) {
           aria-label="Email"
         />
       )}
+      {/* PASSWORD  */}
       {InputComponent ? (
         cloneElement(InputComponent, {
-          type: "password",
           value: password,
           onChange: handlePasswordChange,
           "aria-label": "Password",
@@ -97,14 +82,14 @@ export function LoginForm({ InputComponent, ButtonComponent }: Props) {
           aria-label="Password"
         />
       )}
+      {/* BUTTON */}
       {ButtonComponent ? (
         cloneElement(ButtonComponent, {
           type: "submit",
           disabled: disabled,
-          children: "Login",
         })
       ) : (
-        <DefaultButtonComponent type="submit" disabled={disabled}>
+        <DefaultButtonComponent disabled={disabled}>
           Login
         </DefaultButtonComponent>
       )}