sarlink-portal/components/auth/login-form.tsx

"use client";

import { Button } from "@/components/ui/button";

import { signin } from "@/actions/auth-actions";
import { Loader2 } from "lucide-react";
import { useActionState } from "react";
import { PhoneInput } from "../ui/phone-input";

export default function LoginForm() {
	const [state, formAction, isPending] = useActionState(signin, {
		message: "",
		status: "",
	});

	return (
		<form
			className="overflow-clip title-bg w-full max-w-xs mx-auto rounded-lg shadow border-2 border-sarLinkOrange/50 dark:border-sarLinkOrange/50 mt-4"
			action={formAction}
		>
			<div className="py-4 px-4">
				<div className="grid gap-4">
					<PhoneInput
						id="phone-number"
						name="phoneNumber"
						maxLength={8}
						disabled={isPending}
						placeholder="Enter phone number"
						defaultCountry="MV"
					/>

					{state.status === "error" && (
						<p className="text-red-500 text-sm">{state.message}</p>
					)}
					<Button className="" disabled={isPending} type="submit">
						{isPending ? <Loader2 className="animate-spin" /> : "Login"}
					</Button>
				</div>
			</div>
		</form>
	);
}