blob: ac194b46789a0dd896d79ef0f6f4ce3dfd1122a2 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
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
|
