blob: fc1567abe708448fc736aac4b941fdd66359aeb1 (
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
118
119
120
121
122
123
124
125
126
127
128
|
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";
import TermCondition from "./TermCondition";
import FormCaptcha from "./FormCaptcha";
const Form = () => {
const {
form,
isValid,
isCheckedTNC,
isValidCaptcha,
updateForm,
} = 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)
if (response?.register === true) {
}
}
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='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>
<input
type='text'
id='email'
name='email'
className='form-input mt-3'
placeholder='Masukan alamat email anda'
value={form.email}
onChange={handleInputChange}
autoComplete="username"
/>
</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}
autoComplete="current-password"
/>
</div>
<FormCaptcha />
<TermCondition />
<button
type="submit"
className="btn-yellow w-full mt-2"
disabled={!isValid || !isCheckedTNC || mutation.isLoading || !isValidCaptcha}
>
{mutation.isLoading ? 'Loading...' : 'Daftar'}
</button>
</form>
)
}
export default Form
|
