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

bugfix - resolved modal form ui issue

This commit is contained in:
James Wyndham 2024-02-22 05:26:01 +08:00
parent 2e621d0d6c
commit 0cd8f39a40
2 changed files with 146 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
Frontend/sections/ContactUs/FormLeftDescriptionRightContactUs.tsx
View File

@ -44,7 +44,8 @@ const FormLeftDescriptionRightContactUs = () => {
<h2 className="mb-8 text-xl font-semibold text-base-content "> <h2 className="mb-8 text-xl font-semibold text-base-content ">
Fill in the form Fill in the form
</h2> </h2>
{!localStorage.getItem("contactus") ? ( {typeof window !== "undefined" &&
!localStorage.getItem("contactus") ? (
<form onSubmit={handleSubmit(onSubmit)}> <form onSubmit={handleSubmit(onSubmit)}>
<div className="grid gap-4 gap-y-0"> <div className="grid gap-4 gap-y-0">
{/* Grid */} {/* Grid */}

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

@ -38,7 +38,7 @@ function ModalSignUp() {
<div className="flex justify-end pb-2 select-none"> <div className="flex justify-end pb-2 select-none">
<label <label
htmlFor="sign-up-modal" htmlFor="sign-up-modal"
className="cursor-pointer" className="cursor-pointer text-base-content"
onClick={() => { onClick={() => {
reset(); reset();
}} }}
@ -46,149 +46,158 @@ function ModalSignUp() {
<Icon name="Dismiss20Filled" size="medium" /> <Icon name="Dismiss20Filled" size="medium" />
</label> </label>
</div> </div>
<div <div className="flex flex-grow flex-col h-[30rem] lg:h-full overflow-y-scroll">
className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 pt-2 mt-3 pb-6 rounded-lg" <div
data-aos="fade-up" className="w-[100%] bg-gradient-to-r from-primary to-secondary px-6 mt-3 pb-6 rounded-lg"
> data-aos="fade-up"
<h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6"> >
We Are Growing Fast, and We Want You To Join The Party! <h3 className="pb-1 text-3xl font-bold md:text-3xl pt-6">
</h3> We Are Growing Fast, and We Want You To Join The Party!
<p className="text-sm md:text-base"> </h3>
Excited to see what we&apos;ve got! Signup and get started! <p className="text-sm md:text-base">
</p> Excited to see what we&apos;ve got! Signup and get started!
</div> </p>
<form
onSubmit={handleSubmit((data) => {
console.log(data);
reset();
})}
className="w-full md:w-2/3"
>
<div className="relative mt-6">
<input
{...register("email")}
type="text"
id="SignUpEmail"
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 "
placeholder="Email…"
aria-label="Email…"
autoComplete="on"
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
</div>
</div> </div>
<div className="relative mt-1"> <form
<input onSubmit={handleSubmit((data) => {
{...register("firstName")} console.log(data);
id="SignUpFirstName" reset();
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 " className="w-full md:w-2/3"
placeholder="First Name…" >
aria-label="First Name…" <div className="relative mt-6">
autoComplete="on" <input
/> type="text"
<div className="text-start text-sm italic text-error-content"> id="SignUpEmail"
{errors.firstName?.message}&nbsp; 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 "
placeholder="Email…"
aria-label="Email…"
autoComplete="on"
{...register("email")}
/>
<div className="text-start text-sm italic text-error-content">
{errors.email?.message}&nbsp;
</div>
</div> </div>
</div>
<div className="relative mt-1">
<input
{...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 "
placeholder="Last Name…"
aria-label="Last Name…"
/>
<div className="text-start text-sm italic text-error-content">
{errors.lastName?.message}&nbsp;
</div>
</div>
<div className="relative mt-1"> <div className="flex flex-row gap-4">
<input <div className="relative mt-1">
{...register("phoneNumber")} <input
id="SignUpPhoneNumber" id="SignUpFirstName"
type="text" 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 " 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 "
placeholder="Phone Number…" placeholder="First Name…"
aria-label="Phone Number…" aria-label="First Name…"
/> autoComplete="on"
<div className="text-start text-sm italic text-error-content"> {...register("firstName")}
{errors.phoneNumber?.message}&nbsp; />
<div className="text-start text-sm italic text-error-content">
{errors.firstName?.message}&nbsp;
</div>
</div>
<div className="relative mt-1">
<input
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 "
placeholder="Last Name…"
aria-label="Last Name…"
{...register("lastName")}
/>
<div className="text-start text-sm italic text-error-content">
{errors.lastName?.message}&nbsp;
</div>
</div>
</div> </div>
</div>
<div className="relative mt-1"> <div className="relative mt-1">
<input <input
{...register("organisation")} id="SignUpPhoneNumber"
id="SignUpOrganisation" type="text"
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 "
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 " placeholder="Phone Number…"
placeholder="Organisation…" aria-label="Phone Number…"
aria-label="Organisation…" {...register("phoneNumber")}
/> />
<div className="text-start text-sm italic text-error-content"> <div className="text-start text-sm italic text-error-content">
{errors.organisation?.message}&nbsp; {errors.phoneNumber?.message}&nbsp;
</div>
</div> </div>
</div> <div className="flex flex-row gap-4">
<div className="relative mt-1"> <div className="relative mt-1">
<select <input
{...register("organisationSize")} id="SignUpOrganisation"
id="SignUpCompanySize" type="text"
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 "
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 " placeholder="Organisation…"
> aria-label="Organisation…"
<option className="bg-gray-850" value={""} disabled> {...register("organisation")}
Company Size… />
</option> <div className="text-start text-sm italic text-error-content">
{companySizeList.map((companySizeOption, i) => { {errors.organisation?.message}&nbsp;
return ( </div>
<option </div>
className="bg-gray-850" <div className="relative mt-1">
value={companySizeOption} <select
key={i} id="SignUpCompanySize"
> defaultValue={""}
{companySizeOption} 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 "
{...register("organisationSize")}
>
<option className="bg-gray-850" value={""} disabled>
Company Size…
</option> </option>
); {companySizeList.map((companySizeOption, i) => {
})} return (
</select> <option
<div className="text-start text-sm italic text-error-content"> className="bg-gray-850"
{errors.organisationSize?.message}&nbsp; value={companySizeOption}
key={i}
>
{companySizeOption}
</option>
);
})}
</select>
<div className="text-start text-sm italic text-error-content">
{errors.organisationSize?.message}&nbsp;
</div>
</div>
</div> </div>
</div> <div className="flex flex-row gap-4">
<div className="relative mt-1"> <div className="relative mt-1">
<input <input
{...register("password")} id="SignUpPwd"
id="SignUpPwd" type="password"
type="password" 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 "
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 " placeholder="Password..."
placeholder="Password..." aria-label="Password"
aria-label="Password" {...register("password")}
/> />
<div className="text-start text-sm italic text-error-content"> <div className="text-start text-sm italic text-error-content">
{errors.password?.message}&nbsp; {errors.password?.message}&nbsp;
</div>
</div>
<div className="relative mt-1 mb-2">
<input
id="SignUpPwdConfirm"
type="password"
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 "
placeholder="Confirm Password..."
aria-label="Confirmed Password"
{...register("passwordConfirmation")}
/>
<div className="text-start text-sm italic text-error-content">
{errors.passwordConfirmation?.message}&nbsp;
</div>
</div>
</div> </div>
</div>
<div className="relative mt-1 mb-2">
<input
{...register("passwordConfirmation")}
id="SignUpPwdConfirm"
type="password"
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 "
placeholder="Confirmed Password..."
aria-label="Confirmed Password"
/>
<div className="text-start text-sm italic text-error-content">
{errors.passwordConfirmation?.message}&nbsp;
</div>
</div>
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Sign Up Sign Up
</button> </button>
</form> </form>
</div>
</label> </label>
</label> </label>
</> </>