shoc-frontend-new/src/app/(auth)/_components/login-form.tsx

import type {
  FieldErrors,
  UseFormHandleSubmit,
  UseFormRegister,
  UseFormWatch,
} from "react-hook-form";
import { Box } from "@mui/material";

import { Button } from "@/components/ui/button";
import { FormErrorMessage } from "@/components/ui/form-error-message";
import { FormField } from "@/components/ui/form-field";
import { PasswordField } from "@/components/ui/password-field";
import { TextField } from "@/components/ui/text-field";
import { loginSchema, type LoginFormValues } from "@/domain/auth/schemas/login-schema";

export type LoginFormProps = {
  register: UseFormRegister<LoginFormValues>;
  handleSubmit: UseFormHandleSubmit<LoginFormValues>;
  watch: UseFormWatch<LoginFormValues>;
  errors: FieldErrors<LoginFormValues>;
  onSubmit: (values: LoginFormValues) => void;
  isLoggingIn: boolean;
  loginError: Error | null;
};

export function LoginForm({
  register,
  handleSubmit,
  watch,
  errors,
  onSubmit,
  isLoggingIn,
  loginError,
}: LoginFormProps) {
  const [username, password] = watch(["username", "password"]);
  const isSubmitDisabled = !loginSchema.safeParse({ username, password }).success;

  return (
    <Box
      component="form"
      onSubmit={handleSubmit(onSubmit)}
      className="flex flex-col gap-4"
      autoComplete="off"
    >
      <FormField
        label="Email"
        htmlFor="login-email"
        error={Boolean(errors.username)}
        helperText={errors.username?.message}
        appearance="auth"
      >
        <TextField
          {...register("username")}
          id="login-email"
          type="email"
          autoComplete="email"
          placeholder="you@seahavenind.com"
          disabled={isLoggingIn}
          error={Boolean(errors.username)}
        />
      </FormField>

      <FormField
        label="Password"
        htmlFor="login-password"
        error={Boolean(errors.password)}
        helperText={errors.password?.message}
        appearance="auth"
      >
        <PasswordField
          {...register("password")}
          id="login-password"
          autoComplete="current-password"
          placeholder="••••••••"
          disabled={isLoggingIn}
          error={Boolean(errors.password)}
        />
        {Boolean(loginError) && (
          <FormErrorMessage message="Invalid email or password. Please try again." />
        )}
      </FormField>

      <Button
        type="submit"
        fullWidth
        size="lg"
        loading={isLoggingIn}
        loadingText="Signing in…"
        disabled={isSubmitDisabled}
        className="mt-1!"
      >
        Sign In
      </Button>
    </Box>
  );
}