From cf6da809621b4ebe8c9acedb035b689e7e1b60b1 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 25 Oct 2023 17:27:32 +0700
Subject: Update register page

---
 .../account-activation/components/FormEmail.tsx    |  7 ++
 .../account-activation/components/FormOTP.tsx      | 23 ++++++
 .../account-activation/components/FormToken.tsx    | 83 ++++++++++++++++++++++
 src-migrate/modules/account-activation/index.tsx   | 12 ++++
 src-migrate/modules/register/components/Form.tsx   | 53 ++++++++------
 .../modules/register/components/FormCaptcha.tsx    | 14 ++++
 .../modules/register/components/Register.tsx       | 39 ----------
 .../modules/register/components/TermCondition.tsx  | 26 +++++--
 src-migrate/modules/register/index.tsx             | 46 +++++++++++-
 9 files changed, 238 insertions(+), 65 deletions(-)
 create mode 100644 src-migrate/modules/account-activation/components/FormEmail.tsx
 create mode 100644 src-migrate/modules/account-activation/components/FormOTP.tsx
 create mode 100644 src-migrate/modules/account-activation/components/FormToken.tsx
 create mode 100644 src-migrate/modules/account-activation/index.tsx
 create mode 100644 src-migrate/modules/register/components/FormCaptcha.tsx
 delete mode 100644 src-migrate/modules/register/components/Register.tsx

(limited to 'src-migrate/modules')

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
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index ac194b46..fc1567ab 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -3,9 +3,17 @@ import { useMutation } from "react-query";
 import { useRegisterStore } from "~/common/stores/useRegisterStore";
 import { RegisterProps } from "~/common/types/auth";
 import { registerUser } from "~/services/auth";
+import TermCondition from "./TermCondition";
+import FormCaptcha from "./FormCaptcha";
 
 const Form = () => {
-  const { form, isValid, isCheckedTNC, updateForm, toggleCheckTNC, openTNC } = useRegisterStore()
+  const {
+    form,
+    isValid,
+    isCheckedTNC,
+    isValidCaptcha,
+    updateForm,
+  } = useRegisterStore()
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -20,8 +28,10 @@ const Form = () => {
     e.preventDefault()
 
     const response = await mutation.mutateAsync(form)
-    console.log(response);
 
+    if (response?.register === true) {
+
+    }
   }
 
   return (
@@ -57,6 +67,20 @@ const Form = () => {
         />
       </div>
 
+      <div>
+        <label htmlFor='phone'>No Handphone</label>
+
+        <input
+          type='tel'
+          id='phone'
+          name='phone'
+          className='form-input mt-3'
+          placeholder='08xxxxxxxx'
+          value={form.phone}
+          onChange={handleInputChange}
+        />
+      </div>
+
       <div>
         <label htmlFor='email'>Alamat Email</label>
 
@@ -68,6 +92,7 @@ const Form = () => {
           placeholder='Masukan alamat email anda'
           value={form.email}
           onChange={handleInputChange}
+          autoComplete="username"
         />
       </div>
 
@@ -81,32 +106,18 @@ const Form = () => {
           placeholder='••••••••••••'
           value={form.password}
           onChange={handleInputChange}
+          autoComplete="current-password"
         />
       </div>
 
-      <div className="mt-4">
-        <input
-          type="checkbox"
-          name="tnc"
-          id="tnc"
-          checked={isCheckedTNC}
-          onClick={toggleCheckTNC}
-        />
-        <label htmlFor="tnc" className="ml-2 cursor-pointer">Dengan ini saya menyetujui</label>
-        {' '}
-        <span
-          className="font-medium text-danger-500 cursor-pointer"
-          onClick={openTNC}
-        >
-          syarat dan ketentuan
-        </span>
-        <label htmlFor="tnc" className="ml-2 cursor-pointer">yang berlaku</label>
-      </div>
+      <FormCaptcha />
+
+      <TermCondition />
 
       <button
         type="submit"
         className="btn-yellow w-full mt-2"
-        disabled={!isValid || !isCheckedTNC || mutation.isLoading}
+        disabled={!isValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
       >
         {mutation.isLoading ? 'Loading...' : 'Daftar'}
       </button>
diff --git a/src-migrate/modules/register/components/FormCaptcha.tsx b/src-migrate/modules/register/components/FormCaptcha.tsx
new file mode 100644
index 00000000..967be017
--- /dev/null
+++ b/src-migrate/modules/register/components/FormCaptcha.tsx
@@ -0,0 +1,14 @@
+import ReCaptcha from '~/common/components/elements/ReCaptcha'
+import { useRegisterStore } from '~/common/stores/useRegisterStore'
+
+const FormCaptcha = () => {
+  const { updateValidCaptcha } = useRegisterStore()
+
+  const handleCaptchaChange = (value: string | null) => {
+    updateValidCaptcha(value !== null)
+  }
+
+  return <ReCaptcha onChange={handleCaptchaChange} />
+}
+
+export default FormCaptcha
\ No newline at end of file
diff --git a/src-migrate/modules/register/components/Register.tsx b/src-migrate/modules/register/components/Register.tsx
deleted file mode 100644
index e3e29b9f..00000000
--- a/src-migrate/modules/register/components/Register.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import PageContent from "~/modules/page-content"
-import Form from "./Form"
-import Link from "next/link"
-import Modal from "~/common/components/elements/Modal"
-import TermCondition from "./TermCondition"
-
-const Register = () => {
-  return (
-    <div className="container">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-16">
-        <section>
-          <h1 className="text-2xl font-semibold">
-            Daftar Akun Indoteknik
-          </h1>
-          <h2 className="text-gray_r-11 mt-1 mb-4">
-            Buat akun sekarang lebih mudah dan terverifikasi
-          </h2>
-
-          <Form />
-
-          <div className='text-gray_r-11 mt-10'>
-            Sudah punya akun Indoteknik?{' '}
-            <Link href='/login' className='inline font-medium text-danger-500'>
-              Masuk
-            </Link>
-          </div>
-        </section>
-
-        <section className="my-10 md:my-0">
-          <PageContent path="/register" />
-        </section>
-      </div>
-
-      <TermCondition />
-    </div>
-  )
-}
-
-export default Register
\ No newline at end of file
diff --git a/src-migrate/modules/register/components/TermCondition.tsx b/src-migrate/modules/register/components/TermCondition.tsx
index 304ffd69..aaba6604 100644
--- a/src-migrate/modules/register/components/TermCondition.tsx
+++ b/src-migrate/modules/register/components/TermCondition.tsx
@@ -1,15 +1,33 @@
+import { Checkbox } from '@chakra-ui/react'
 import React from 'react'
 import Modal from '~/common/components/elements/Modal'
 import { useRegisterStore } from '~/common/stores/useRegisterStore'
 import PageContent from '~/modules/page-content'
 
 const TermCondition = () => {
-  const { isOpenTNC, closeTNC } = useRegisterStore()
+  const { isOpenTNC, closeTNC, isCheckedTNC, toggleCheckTNC, openTNC } = useRegisterStore()
 
   return (
-    <Modal active={isOpenTNC} close={closeTNC} >
-      <PageContent path='/register#tnd' />
-    </Modal>
+    <>
+      <div className="mt-4 flex items-center gap-x-2">
+        <Checkbox id='tnc' name='tnc' checked={isCheckedTNC} onChange={toggleCheckTNC} />
+        <div>
+          <label htmlFor="tnc" className="cursor-pointer">Dengan ini saya menyetujui</label>
+          {' '}
+          <span
+            className="font-medium text-danger-500 cursor-pointer"
+            onClick={openTNC}
+          >
+            syarat dan ketentuan
+          </span>
+          <label htmlFor="tnc" className="ml-2 cursor-pointer">yang berlaku</label>
+        </div>
+      </div>
+
+      <Modal active={isOpenTNC} close={closeTNC} >
+        <PageContent path='/register#tnd' />
+      </Modal>
+    </>
   )
 }
 
diff --git a/src-migrate/modules/register/index.tsx b/src-migrate/modules/register/index.tsx
index ba5efa3a..6325ee09 100644
--- a/src-migrate/modules/register/index.tsx
+++ b/src-migrate/modules/register/index.tsx
@@ -1,3 +1,47 @@
-import Register from "./components/Register";
+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"
+
+const LOGO_WIDTH = 150;
+const LOGO_HEIGHT = LOGO_WIDTH / 3;
+
+const Register = () => {
+  return (
+    <div className="container">
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-10 pt-10 px-2 md:pt-16">
+        <section>
+          <Link href='/' className="block md:hidden">
+            <Image src={IndoteknikLogo} alt='Logo Indoteknik' width={LOGO_WIDTH} height={LOGO_HEIGHT} className="mx-auto mb-4 w-auto h-auto" priority />
+          </Link>
+
+          <h1 className="text-2xl font-semibold text-center md:text-left">
+            Daftar Akun Indoteknik
+          </h1>
+          <h2 className="text-gray_r-11 mt-1 mb-10 text-center md:text-left">
+            Buat akun sekarang lebih mudah dan terverifikasi
+          </h2>
+
+          <Form />
+
+          <div className='text-gray_r-11 mt-4 text-center md:text-left'>
+            Sudah punya akun Indoteknik?{' '}
+            <Link href='/login' className='inline font-medium text-danger-500'>
+              Masuk
+            </Link>
+          </div>
+        </section>
+
+        <section className="my-10 md:my-0">
+          <PageContent path="/register" />
+        </section>
+      </div>
+
+      <AccountActivation />
+    </div>
+  )
+}
 
 export default Register
\ No newline at end of file
-- 
cgit v1.2.3