- Add redirect after activation

- Add register form validation

7 files changed, 72 insertions, 32 deletions

diff --git a/src-migrate/common/stores/useRegisterStore.ts b/src-migrate/common/stores/useRegisterStore.ts
index 725bbfda..d6c7db2a 100644
--- a/src-migrate/common/stores/useRegisterStore.ts
+++ b/src-migrate/common/stores/useRegisterStore.ts
@@ -1,8 +1,13 @@
 import { create } from 'zustand';
 import { RegisterProps } from '../types/auth';
+import { registerSchema } from '../validations/auth';
+import { ValidationError } from 'yup';
 
 type State = {
   form: RegisterProps;
+  errors: {
+    [key in keyof RegisterProps]?: string;
+  };
   isValid: boolean;
   isCheckedTNC: boolean;
   isOpenTNC: boolean;
@@ -15,9 +20,10 @@ type Action = {
   toggleCheckTNC: () => void;
   openTNC: () => void;
   closeTNC: () => void;
+  validate: () => void;
 };
 
-export const useRegisterStore = create<State & Action>((set) => ({
+export const useRegisterStore = create<State & Action>((set, get) => ({
   form: {
     company: '',
     name: '',
@@ -25,6 +31,26 @@ export const useRegisterStore = create<State & Action>((set) => ({
     password: '',
     phone: '',
   },
+  errors: {},
+  validate: () =>
+    registerSchema
+      .validate(get().form, { abortEarly: false })
+      .then(() => {
+        set({
+          errors: {},
+          isValid: false,
+        });
+      })
+      .catch((err: ValidationError) => {
+        const validationErrors: State['errors'] = {};
+        err.inner.forEach(
+          (e) => (validationErrors[e.path as keyof RegisterProps] = e.message)
+        );
+        set({
+          errors: validationErrors,
+          isValid: false,
+        });
+      }),
   isValid: false,
   isCheckedTNC: false,
   isOpenTNC: false,
diff --git a/src-migrate/common/types/auth.ts b/src-migrate/common/types/auth.ts
index ca7b562a..5909584a 100644
--- a/src-migrate/common/types/auth.ts
+++ b/src-migrate/common/types/auth.ts
@@ -1,4 +1,6 @@
+import { registerSchema } from '../validations/auth';
 import { OdooApiProps } from './odoo';
+import * as yup from 'yup';
 
 export type AuthProps = {
   id: number;
@@ -17,13 +19,7 @@ export type AuthProps = {
 
 export type AuthApiProps = OdooApiProps & { result: AuthProps };
 
-export type RegisterProps = {
-  name: string;
-  email: string;
-  password: string;
-  company: string;
-  phone: string;
-};
+export type RegisterProps = yup.InferType<typeof registerSchema>;
 
 export type RegisterResApiProps = {
   register: boolean;
diff --git a/src-migrate/common/validations/auth.ts b/src-migrate/common/validations/auth.ts
new file mode 100644
index 00000000..94b40849
--- /dev/null
+++ b/src-migrate/common/validations/auth.ts
@@ -0,0 +1,13 @@
+import { object, string } from 'yup';
+
+export const registerSchema = object({
+  name: string().required('Nama harus diisi'),
+  email: string()
+    .email('Email harus menggunakan format example@mail.com')
+    .required('Email harus diisi'),
+  password: string()
+    .min(6, 'Password minimal 6 karakter')
+    .required('Password harus diisi'),
+  company: string().optional(),
+  phone: string().required('Nomor telepon harus diisi'),
+});
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 />