forked from github/plane
95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
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>
|
|
</>
|
|
);
|
|
};
|