From cf6da809621b4ebe8c9acedb035b689e7e1b60b1 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Wed, 25 Oct 2023 17:27:32 +0700 Subject: Update register page --- .../account-activation/components/FormOTP.tsx | 23 ++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 src-migrate/modules/account-activation/components/FormOTP.tsx (limited to 'src-migrate/modules/account-activation/components/FormOTP.tsx') diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx new file mode 100644 index 00000000..24e9e7f6 --- /dev/null +++ b/src-migrate/modules/account-activation/components/FormOTP.tsx @@ -0,0 +1,23 @@ +import { HStack, PinInput, PinInputField } from "@chakra-ui/react" +import Modal from '~/common/components/elements/Modal' + +const FormOTP = () => { + return ( + +
+
Masukan Kode OTP
+ + + + + + + + +
Kode OTP dikirimkan ke email anda
+
+ + ) +} + +export default FormOTP \ No newline at end of file -- cgit v1.2.3 From c82110f7d3a2f85de99045fde7b579e369f15b2c Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 28 Oct 2023 09:05:00 +0700 Subject: Update authentication feature --- .../account-activation/components/FormOTP.tsx | 112 ++++++++++++++++++++- 1 file changed, 108 insertions(+), 4 deletions(-) (limited to 'src-migrate/modules/account-activation/components/FormOTP.tsx') diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx index 24e9e7f6..e38fa8fe 100644 --- a/src-migrate/modules/account-activation/components/FormOTP.tsx +++ b/src-migrate/modules/account-activation/components/FormOTP.tsx @@ -1,23 +1,127 @@ -import { HStack, PinInput, PinInputField } from "@chakra-ui/react" +import { HStack, PinInput, PinInputField, Spinner } from "@chakra-ui/react" +import Link from "next/link" +import { useRouter } from "next/router" +import { useEffect, useState } from "react" +import { useMutation } from "react-query" +import { useCountdown } from "usehooks-ts" import Modal from '~/common/components/elements/Modal' +import { ActivationOtpProps, ActivationReqProps } from "~/common/types/auth" +import { activationReq, activationUserOTP } from "~/services/auth" const FormOTP = () => { + const router = useRouter() + const { query } = router + const [active, setActive] = useState(false) + const [email, setEmail] = useState('') + const [otp, setOtp] = useState('') + const [count, { startCountdown, resetCountdown }] = useCountdown({ + countStart: 60 * 3, + intervalMs: 1000, + }) + + useEffect(() => { + setEmail((query?.email || '') as string) + }, [query?.email]) + + useEffect(() => { + setActive(query?.activation === 'otp') + }, [query.activation]) + + useEffect(() => { + !!active && startCountdown() + }, [active, startCountdown]) + + const mutationActivationReq = useMutation({ + mutationFn: (data: ActivationReqProps) => activationReq(data), + onSuccess: () => { + resetCountdown() + startCountdown() + } + }) + + const mutationActivation = useMutation({ + mutationFn: (data: ActivationOtpProps) => activationUserOTP(data) + }) + + useEffect(() => { + if (otp.length === 4 && !mutationActivation.data?.activation) { + mutationActivation.mutate({ email, otp }) + } + //eslint-disable-next-line + }, [otp]) + + // TODO: Save user to local storage + return ( - +
Masukan Kode OTP
- + setOtp(val)}> -
Kode OTP dikirimkan ke email anda
+
+ {mutationActivation.isLoading && } + + {!mutationActivation.isLoading && + mutationActivation.data?.reason === 'INVALID_OTP' && + ( + Mohon maaf kode OTP yand anda masukan salah + ) + } + + {mutationActivation.data?.activation && ( + Akun anda berhasil diaktifkan, selamat berbelanja di Indoteknik. + )} +
+ + {!mutationActivation.data?.activation && ( +
+ Kode verifikasi telah dikirimkan ke alamat email {email}. Silakan periksa kotak masuk atau folder spam. +
+ )} + +
+ {!mutationActivation.data?.activation && ( + <> + {count > 0 && timeFormat(count)} + + {!mutationActivation.data?.activation && count == 0 && ( + + )} + + )} + + {mutationActivation.data?.activation && ( + Kembali ke halaman utama + )} + + +
) } +const timeFormat = (time: number): string => { + const minute = Math.floor(time / 60); + const second = time % 60; + + const minuteFormat = minute < 10 ? `0${minute}` : `${minute}` + const secondFormat = second < 10 ? `0${second}` : `${second}` + + return `${minuteFormat}:${secondFormat}` +} + export default FormOTP \ No newline at end of file -- cgit v1.2.3 From 1602cff06e13bb03e5c48e8369abf5c803426e4d Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Mon, 30 Oct 2023 09:53:40 +0700 Subject: Add set auth on authenticated --- src-migrate/modules/account-activation/components/FormOTP.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'src-migrate/modules/account-activation/components/FormOTP.tsx') diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx index e38fa8fe..a4775d61 100644 --- a/src-migrate/modules/account-activation/components/FormOTP.tsx +++ b/src-migrate/modules/account-activation/components/FormOTP.tsx @@ -5,6 +5,7 @@ import { useEffect, useState } from "react" import { useMutation } from "react-query" import { useCountdown } from "usehooks-ts" import Modal from '~/common/components/elements/Modal' +import { setAuth } from "~/common/libs/auth" import { ActivationOtpProps, ActivationReqProps } from "~/common/types/auth" import { activationReq, activationUserOTP } from "~/services/auth" @@ -50,7 +51,11 @@ const FormOTP = () => { //eslint-disable-next-line }, [otp]) - // TODO: Save user to local storage + useEffect(() => { + if (mutationActivation.data?.user) { + setAuth(mutationActivation.data.user) + } + }, [mutationActivation.data]) return ( -- cgit v1.2.3 From 6b221cccd58710682c99db7afbc29322da042880 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 31 Oct 2023 10:44:25 +0700 Subject: - Add redirect after activation - Add register form validation --- .../modules/account-activation/components/FormOTP.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) (limited to 'src-migrate/modules/account-activation/components/FormOTP.tsx') diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx index a4775d61..47c69329 100644 --- a/src-migrate/modules/account-activation/components/FormOTP.tsx +++ b/src-migrate/modules/account-activation/components/FormOTP.tsx @@ -54,8 +54,9 @@ const FormOTP = () => { useEffect(() => { if (mutationActivation.data?.user) { setAuth(mutationActivation.data.user) + router.push((query?.redirect || '/') as string) } - }, [mutationActivation.data]) + }, [mutationActivation.data, router, query.redirect]) return ( @@ -78,10 +79,6 @@ const FormOTP = () => { Mohon maaf kode OTP yand anda masukan salah ) } - - {mutationActivation.data?.activation && ( - Akun anda berhasil diaktifkan, selamat berbelanja di Indoteknik. - )} {!mutationActivation.data?.activation && ( @@ -108,11 +105,6 @@ const FormOTP = () => { )} - {mutationActivation.data?.activation && ( - Kembali ke halaman utama - )} - - -- cgit v1.2.3 From 5a9210e560ca47d8f4d8c43b06fc93d1d064a6f6 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 10 Nov 2023 16:23:33 +0700 Subject: Add close on modal otp activation, change validation register schema, fix term and condition checkbox --- src-migrate/modules/account-activation/components/FormOTP.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'src-migrate/modules/account-activation/components/FormOTP.tsx') diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx index 47c69329..9bc0fb23 100644 --- a/src-migrate/modules/account-activation/components/FormOTP.tsx +++ b/src-migrate/modules/account-activation/components/FormOTP.tsx @@ -1,5 +1,4 @@ import { HStack, PinInput, PinInputField, Spinner } from "@chakra-ui/react" -import Link from "next/link" import { useRouter } from "next/router" import { useEffect, useState } from "react" import { useMutation } from "react-query" @@ -16,7 +15,7 @@ const FormOTP = () => { const [email, setEmail] = useState('') const [otp, setOtp] = useState('') const [count, { startCountdown, resetCountdown }] = useCountdown({ - countStart: 60 * 3, + countStart: 60 * 1, intervalMs: 1000, }) @@ -59,7 +58,7 @@ const FormOTP = () => { }, [mutationActivation.data, router, query.redirect]) return ( - + setActive(false)} mode="desktop">
Masukan Kode OTP
-- cgit v1.2.3 From 6a6ce21e5a552b0dc6cd541710a87fd0a0fd9d20 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Fri, 17 Nov 2023 15:23:22 +0700 Subject: Update button resend otp on OTP Form --- .../account-activation/components/FormOTP.tsx | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-) (limited to 'src-migrate/modules/account-activation/components/FormOTP.tsx') diff --git a/src-migrate/modules/account-activation/components/FormOTP.tsx b/src-migrate/modules/account-activation/components/FormOTP.tsx index 9bc0fb23..6815a088 100644 --- a/src-migrate/modules/account-activation/components/FormOTP.tsx +++ b/src-migrate/modules/account-activation/components/FormOTP.tsx @@ -1,4 +1,4 @@ -import { HStack, PinInput, PinInputField, Spinner } from "@chakra-ui/react" +import { Button, HStack, PinInput, PinInputField, Spinner } from "@chakra-ui/react" import { useRouter } from "next/router" import { useEffect, useState } from "react" import { useMutation } from "react-query" @@ -86,20 +86,22 @@ const FormOTP = () => {
)} -
+
{!mutationActivation.data?.activation && ( <> {count > 0 && timeFormat(count)} {!mutationActivation.data?.activation && count == 0 && ( - + <> +
Belum menerima kode apapun?
+ + + )} )} -- cgit v1.2.3