- Add redirect after activation

- Add register form validation

1 files changed, 18 insertions, 1 deletions

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 />