feat: Implement Zod Validation for Email and Password in auth/login … (#9020)

* feat: Implement Zod Validation for Email and Password in auth/login Page

* fix: use i18n for error message

* Update: added novalidate to form
i18n-cache^2
Parvat Raj Singh 2023-05-23 15:39:32 +05:30 committed by GitHub
parent 8d210929b1
commit c96cbd7a9d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 3 deletions

View File

@ -1,3 +1,4 @@
import { zodResolver } from "@hookform/resolvers/zod";
import classNames from "classnames";
import { jwtVerify } from "jose";
import type { GetServerSidePropsContext } from "next";
@ -8,6 +9,7 @@ import type { CSSProperties } from "react";
import { useState } from "react";
import { FormProvider, useForm } from "react-hook-form";
import { FaGoogle } from "react-icons/fa";
import { z } from "zod";
import { SAMLLogin } from "@calcom/features/auth/SAMLLogin";
import { ErrorCode } from "@calcom/features/auth/lib/ErrorCode";
@ -39,7 +41,6 @@ interface LoginValues {
totpCode: string;
csrfToken: string;
}
export default function Login({
csrfToken,
isGoogleLoginEnabled,
@ -50,7 +51,14 @@ export default function Login({
}: inferSSRProps<typeof _getServerSideProps> & WithNonceProps) {
const { t } = useLocale();
const router = useRouter();
const methods = useForm<LoginValues>();
const formSchema = z.object({
email: z
.string()
.min(1, `${t("error_required_field")}`)
.email(`${t("enter_valid_email")}`),
password: z.string().min(1, `${t("error_required_field")}`),
});
const methods = useForm<LoginValues>({ resolver: zodResolver(formSchema) });
const { register, formState } = methods;
const [twoFactorRequired, setTwoFactorRequired] = useState(!!totpEmail || false);
@ -150,7 +158,7 @@ export default function Login({
: null
}>
<FormProvider {...methods}>
<form onSubmit={methods.handleSubmit(onSubmit)} data-testid="login-form">
<form onSubmit={methods.handleSubmit(onSubmit)} noValidate data-testid="login-form">
<div>
<input defaultValue={csrfToken || undefined} type="hidden" hidden {...register("csrfToken")} />
</div>