forked from github/plane
5eb7740833
* fix: upgrading next package and removed unused deps * chore: unused variable removed * chore: next image icon fix * chore: unused component removed * chore: next image icon fix * chore: replace use-debounce with lodash debounce * chore: unused component removed * resolved: fixed issue with next link component * fix: updates in next config * fix: updating types pages --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so>
116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
import React, { useState } from "react";
|
|
import { useRouter } from "next/router";
|
|
import Link from "next/link";
|
|
import { useForm } from "react-hook-form";
|
|
// components
|
|
import { EmailResetPasswordForm } from "./email-reset-password-form";
|
|
// ui
|
|
import { Input, PrimaryButton } from "components/ui";
|
|
// types
|
|
type EmailPasswordFormValues = {
|
|
email: string;
|
|
password?: string;
|
|
medium?: string;
|
|
};
|
|
|
|
type Props = {
|
|
onSubmit: (formData: EmailPasswordFormValues) => Promise<void>;
|
|
};
|
|
|
|
export const EmailPasswordForm: React.FC<Props> = ({ onSubmit }) => {
|
|
const [isResettingPassword, setIsResettingPassword] = useState(false);
|
|
|
|
const router = useRouter();
|
|
const isSignUpPage = router.pathname === "/sign-up";
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
formState: { errors, isSubmitting, isValid, isDirty },
|
|
} = useForm<EmailPasswordFormValues>({
|
|
defaultValues: {
|
|
email: "",
|
|
password: "",
|
|
medium: "email",
|
|
},
|
|
mode: "onChange",
|
|
reValidateMode: "onChange",
|
|
});
|
|
|
|
return (
|
|
<>
|
|
<h1 className="text-center text-2xl sm:text-2.5xl font-semibold text-custom-text-100">
|
|
{isResettingPassword ? "Reset your password" : isSignUpPage ? "Sign up on Plane" : "Sign in to Plane"}
|
|
</h1>
|
|
{isResettingPassword ? (
|
|
<EmailResetPasswordForm setIsResettingPassword={setIsResettingPassword} />
|
|
) : (
|
|
<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"
|
|
{...register("email", {
|
|
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",
|
|
})}
|
|
placeholder="Enter your email address..."
|
|
className="border-custom-border-300 h-[46px]"
|
|
/>
|
|
{errors.email && <div className="text-sm text-red-500">{errors.email.message}</div>}
|
|
</div>
|
|
<div className="space-y-1">
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
{...register("password", {
|
|
required: "Password is required",
|
|
})}
|
|
placeholder="Enter your password..."
|
|
className="border-custom-border-300 h-[46px]"
|
|
/>
|
|
{errors.password && <div className="text-sm text-red-500">{errors.password.message}</div>}
|
|
</div>
|
|
<div className="text-right text-xs">
|
|
{isSignUpPage ? (
|
|
<Link href="/">
|
|
<span className="text-custom-text-200 hover:text-custom-primary-100">
|
|
Already have an account? Sign in.
|
|
</span>
|
|
</Link>
|
|
) : (
|
|
<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}
|
|
>
|
|
{isSignUpPage ? (isSubmitting ? "Signing up..." : "Sign up") : isSubmitting ? "Signing in..." : "Sign in"}
|
|
</PrimaryButton>
|
|
{!isSignUpPage && (
|
|
<Link href="/sign-up">
|
|
<span className="block text-custom-text-200 hover:text-custom-primary-100 text-xs mt-4">
|
|
Don{"'"}t have an account? Sign up.
|
|
</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</form>
|
|
)}
|
|
</>
|
|
);
|
|
};
|