From 90710579ba1c12060877f6ec2d26103f9c31058d Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Mon, 23 Oct 2023 17:11:33 +0700
Subject: Refactor and migrate register page

---
 src-migrate/modules/register/components/Form.tsx | 117 +++++++++++++++++++++++
 1 file changed, 117 insertions(+)
 create mode 100644 src-migrate/modules/register/components/Form.tsx

(limited to 'src-migrate/modules/register/components/Form.tsx')

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
new file mode 100644
index 00000000..ac194b46
--- /dev/null
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -0,0 +1,117 @@
+import { ChangeEvent } from "react";
+import { useMutation } from "react-query";
+import { useRegisterStore } from "~/common/stores/useRegisterStore";
+import { RegisterProps } from "~/common/types/auth";
+import { registerUser } from "~/services/auth";
+
+const Form = () => {
+  const { form, isValid, isCheckedTNC, updateForm, toggleCheckTNC, openTNC } = useRegisterStore()
+
+  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = event.target;
+    updateForm(name, value)
+  }
+
+  const mutation = useMutation({
+    mutationFn: (data: RegisterProps) => registerUser(data)
+  })
+
+  const handleSubmit = async (e: ChangeEvent<HTMLFormElement>) => {
+    e.preventDefault()
+
+    const response = await mutation.mutateAsync(form)
+    console.log(response);
+
+  }
+
+  return (
+    <form className="mt-6 grid grid-cols-1 gap-y-4" onSubmit={handleSubmit}>
+      <div>
+        <label htmlFor="company">
+          Nama Perusahaan <span className='text-gray_r-11'>(opsional)</span>
+        </label>
+
+        <input
+          type="text"
+          name="company"
+          id="company"
+          className="form-input mt-3"
+          placeholder="cth: INDOTEKNIK DOTCOM GEMILANG"
+          autoCapitalize="true"
+          value={form.company}
+          onChange={handleInputChange}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='name'>Nama Lengkap</label>
+
+        <input
+          type='text'
+          id='name'
+          name='name'
+          className='form-input mt-3'
+          placeholder='Masukan nama lengkap anda'
+          value={form.name}
+          onChange={handleInputChange}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='email'>Alamat Email</label>
+
+        <input
+          type='text'
+          id='email'
+          name='email'
+          className='form-input mt-3'
+          placeholder='Masukan alamat email anda'
+          value={form.email}
+          onChange={handleInputChange}
+        />
+      </div>
+
+      <div>
+        <label htmlFor='password'>Kata Sandi</label>
+        <input
+          type='password'
+          name='password'
+          id='password'
+          className='form-input mt-3'
+          placeholder='••••••••••••'
+          value={form.password}
+          onChange={handleInputChange}
+        />
+      </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>
+
+      <button
+        type="submit"
+        className="btn-yellow w-full mt-2"
+        disabled={!isValid || !isCheckedTNC || mutation.isLoading}
+      >
+        {mutation.isLoading ? 'Loading...' : 'Daftar'}
+      </button>
+    </form>
+  )
+}
+
+export default Form
\ No newline at end of file
-- 
cgit v1.2.3


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

---
 src-migrate/modules/register/components/Form.tsx | 53 ++++++++++++++----------
 1 file changed, 32 insertions(+), 21 deletions(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

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

---
 src-migrate/modules/register/components/Form.tsx | 35 +++++++++++++++++++++++-
 1 file changed, 34 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index fc1567ab..3227a549 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,10 +1,13 @@
-import { ChangeEvent } from "react";
+import { ChangeEvent, useEffect } from "react";
 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";
+import { useRouter } from "next/router";
+import { UseToastOptions, useToast } from "@chakra-ui/react";
+import Link from "next/link";
 
 const Form = () => {
   const {
@@ -14,6 +17,8 @@ const Form = () => {
     isValidCaptcha,
     updateForm,
   } = useRegisterStore()
+  const router = useRouter()
+  const toast = useToast()
 
   const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = event.target;
@@ -30,7 +35,35 @@ const Form = () => {
     const response = await mutation.mutateAsync(form)
 
     if (response?.register === true) {
+      const urlParams = new URLSearchParams({
+        activation: 'otp',
+        email: form.email
+      })
+      router.push(`${router.route}?${urlParams}`)
+    }
+
+    const toastProps: UseToastOptions = {
+      duration: 5000,
+      isClosable: true
+    }
 
+    switch (response?.reason) {
+      case 'EMAIL_USED':
+        toast({
+          ...toastProps,
+          title: 'Email sudah digunakan',
+          status: 'warning'
+        })
+        break;
+      case 'NOT_ACTIVE':
+        const activationUrl = `${router.route}?activation=email`
+        toast({
+          ...toastProps,
+          title: 'Akun belum aktif',
+          description: <>Akun sudah terdaftar namun belum aktif. <Link href={activationUrl} className="underline">Klik untuk aktivasi akun</Link></>,
+          status: 'warning'
+        })
+        break
     }
   }
 
-- 
cgit v1.2.3


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

---
 src-migrate/modules/register/components/Form.tsx | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

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


From 4bed066c03dc55a8f811ff2e23e019d8adc64495 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 10 Nov 2023 14:47:52 +0700
Subject: Refactor register form

---
 src-migrate/modules/register/components/Form.tsx | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index 5b51d6f4..ddc3397f 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect } from "react";
+import { ChangeEvent, useEffect, useMemo } from "react";
 import { useMutation } from "react-query";
 import { useRegisterStore } from "~/common/stores/useRegisterStore";
 import { RegisterProps } from "~/common/types/auth";
@@ -13,13 +13,17 @@ import { registerSchema } from "~/common/validations/auth";
 const Form = () => {
   const {
     form,
-    isValid,
     isCheckedTNC,
     isValidCaptcha,
     errors,
     updateForm,
     validate,
   } = useRegisterStore()
+
+  const isFormValid = useMemo(() => {
+    return Object.keys(errors).length === 0
+  }, [errors])
+
   const router = useRouter()
   const toast = useToast()
 
@@ -167,7 +171,7 @@ const Form = () => {
       <button
         type="submit"
         className="btn-yellow w-full mt-2"
-        disabled={!isValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
+        disabled={!isFormValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
       >
         {mutation.isLoading ? 'Loading...' : 'Daftar'}
       </button>
-- 
cgit v1.2.3


From 5a9210e560ca47d8f4d8c43b06fc93d1d064a6f6 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 10 Nov 2023 16:23:33 +0700
Subject: Add close on modal otp activation, change validation register schema,
 fix term and condition checkbox

---
 src-migrate/modules/register/components/Form.tsx | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

(limited to 'src-migrate/modules/register/components/Form.tsx')

diff --git a/src-migrate/modules/register/components/Form.tsx b/src-migrate/modules/register/components/Form.tsx
index ddc3397f..dc9107b2 100644
--- a/src-migrate/modules/register/components/Form.tsx
+++ b/src-migrate/modules/register/components/Form.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent, useEffect, useMemo } from "react";
+import { ChangeEvent, useMemo } from "react";
 import { useMutation } from "react-query";
 import { useRegisterStore } from "~/common/stores/useRegisterStore";
 import { RegisterProps } from "~/common/types/auth";
@@ -8,7 +8,6 @@ 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 {
@@ -20,9 +19,7 @@ const Form = () => {
     validate,
   } = useRegisterStore()
 
-  const isFormValid = useMemo(() => {
-    return Object.keys(errors).length === 0
-  }, [errors])
+  const isFormValid = useMemo(() => Object.keys(errors).length === 0, [errors])
 
   const router = useRouter()
   const toast = useToast()
-- 
cgit v1.2.3