import React from "react"; import { useForm } from "react-hook-form"; // ui import { Input, PrimaryButton } from "components/ui"; // types type EmailPasswordFormValues = { email: string; password?: string; medium?: string; }; type Props = { onSubmit: (formData: EmailPasswordFormValues) => Promise<void>; setIsResettingPassword: (value: boolean) => void; }; export const EmailPasswordForm: React.FC<Props> = (props) => { const { onSubmit, setIsResettingPassword } = props; // form info const { register, handleSubmit, formState: { errors, isSubmitting, isValid, isDirty }, } = useForm<EmailPasswordFormValues>({ defaultValues: { email: "", password: "", medium: "email", }, mode: "onChange", reValidateMode: "onChange", }); return ( <> <form className="space-y-4 mt-10 w-full sm:w-[360px] mx-auto" onSubmit={handleSubmit(onSubmit)} > <div className="space-y-1"> <Input id="email" type="email" name="email" register={register} validations={{ required: "Email address is required", validate: (value) => /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test( value ) || "Email address is not valid", }} error={errors.email} placeholder="Enter your email address..." className="border-custom-border-300 h-[46px]" /> </div> <div className="space-y-1"> <Input id="password" type="password" name="password" register={register} validations={{ required: "Password is required", }} error={errors.password} placeholder="Enter your password..." className="border-custom-border-300 h-[46px]" /> </div> <div className="text-right text-xs"> <button type="button" onClick={() => setIsResettingPassword(true)} className="text-custom-text-200 hover:text-custom-primary-100" > Forgot your password? </button> </div> <div> <PrimaryButton type="submit" className="w-full text-center h-[46px]" disabled={!isValid && isDirty} loading={isSubmitting} > {isSubmitting ? "Signing in..." : "Sign in"} </PrimaryButton> </div> </form> </> ); };