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/index.tsx | 126 ++++++++++++++++++++++++--------- 1 file changed, 92 insertions(+), 34 deletions(-) (limited to 'src-migrate/modules/register/index.tsx') diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 00931284..9b3f5509 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,43 +1,101 @@ -import PageContent from "~/modules/page-content" -import Form from "./components/Form" -import Link from "next/link" -import Image from "next/image" -import IndoteknikLogo from "~/images/logo.png" -import AccountActivation from "../account-activation" +import PageContent from "~/modules/page-content"; +import Form from "./components/Form"; +import RegistrasiIndividu from "./components/RegistrasiIndividu"; +import RegistrasiBisnis from "./components/RegistrasiBisnis"; +import FormBisnis from "./components/FormBisnis"; +import Link from "next/link"; +import Image from "next/image"; +import IndoteknikLogo from "~/images/logo.png"; +import AccountActivation from "../account-activation"; +import { useState } from "react"; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { + const [isIndividuClicked, setIsIndividuClicked] = useState(true); + const [isBisnisClicked, setIsBisnisClicked] = useState(false); + + const handleIndividuClick = () => { + setIsIndividuClicked(true); + setIsBisnisClicked(false); + }; + + const handleBisnisClick = () => { + setIsIndividuClicked(false); + setIsBisnisClicked(true); + }; + return (
-
-
- - Logo Indoteknik - - -

- Daftar Akun Indoteknik -

-

- Buat akun sekarang lebih mudah dan terverifikasi -

- -
- -
- Sudah punya akun Indoteknik?{' '} - - Masuk +
+
+
+ + Logo Indoteknik -
-
- Akun anda belum aktif?{' '} - - Aktivasi - +

+ Daftar Akun Indoteknik +

+

+ Buat akun sekarang lebih mudah dan terverifikasi +

+ + +
+
+

Individu

+
+
+

Bisnis

+
+
+
+ {isIndividuClicked && ( +
+ +
+ )} + {isBisnisClicked && ( +
+ +
+ )} +
+
+
+ Sudah punya akun Indoteknik?{" "} + + Masuk + +
+
+ Akun anda belum aktif?{" "} + + Aktivasi + +
+
@@ -48,7 +106,7 @@ const Register = () => {
- ) -} + ); +}; -export default Register \ No newline at end of file +export default Register; -- cgit v1.2.3 From cf0f7a934bcf256d1daeee98e9f66397fb64b1ee Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Tue, 20 Aug 2024 11:47:29 +0700 Subject: update new register --- src-migrate/modules/register/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/register/index.tsx') diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 9b3f5509..e89a6de3 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -45,14 +45,14 @@ const Register = () => {

Daftar Akun Indoteknik

-

+

Buat akun sekarang lebih mudah dan terverifikasi

-
+
Date: Wed, 21 Aug 2024 10:01:27 +0700 Subject: update view new register --- src-migrate/modules/register/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src-migrate/modules/register/index.tsx') diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index e89a6de3..da41a5bb 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -52,7 +52,7 @@ const Register = () => { -
+
Date: Mon, 26 Aug 2024 10:28:15 +0700 Subject: update logic new register validation --- src-migrate/modules/register/index.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/register/index.tsx') diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index da41a5bb..5df2476e 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -8,6 +8,7 @@ import Image from "next/image"; import IndoteknikLogo from "~/images/logo.png"; import AccountActivation from "../account-activation"; import { useState } from "react"; +import { useRegisterStore } from "./stores/useRegisterStore"; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; @@ -15,13 +16,20 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); const [isBisnisClicked, setIsBisnisClicked] = useState(false); + const {resetForm, + updateForm + } = useRegisterStore() const handleIndividuClick = () => { + resetForm(); setIsIndividuClicked(true); setIsBisnisClicked(false); }; - + const handleBisnisClick = () => { + resetForm(); + updateForm("is_terdaftar", 'false') + updateForm("type_acc", 'business') setIsIndividuClicked(false); setIsBisnisClicked(true); }; -- cgit v1.2.3 From 54b6b618effc8416027ed884be1d6d37257c26c4 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 26 Aug 2024 11:59:57 +0700 Subject: update fungsion component --- src-migrate/modules/register/index.tsx | 71 ++++++++++++++++++++++++++++++++-- 1 file changed, 67 insertions(+), 4 deletions(-) (limited to 'src-migrate/modules/register/index.tsx') diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 5df2476e..bb94d170 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -7,8 +7,16 @@ import Link from "next/link"; import Image from "next/image"; import IndoteknikLogo from "~/images/logo.png"; import AccountActivation from "../account-activation"; -import { useState } from "react"; +import { useMemo, useState } from "react"; import { useRegisterStore } from "./stores/useRegisterStore"; +import FormCaptcha from "./components/FormCaptcha"; +import TermCondition from "./components/TermCondition"; +import { Button } from '@chakra-ui/react' +import { useMutation } from "react-query"; +import { UseToastOptions, useToast } from "@chakra-ui/react"; +import { RegisterProps } from "~/types/auth"; +import { registerUser } from "~/services/auth"; +import { useRouter } from "next/router"; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; @@ -16,10 +24,17 @@ const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); const [isBisnisClicked, setIsBisnisClicked] = useState(false); - const {resetForm, + const {form, isCheckedTNC, isValidCaptcha, resetForm,errors, updateForm } = useRegisterStore() + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) + const toast = useToast() + const router = useRouter() + const mutation = useMutation({ + mutationFn: (data: RegisterProps) => registerUser(data) + }) + const handleIndividuClick = () => { resetForm(); setIsIndividuClicked(true); @@ -33,12 +48,46 @@ const Register = () => { setIsIndividuClicked(false); setIsBisnisClicked(true); }; + const handleSubmit = async () => { + 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 + } + 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 (
-
-
+
+
{
)}
+
+ + + +
Sudah punya akun Indoteknik?{" "} -- cgit v1.2.3 From 8a6578b299c6fd26e2ef63b88cf7ebb522a83538 Mon Sep 17 00:00:00 2001 From: it-fixcomart Date: Mon, 26 Aug 2024 15:09:25 +0700 Subject: chapta comment to avoid error --- src-migrate/modules/register/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src-migrate/modules/register/index.tsx') diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index bb94d170..31e09088 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -140,7 +140,7 @@ const Register = () => { )}
- + {/* */} -- 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/index.tsx | 170 ++++++++++++++++++--------------- 1 file changed, 94 insertions(+), 76 deletions(-) (limited to 'src-migrate/modules/register/index.tsx') diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx index 31e09088..d91af9e3 100644 --- a/src-migrate/modules/register/index.tsx +++ b/src-migrate/modules/register/index.tsx @@ -1,118 +1,130 @@ -import PageContent from "~/modules/page-content"; -import Form from "./components/Form"; -import RegistrasiIndividu from "./components/RegistrasiIndividu"; -import RegistrasiBisnis from "./components/RegistrasiBisnis"; -import FormBisnis from "./components/FormBisnis"; -import Link from "next/link"; -import Image from "next/image"; -import IndoteknikLogo from "~/images/logo.png"; -import AccountActivation from "../account-activation"; -import { useMemo, useState } from "react"; -import { useRegisterStore } from "./stores/useRegisterStore"; -import FormCaptcha from "./components/FormCaptcha"; -import TermCondition from "./components/TermCondition"; -import { Button } from '@chakra-ui/react' -import { useMutation } from "react-query"; -import { UseToastOptions, useToast } from "@chakra-ui/react"; -import { RegisterProps } from "~/types/auth"; -import { registerUser } from "~/services/auth"; -import { useRouter } from "next/router"; +import PageContent from '~/modules/page-content'; +import RegistrasiIndividu from './components/RegistrasiIndividu'; +import RegistrasiBisnis from './components/RegistrasiBisnis'; +import Link from 'next/link'; +import Image from 'next/image'; +import IndoteknikLogo from '~/images/logo.png'; +import AccountActivation from '../account-activation'; +import { useMemo, useState } from 'react'; +import { useRegisterStore } from './stores/useRegisterStore'; +import FormCaptcha from './components/FormCaptcha'; +import TermCondition from './components/TermCondition'; +import { Button } from '@chakra-ui/react'; +import { useMutation } from 'react-query'; +import { UseToastOptions, useToast } from '@chakra-ui/react'; +import { RegisterProps } from '~/types/auth'; +import { registerUser } from '~/services/auth'; +import { useRouter } from 'next/router'; const LOGO_WIDTH = 150; const LOGO_HEIGHT = LOGO_WIDTH / 3; const Register = () => { const [isIndividuClicked, setIsIndividuClicked] = useState(true); + const [notValid, setNotValid] = useState(false); const [isBisnisClicked, setIsBisnisClicked] = useState(false); - const {form, isCheckedTNC, isValidCaptcha, resetForm,errors, - updateForm - } = useRegisterStore() + const { form, isCheckedTNC, isValidCaptcha, resetForm, errors, updateForm } = + useRegisterStore(); - const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]) - const toast = useToast() - const router = useRouter() + const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors]); + const toast = useToast(); + const router = useRouter(); const mutation = useMutation({ - mutationFn: (data: RegisterProps) => registerUser(data) - }) + mutationFn: (data: RegisterProps) => registerUser(data), + }); const handleIndividuClick = () => { resetForm(); setIsIndividuClicked(true); setIsBisnisClicked(false); }; - + const handleBisnisClick = () => { resetForm(); - updateForm("is_terdaftar", 'false') - updateForm("type_acc", 'business') + updateForm('is_terdaftar', 'false'); + updateForm('type_acc', 'business'); setIsIndividuClicked(false); setIsBisnisClicked(true); }; const handleSubmit = async () => { - const response = await mutation.mutateAsync(form) + if (!isFormValid) { + setNotValid(true); + return; + } else { + setNotValid(false); + } + 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 ( -
-
-
-
- +
+
+
+
+ Logo Indoteknik -

+

Daftar Akun Indoteknik

-

+

Buat akun sekarang lebih mudah dan terverifikasi

-