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/FormToken.tsx    | 83 ++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src-migrate/modules/account-activation/components/FormToken.tsx

(limited to 'src-migrate/modules/account-activation/components/FormToken.tsx')

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
-- 
cgit v1.2.3


From c82110f7d3a2f85de99045fde7b579e369f15b2c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 28 Oct 2023 09:05:00 +0700
Subject: Update authentication feature

---
 .../account-activation/components/FormToken.tsx    | 24 ++++++++--------------
 1 file changed, 8 insertions(+), 16 deletions(-)

(limited to 'src-migrate/modules/account-activation/components/FormToken.tsx')

diff --git a/src-migrate/modules/account-activation/components/FormToken.tsx b/src-migrate/modules/account-activation/components/FormToken.tsx
index 041fbae8..6af24413 100644
--- a/src-migrate/modules/account-activation/components/FormToken.tsx
+++ b/src-migrate/modules/account-activation/components/FormToken.tsx
@@ -8,22 +8,12 @@ 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(() => {
@@ -34,19 +24,21 @@ const FormToken = () => {
     //eslint-disable-next-line
   }, [query.activation, query.token])
 
+  // TODO: Save user to local storage
+
   return (
     <Modal active={active} mode="desktop">
       <div className="pb-6 flex flex-col items-center gap-y-6">
-        {status === 'loading' && (
+        {mutation.isLoading && (
           <>
             <Spinner size='lg' borderWidth='3px' />
             <div className="text-h-sm">Mohon tunggu sedang memverifikasi akun</div>
           </>
         )}
 
-        {status !== 'loading' && (
+        {!mutation.isLoading && (
           <Alert
-            status={status}
+            status={mutation.data?.activation ? 'success' : 'error'}
             flexDirection="column"
             alignItems="center"
             justifyContent="center"
@@ -56,17 +48,17 @@ const FormToken = () => {
           >
             <AlertIcon boxSize="40px" mr={0} />
             <AlertTitle className="mt-4 mb-1 text-h-sm">
-              Aktivasi akun {status === 'success' ? 'berhasil' : 'gagal'}
+              Aktivasi akun {mutation.data?.activation ? 'berhasil' : 'gagal'}
             </AlertTitle>
             <AlertDescription maxWidth="sm">
-              {status === 'success' && (
+              {mutation.data?.activation && (
                 <>
                   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' && (
+              {!mutation.data?.activation && 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>
-- 
cgit v1.2.3