MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: split zod validation register modal

Browse Source
This commit is contained in:
egagofur
2025-04-04 16:38:21 +07:00
parent 272db82c8c
commit d61cb4a215
3 changed files with 116 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/gacha/src/app/_components/form/modal-form-register.tsx
+57 -46
View File
@@ -12,7 +12,7 @@ interface IModalFormRegisterProps {
}
const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
const { form, onSubmit } = useRegister();
const { form, onSubmit, isStepOneValid } = useRegister();
const {
step: currentStep,
@@ -46,7 +46,11 @@ const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
<Modal.Content>
<form onSubmit={onSubmit} className="space-y-6">
{currentStep === 1 && (
<StepOne form={form} nextStep={nextStep} onClose={onClose} />
<StepOne
form={form}
nextStep={nextStep}
isStepOneValid={isStepOneValid}
/>
)}
{currentStep === 2 && <StepTwo form={form} prevStep={prevStep} />}
</form>
@@ -58,52 +62,59 @@ const ModalFormRegister = ({ isOpen, onClose }: IModalFormRegisterProps) => {
interface IStepOneProps {
form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;
nextStep: () => void;
onClose: () => void;
isStepOneValid: boolean;
}
const StepOne = ({ form, nextStep, onClose }: IStepOneProps) => (
<>
<ControlledInputField
control={form.control}
name="fullname"
label="Nama Lengkap"
placeholder="Masukkan Nama Lengkap"
type="text"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
label="Email"
placeholder="Masukkan Email Anda"
type="email"
name="email"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
name="password"
label="Password"
placeholder="Masukkan Password"
type="password"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
name="confirm_password"
label="Ulangi Password"
placeholder="Masukkan Ulang Password"
type="password"
size="lg"
className="w-full"
/>
<Button size="md" className="w-full" onClick={nextStep}>
Selanjutnya
</Button>
</>
);
const StepOne = ({ form, nextStep, isStepOneValid }: IStepOneProps) => {
return (
<>
<ControlledInputField
control={form.control}
name="fullname"
label="Nama Lengkap"
placeholder="Masukkan Nama Lengkap"
type="text"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
label="Email"
placeholder="Masukkan Email Anda"
type="email"
name="email"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
name="password"
label="Password"
placeholder="Masukkan Password"
type="password"
size="lg"
className="w-full"
/>
<ControlledInputField
control={form.control}
name="confirm_password"
label="Ulangi Password"
placeholder="Masukkan Ulang Password"
type="password"
size="lg"
className="w-full"
/>
<Button
size="md"
className="w-full"
onClick={nextStep}
disabled={!isStepOneValid}
>
Selanjutnya
</Button>
</>
);
};
interface IStepTwoProps {
form: UseFormReturn<TRegisterRequest, any, TRegisterRequest>;