mrwyndham
/
fastpocket
1
2
Fork 3
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

bugfix - fixed forms with hookform

This commit is contained in:
James Wyndham 2024-02-21 18:25:23 +08:00
parent 7d6cf57432
commit 2e621d0d6c
3 changed files with 52 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
Frontend/sections/ModalSignIn/ModalSignIn.tsx
View File

@ -12,6 +12,7 @@ function ModalSignIn() {
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(signInValidationSchema),
@ -22,7 +23,13 @@ function ModalSignIn() {
<label htmlFor="sign-in-modal" className="modal cursor-pointer">
<label className="modal-box relative bg-base-100 max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
<div className="flex justify-end pb-2 select-none">
<label htmlFor="sign-in-modal" className="cursor-pointer">
<label
htmlFor="sign-in-modal"
className="cursor-pointer"
onClick={() => {
reset();
}}
>
<Icon name="Dismiss20Filled" size="medium" color={color} />
</label>
</div>
@ -36,7 +43,13 @@ function ModalSignIn() {
</h3>
<p className="text-sm md:text-base">Lets kick some more ass?</p>
</div>
<form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
<form
onSubmit={handleSubmit((data) => {
console.log(data);
reset();
})}
className="w-full md:w-2/3"
>
<div className="relative mt-6">
<input
{...register("email")}

48
Frontend/sections/ModalSignUp/ModalSignUp.tsx
View File

@ -14,6 +14,7 @@ function ModalSignUp() {
const {
register,
handleSubmit,
reset,
formState: { errors },
} = useForm({
resolver: yupResolver(signUpValidationSchema),
@ -25,12 +26,23 @@ function ModalSignUp() {
id="sign-up-modal"
className="modal-toggle"
name=""
// onChange={whenModalOpens}
/>
<label htmlFor="sign-up-modal" className="modal cursor-pointer">
<label
htmlFor="sign-up-modal"
className="modal cursor-pointer"
onClick={() => {
reset();
}}
>
<label className="modal-box relative max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
<div className="flex justify-end pb-2 select-none">
<label htmlFor="sign-up-modal" className="cursor-pointer">
<label
htmlFor="sign-up-modal"
className="cursor-pointer"
onClick={() => {
reset();
}}
>
<Icon name="Dismiss20Filled" size="medium" />
</label>
</div>
@ -45,7 +57,13 @@ function ModalSignUp() {
Excited to see what we&apos;ve got! Signup and get started!
</p>
</div>
<form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
<form
onSubmit={handleSubmit((data) => {
console.log(data);
reset();
})}
className="w-full md:w-2/3"
>
<div className="relative mt-6">
<input
{...register("email")}
@ -62,7 +80,7 @@ function ModalSignUp() {
</div>
<div className="relative mt-1">
<input
{...register("first_name")}
{...register("firstName")}
id="SignUpFirstName"
type="text"
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@ -71,12 +89,12 @@ function ModalSignUp() {
autoComplete="on"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
{errors.firstName?.message}&nbsp;
</div>
</div>
<div className="relative mt-1">
<input
{...register("last_name")}
{...register("lastName")}
id="SignUpLastName"
type="text"
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@ -84,13 +102,13 @@ function ModalSignUp() {
aria-label="Last Name…"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
{errors.lastName?.message}&nbsp;
</div>
</div>
<div className="relative mt-1">
<input
{...register("phone_number")}
{...register("phoneNumber")}
id="SignUpPhoneNumber"
type="text"
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@ -98,7 +116,7 @@ function ModalSignUp() {
aria-label="Phone Number…"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
{errors.phoneNumber?.message}&nbsp;
</div>
</div>
<div className="relative mt-1">
@ -111,12 +129,12 @@ function ModalSignUp() {
aria-label="Organisation…"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
{errors.organisation?.message}&nbsp;
</div>
</div>
<div className="relative mt-1">
<select
{...register("company_size")}
{...register("organisationSize")}
id="SignUpCompanySize"
defaultValue={""}
className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@ -137,7 +155,7 @@ function ModalSignUp() {
})}
</select>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
{errors.organisationSize?.message}&nbsp;
</div>
</div>
<div className="relative mt-1">
@ -150,7 +168,7 @@ function ModalSignUp() {
aria-label="Password"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
{errors.password?.message}&nbsp;
</div>
</div>
<div className="relative mt-1 mb-2">
@ -163,7 +181,7 @@ function ModalSignUp() {
aria-label="Confirmed Password"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
{errors.passwordConfirmation?.message}&nbsp;
</div>
</div>

8
Frontend/utils/form.ts
View File

@ -38,14 +38,14 @@ Yup.addMethod(Yup.string, "mobileNumberValidation", function (errorMessage) {
});
const signUpValidationSchema = Yup.object().shape({
first_name: Yup.string().required("First Name is required"),
last_name: Yup.string().required("Last Name is required"),
firstName: Yup.string().required("First Name is required"),
lastName: Yup.string().required("Last Name is required"),
email: Yup.string().email().required("E-mail is required"),
phone_number: Yup.string()
phoneNumber: Yup.string()
.required("Phone Number is required")
.mobileNumberValidation("Phone Number is not valid"),
organisation: Yup.string().required("Organisation name is required"),
company_size: Yup.string().required("Company Size is required"),
organisationSize: Yup.string().required("Company Size is required"),
password: Yup.string()
.password()
.required("Password is required.")