From 00df44e6f25eaeabc56ebba8b4e9b1cb692928d7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 10:27:32 +0700 Subject: add new register --- src-migrate/modules/register/components/Form.tsx | 89 +++++++++++------------- 1 file changed, 42 insertions(+), 47 deletions(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index b834f97a..7d18f4ee 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -9,7 +9,12 @@ import { useRouter } from "next/router"; import { UseToastOptions, useToast } from "@chakra-ui/react"; import Link from "next/link"; -const Form = () => { +interface FormProps { + type: string; + required: boolean; +} + +const Form: React.FC = ({ type, required }) => { const { form, isCheckedTNC, @@ -75,25 +80,9 @@ const Form = () => { return (
-
- - - -
- + {
- - - - - {!!errors.phone && {errors.phone}} -
- -
- + { {!!errors.email && {errors.email}}
- +
- + { {!!errors.password && {errors.password}}
- +
+ + + + + {!!errors.phone && {errors.phone}} +
+ + {type==='individu' && ( + <> + + + + + + + )} - - ) } -- cgit v1.2.3 From 0427b70917d7623d5de1969b99e9c198c38ccca7 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 15:53:01 +0700 Subject: = ({ type, required }) => { {type==='individu' && ( <> - + {/* */} - - - )} + -- cgit v1.2.3 From 6ff5efdb4b7eec25f991f5bfcc02b4a3f883981b Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 11 Sep 2024 10:04:31 +0700 Subject: update error handling hanya muncul saat button daftar di click --- src-migrate/modules/register/components/Form.tsx | 152 +++++++++++++---------- 1 file changed, 85 insertions(+), 67 deletions(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 29c21f62..118d9d69 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -1,90 +1,98 @@ -import { ChangeEvent, useMemo } from "react"; -import { useMutation } from "react-query"; -import { useRegisterStore } from "../stores/useRegisterStore"; -import { RegisterProps } from "~/types/auth"; -import { registerUser } from "~/services/auth"; -import TermCondition from "./TermCondition"; -import FormCaptcha from "./FormCaptcha"; -import { useRouter } from "next/router"; -import { UseToastOptions, useToast } from "@chakra-ui/react"; -import Link from "next/link"; +import { ChangeEvent, useMemo } from 'react'; +import { useMutation } from 'react-query'; +import { useRegisterStore } from '../stores/useRegisterStore'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import TermCondition from './TermCondition'; +import FormCaptcha from './FormCaptcha'; +import { useRouter } from 'next/router'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import Link from 'next/link'; interface FormProps { type: string; required: boolean; isBisnisRegist: boolean; + chekValid: boolean; } -const Form: React.FC = ({ type, required, isBisnisRegist=false }) => { - const { - form, - isCheckedTNC, - isValidCaptcha, - errors, - updateForm, - validate, - } = useRegisterStore() +const Form: React.FC = ({ + type, + required, + isBisnisRegist = false, + chekValid = false, +}) => { + const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = + useRegisterStore(); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); - const router = useRouter() - const toast = useToast() + const router = useRouter(); + const toast = useToast(); const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; - updateForm(name, value) - validate() - } + updateForm(name, value); + validate(); + }; const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data) - }) + mutationFn: (data: RegisterProps) => registerUser(data), + }); const handleSubmit = async (e: ChangeEvent) => { - e.preventDefault() + e.preventDefault(); - const response = await mutation.mutateAsync(form) + const response = await mutation.mutateAsync(form); if (response?.register === true) { const urlParams = new URLSearchParams({ activation: 'otp', email: form.email, - redirect: (router.query?.next || '/') as string - }) - router.push(`${router.route}?${urlParams}`) + redirect: (router.query?.next || '/') as string, + }); + router.push(`${router.route}?${urlParams}`); } const toastProps: UseToastOptions = { duration: 5000, - isClosable: true - } + isClosable: true, + position: 'top', + }; switch (response?.reason) { case 'EMAIL_USED': toast({ ...toastProps, title: 'Email sudah digunakan', - status: 'warning' - }) + status: 'warning', + }); break; case 'NOT_ACTIVE': - const activationUrl = `${router.route}?activation=email` + const activationUrl = `${router.route}?activation=email`; toast({ ...toastProps, title: 'Akun belum aktif', - description: <>Akun sudah terdaftar namun belum aktif. Klik untuk aktivasi akun, - status: 'warning' - }) - break + description: ( + <> + Akun sudah terdaftar namun belum aktif.{' '} + + Klik untuk aktivasi akun + + + ), + status: 'warning', + }); + break; } - } - + }; return ( -
- +
- + = ({ type, required, isBisnisRegist=false }) => placeholder='Masukan nama lengkap anda' value={form.name} onChange={handleInputChange} - aria-invalid={!!errors.name} + aria-invalid={chekValid && !!errors.name} /> - {!!errors.name && {errors.name}} + {chekValid && !!errors.name && ( + {errors.name} + )}
- + = ({ type, required, isBisnisRegist=false }) => placeholder='Masukan alamat email anda' value={form.email} onChange={handleInputChange} - autoComplete="username" - aria-invalid={!!errors.email} + autoComplete='username' + aria-invalid={chekValid && !!errors.email} /> - {!!errors.email && {errors.email}} + {chekValid && !!errors.email && ( + {errors.email} + )}
- +
- + = ({ type, required, isBisnisRegist=false }) => placeholder='••••••••••••' value={form.password} onChange={handleInputChange} - autoComplete="current-password" - aria-invalid={!!errors.password} + autoComplete='current-password' + aria-invalid={chekValid && !!errors.password} /> - {!!errors.password && {errors.password}} + {chekValid && !!errors.password && ( + {errors.password} + )}
- + = ({ type, required, isBisnisRegist=false }) => placeholder='08xxxxxxxx' value={form.phone} onChange={handleInputChange} - aria-invalid={!!errors.phone} + aria-invalid={chekValid && !!errors.phone} /> - {!!errors.phone && {errors.phone}} + {chekValid && !!errors.phone && ( + {errors.phone} + )}
- - - -
- ) -} + ); +}; -export default Form \ No newline at end of file +export default Form; -- cgit v1.2.3 From aaf907c834343970e1d30b3ef49c13ed5f9d34ed Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 17 Sep 2024 09:01:04 +0700 Subject: add focus error when button submit click --- src-migrate/modules/register/components/Form.tsx | 43 ++++++++++++++++++++++-- 1 file changed, 41 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 118d9d69..b04e763c 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -1,4 +1,4 @@ -import { ChangeEvent, useMemo } from 'react'; +import { ChangeEvent, useMemo, useEffect, useRef, useState } from 'react'; import { useMutation } from 'react-query'; import { useRegisterStore } from '../stores/useRegisterStore'; import { RegisterProps } from '~/types/auth'; @@ -14,13 +14,15 @@ interface FormProps { required: boolean; isBisnisRegist: boolean; chekValid: boolean; + buttonSubmitClick: boolean; } const Form: React.FC = ({ type, required, isBisnisRegist = false, - chekValid = false, + chekValid, + buttonSubmitClick, }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); @@ -30,6 +32,11 @@ const Form: React.FC = ({ const router = useRouter(); const toast = useToast(); + const emailRef = useRef(null); + const nameRef = useRef(null); + const passwordRef = useRef(null); + const teleponRef = useRef(null); + const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; updateForm(name, value); @@ -40,6 +47,34 @@ const Form: React.FC = ({ mutationFn: (data: RegisterProps) => registerUser(data), }); + useEffect(() => { + const loadIndustries = async () => { + const response = await mutation.mutateAsync(form); + if (!response?.register) { + // Logic to focus on first invalid input + if (errors.email_partner && emailRef.current) { + emailRef.current.focus(); + return; + } + if (errors.name && nameRef.current) { + nameRef.current.focus(); + return; + } + + if (errors.password && passwordRef.current) { + passwordRef.current.focus(); + return; + } + + if (errors.phone && teleponRef.current) { + teleponRef.current.scrollIntoView(); + return; + } + } + }; + loadIndustries(); + }, [buttonSubmitClick]); + const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -101,6 +136,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='Masukan nama lengkap anda' value={form.name} + ref={nameRef} onChange={handleInputChange} aria-invalid={chekValid && !!errors.name} /> @@ -122,6 +158,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='Masukan alamat email anda' value={form.email} + ref={emailRef} onChange={handleInputChange} autoComplete='username' aria-invalid={chekValid && !!errors.email} @@ -143,6 +180,7 @@ const Form: React.FC = ({ className='form-input mt-3' placeholder='••••••••••••' value={form.password} + ref={passwordRef} onChange={handleInputChange} autoComplete='current-password' aria-invalid={chekValid && !!errors.password} @@ -163,6 +201,7 @@ const Form: React.FC = ({ id='phone' name='phone' className='form-input mt-3' + ref={passwordRef} placeholder='08xxxxxxxx' value={form.phone} onChange={handleInputChange} -- cgit v1.2.3 From 810c5da6e26fdfc4f29df75dca13c0fdb787f34a Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 09:29:41 +0700 Subject: update auto scrool to when error --- src-migrate/modules/register/components/Form.tsx | 32 +++++++++++++----------- 1 file changed, 18 insertions(+), 14 deletions(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index b04e763c..55d542f2 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -26,7 +26,7 @@ const Form: React.FC = ({ }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); - + console.log('buttonSubmitClick', buttonSubmitClick); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); @@ -35,7 +35,7 @@ const Form: React.FC = ({ const emailRef = useRef(null); const nameRef = useRef(null); const passwordRef = useRef(null); - const teleponRef = useRef(null); + const phoneRef = useRef(null); const handleInputChange = (event: ChangeEvent) => { const { name, value } = event.target; @@ -51,29 +51,33 @@ const Form: React.FC = ({ const loadIndustries = async () => { const response = await mutation.mutateAsync(form); if (!response?.register) { - // Logic to focus on first invalid input + const options: ScrollIntoViewOptions = { + behavior: 'smooth', + block: 'center', + }; + if (errors.email_partner && emailRef.current) { - emailRef.current.focus(); + emailRef.current.scrollIntoView(options); return; } if (errors.name && nameRef.current) { - nameRef.current.focus(); + nameRef.current.scrollIntoView(options); return; } if (errors.password && passwordRef.current) { - passwordRef.current.focus(); + passwordRef.current.scrollIntoView(options); return; } - if (errors.phone && teleponRef.current) { - teleponRef.current.scrollIntoView(); + if (errors.phone && phoneRef.current) { + phoneRef.current.scrollIntoView(options); return; } } }; loadIndustries(); - }, [buttonSubmitClick]); + }, [buttonSubmitClick, chekValid]); const handleSubmit = async (e: ChangeEvent) => { e.preventDefault(); @@ -133,7 +137,7 @@ const Form: React.FC = ({ type='text' id='name' name='name' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-700' placeholder='Masukan nama lengkap anda' value={form.name} ref={nameRef} @@ -155,7 +159,7 @@ const Form: React.FC = ({ type='text' id='email' name='email' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='Masukan alamat email anda' value={form.email} ref={emailRef} @@ -177,7 +181,7 @@ const Form: React.FC = ({ type='password' name='password' id='password' - className='form-input mt-3' + className='form-input mt-3 transition-all duration-500' placeholder='••••••••••••' value={form.password} ref={passwordRef} @@ -200,10 +204,10 @@ const Form: React.FC = ({ type='tel' id='phone' name='phone' - className='form-input mt-3' - ref={passwordRef} + className='form-input mt-3 transition-all duration-500' placeholder='08xxxxxxxx' value={form.phone} + ref={phoneRef} onChange={handleInputChange} aria-invalid={chekValid && !!errors.phone} /> -- cgit v1.2.3 From 4aface3ba2fa7c74a152ac0fe03b9e32e3ef68e1 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Wed, 18 Sep 2024 10:06:14 +0700 Subject: update bug ga bisa pilih alamat --- src-migrate/modules/register/components/Form.tsx | 1 - 1 file changed, 1 deletion(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index 55d542f2..cd0b4343 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -26,7 +26,6 @@ const Form: React.FC = ({ }) => { const { form, isCheckedTNC, isValidCaptcha, errors, updateForm, validate } = useRegisterStore(); - console.log('buttonSubmitClick', buttonSubmitClick); const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); const router = useRouter(); -- cgit v1.2.3 From c651d654c2c87d26aab184025b7d0e4d8e74e65f Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Thu, 19 Sep 2024 10:11:47 +0700 Subject: fix otp send 3 times --- src-migrate/modules/register/components/Form.tsx | 57 +----------------------- 1 file changed, 2 insertions(+), 55 deletions(-) (limited to 'src-migrate/modules/register/components/Form.tsx') diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx index cd0b4343..38e9c810 100644 --- a/src-migrate/modules/register/components/Form.tsx +++ b/src-migrate/modules/register/components/Form.tsx @@ -41,15 +41,9 @@ const Form: React.FC = ({ updateForm(name, value); validate(); }; - - const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data), - }); - useEffect(() => { const loadIndustries = async () => { - const response = await mutation.mutateAsync(form); - if (!response?.register) { + if (!isFormValid) { const options: ScrollIntoViewOptions = { behavior: 'smooth', block: 'center', @@ -78,55 +72,8 @@ const Form: React.FC = ({ loadIndustries(); }, [buttonSubmitClick, chekValid]); - const handleSubmit = async (e: ChangeEvent) => { - e.preventDefault(); - - const response = await mutation.mutateAsync(form); - - if (response?.register === true) { - const urlParams = new URLSearchParams({ - activation: 'otp', - email: form.email, - redirect: (router.query?.next || '/') as string, - }); - router.push(`${router.route}?${urlParams}`); - } - - const toastProps: UseToastOptions = { - duration: 5000, - isClosable: true, - position: 'top', - }; - - switch (response?.reason) { - case 'EMAIL_USED': - toast({ - ...toastProps, - title: 'Email sudah digunakan', - status: 'warning', - }); - break; - case 'NOT_ACTIVE': - const activationUrl = `${router.route}?activation=email`; - toast({ - ...toastProps, - title: 'Akun belum aktif', - description: ( - <> - Akun sudah terdaftar namun belum aktif.{' '} - - Klik untuk aktivasi akun - - - ), - status: 'warning', - }); - break; - } - }; - return ( -
+