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