diff options
Diffstat (limited to 'src-migrate/modules/account-activation')
4 files changed, 125 insertions, 0 deletions
diff --git a/src-migrate/modules/account-activation/components/FormEmail.tsx b/src-migrate/modules/account-activation/components/FormEmail.tsx new file mode 100644 index 00000000..f16ab93f --- /dev/null +++ b/src-migrate/modules/account-activation/components/FormEmail.tsx @@ -0,0 +1,7 @@ +const FormEmail = () => { + return ( + <div>FormEmail</div> + ) +} + +export default FormEmail
\ No newline at end of file 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 ( + <Modal active={false} className="w-10/12 md:w-fit px-10" mode="desktop"> + <div className="pb-8 flex flex-col items-center"> + <div className="text-title-sm font-medium mb-4">Masukan Kode OTP</div> + <HStack> + <PinInput size='lg' otp> + <PinInputField autoFocus /> + <PinInputField /> + <PinInputField /> + <PinInputField /> + </PinInput> + </HStack> + <div className="mt-4">Kode OTP dikirimkan ke email anda</div> + </div> + </Modal> + ) +} + +export default FormOTP
\ No newline at end of file diff --git a/src-migrate/modules/account-activation/components/FormToken.tsx b/src-migrate/modules/account-activation/components/FormToken.tsx new file mode 100644 index 00000000..041fbae8 --- /dev/null +++ b/src-migrate/modules/account-activation/components/FormToken.tsx @@ -0,0 +1,83 @@ +import { Alert, AlertDescription, AlertIcon, AlertTitle, Spinner } from "@chakra-ui/react" +import { useRouter } from "next/router" +import { useEffect, useState } from "react" +import Link from "next/link" +import { useMutation } from "react-query" + +import Modal from "~/common/components/elements/Modal" +import { ActivationTokenProps } from "~/common/types/auth" +import { activationUserToken } from "~/services/auth" + +type StatusProps = "success" | "error" | "loading"; + +const FormToken = () => { + const { query } = useRouter() + const [status, setStatus] = useState<StatusProps>("loading") + const [active, setActive] = useState<boolean>(false) + + const mutation = useMutation({ + mutationFn: (data: ActivationTokenProps) => activationUserToken(data), + onSuccess: (data) => { + if (data.activation === true) { + setStatus("success") + } else { + setStatus("error") + } + } + }) + + useEffect(() => { + if (query?.activation === 'token' && typeof query?.token === 'string') { + mutation.mutate({ token: query.token }) + setActive(true) + } + //eslint-disable-next-line + }, [query.activation, query.token]) + + return ( + <Modal active={active} mode="desktop"> + <div className="pb-6 flex flex-col items-center gap-y-6"> + {status === 'loading' && ( + <> + <Spinner size='lg' borderWidth='3px' /> + <div className="text-h-sm">Mohon tunggu sedang memverifikasi akun</div> + </> + )} + + {status !== 'loading' && ( + <Alert + status={status} + flexDirection="column" + alignItems="center" + justifyContent="center" + textAlign="center" + height="200px" + bg="transparent" + > + <AlertIcon boxSize="40px" mr={0} /> + <AlertTitle className="mt-4 mb-1 text-h-sm"> + Aktivasi akun {status === 'success' ? 'berhasil' : 'gagal'} + </AlertTitle> + <AlertDescription maxWidth="sm"> + {status === 'success' && ( + <> + Akun anda berhasil diaktifkan, selamat berbelanja di Indoteknik. + <Link href='/' className="block mt-8 text-success-700 underline">Kembali ke halaman utama</Link> + </> + )} + + {status === 'error' && mutation.data?.reason === 'INVALID_TOKEN' && ( + <> + Token sudah kadaluwarsa, silahkan coba kembali. + <Link href='/register?activation=email' className="block mt-8 text-red-700 underline">Aktivasi Akun</Link> + </> + )} + </AlertDescription> + </Alert> + )} + </div> + </Modal> + ) +} + +export default FormToken
\ No newline at end of file diff --git a/src-migrate/modules/account-activation/index.tsx b/src-migrate/modules/account-activation/index.tsx new file mode 100644 index 00000000..edcc6652 --- /dev/null +++ b/src-migrate/modules/account-activation/index.tsx @@ -0,0 +1,12 @@ +import { useRouter } from "next/router" +import FormToken from "./components/FormToken" + +const AccountActivation = () => { + return ( + <> + <FormToken /> + </> + ) +} + +export default AccountActivation
\ No newline at end of file |