From 6b221cccd58710682c99db7afbc29322da042880 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 31 Oct 2023 10:44:25 +0700
Subject: - Add redirect after activation - Add register form validation

---
 .../account-activation/components/FormEmail.tsx       |  3 ++-
 .../modules/account-activation/components/FormOTP.tsx | 12 ++----------
 .../account-activation/components/FormToken.tsx       | 19 +++++++------------
 src-migrate/modules/register/components/Form.tsx      | 19 ++++++++++++++++++-
 4 files changed, 29 insertions(+), 24 deletions(-)

(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
index cd917bc9..ec300ba4 100644
--- a/src-migrate/modules/account-activation/components/FormEmail.tsx
+++ b/src-migrate/modules/account-activation/components/FormEmail.tsx
@@ -43,7 +43,8 @@ const FormEmail = () => {
     if (mutation.data?.activation_request === true) {
       const urlParams = new URLSearchParams({
         activation: 'otp',
-        email
+        email,
+        redirect: (router.query?.redirect || '/') as string
       })
       router.push(`${router.route}?${urlParams}`)
     }
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 (
     <Modal active={active} className="w-10/12 md:w-fit px-10" mode="desktop">
@@ -78,10 +79,6 @@ const FormOTP = () => {
               <span className="text-red-700">Mohon maaf kode OTP yand anda masukan salah</span>
             )
           }
-
-          {mutationActivation.data?.activation && (
-            <span className="text-success-700">Akun anda berhasil diaktifkan, selamat berbelanja di Indoteknik.</span>
-          )}
         </div>
 
         {!mutationActivation.data?.activation && (
@@ -108,11 +105,6 @@ const FormOTP = () => {
             </>
           )}
 
-          {mutationActivation.data?.activation && (
-            <Link href='/' className="text-success-700 underline">Kembali ke halaman utama</Link>
-          )}
-
-
         </div>
       </div>
     </Modal>
diff --git a/src-migrate/modules/account-activation/components/FormToken.tsx b/src-migrate/modules/account-activation/components/FormToken.tsx
index a1525fe6..b68b244f 100644
--- a/src-migrate/modules/account-activation/components/FormToken.tsx
+++ b/src-migrate/modules/account-activation/components/FormToken.tsx
@@ -10,7 +10,8 @@ import { activationUserToken } from "~/services/auth"
 import { setAuth } from "~/common/libs/auth"
 
 const FormToken = () => {
-  const { query } = useRouter()
+  const router = useRouter()
+  const { query } = router
   const [active, setActive] = useState<boolean>(false)
 
   const mutation = useMutation({
@@ -28,8 +29,9 @@ const FormToken = () => {
   useEffect(() => {
     if (mutation.data?.user) {
       setAuth(mutation.data.user)
+      router.push((query?.redirect || '/') as string)
     }
-  }, [mutation.data])
+  }, [mutation.data, router, query.redirect])
 
   return (
     <Modal active={active} mode="desktop">
@@ -41,7 +43,7 @@ const FormToken = () => {
           </>
         )}
 
-        {!mutation.isLoading && (
+        {!mutation.isLoading && !mutation.data?.activation && (
           <Alert
             status={mutation.data?.activation ? 'success' : 'error'}
             flexDirection="column"
@@ -53,17 +55,10 @@ const FormToken = () => {
           >
             <AlertIcon boxSize="40px" mr={0} />
             <AlertTitle className="mt-4 mb-1 text-h-sm">
-              Aktivasi akun {mutation.data?.activation ? 'berhasil' : 'gagal'}
+              Aktivasi akun gagal
             </AlertTitle>
             <AlertDescription maxWidth="sm">
-              {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>
-                </>
-              )}
-
-              {!mutation.data?.activation && mutation.data?.reason === 'INVALID_TOKEN' && (
+              {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>
diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 3227a549..5b51d6f4 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -8,6 +8,7 @@ import FormCaptcha from "./FormCaptcha";
 import { useRouter } from "next/router";
 import { UseToastOptions, useToast } from "@chakra-ui/react";
 import Link from "next/link";
+import { registerSchema } from "~/common/validations/auth";
 
 const Form = () => {
   const {
@@ -15,7 +16,9 @@ const Form = () => {
     isValid,
     isCheckedTNC,
     isValidCaptcha,
+    errors,
     updateForm,
+    validate,
   } = useRegisterStore()
   const router = useRouter()
   const toast = useToast()
@@ -23,6 +26,7 @@ const Form = () => {
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
     updateForm(name, value)
+    validate()
   }
 
   const mutation = useMutation({
@@ -37,7 +41,8 @@ const Form = () => {
     if (response?.register === true) {
       const urlParams = new URLSearchParams({
         activation: 'otp',
-        email: form.email
+        email: form.email,
+        redirect: (router.query?.next || '/') as string
       })
       router.push(`${router.route}?${urlParams}`)
     }
@@ -97,7 +102,10 @@ const Form = () => {
           placeholder='Masukan nama lengkap anda'
           value={form.name}
           onChange={handleInputChange}
+          aria-invalid={!!errors.name}
         />
+
+        {!!errors.name && <span className="form-msg-danger">{errors.name}</span>}
       </div>
 
       <div>
@@ -111,7 +119,10 @@ const Form = () => {
           placeholder='08xxxxxxxx'
           value={form.phone}
           onChange={handleInputChange}
+          aria-invalid={!!errors.phone}
         />
+
+        {!!errors.phone && <span className="form-msg-danger">{errors.phone}</span>}
       </div>
 
       <div>
@@ -126,7 +137,10 @@ const Form = () => {
           value={form.email}
           onChange={handleInputChange}
           autoComplete="username"
+          aria-invalid={!!errors.email}
         />
+
+        {!!errors.email && <span className="form-msg-danger">{errors.email}</span>}
       </div>
 
       <div>
@@ -140,7 +154,10 @@ const Form = () => {
           value={form.password}
           onChange={handleInputChange}
           autoComplete="current-password"
+          aria-invalid={!!errors.password}
         />
+
+        {!!errors.password && <span className="form-msg-danger">{errors.password}</span>}
       </div>
 
       <FormCaptcha />
-- 
cgit v1.2.3