78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
import { useNavigate } from "react-router-dom";
|
|
import { useState, useEffect } from "react";
|
|
|
|
const FORM_ENDPOINT = "https://laporirigasi.my.id/api/auth/register";
|
|
|
|
const RegisterForm = () => {
|
|
const [status, setStatus] = useState('');
|
|
const [message, setMessage] = useState('');
|
|
|
|
let navigate = useNavigate();
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
setStatus('loading');
|
|
setMessage('');
|
|
|
|
const finalFormEndpoint = e.target.action;
|
|
const data = Array.from(e.target.elements)
|
|
.filter((input) => input.name)
|
|
.reduce((obj, input) => Object.assign(obj, { [input.name]: input.value }), {});
|
|
|
|
fetch(finalFormEndpoint, {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'Content-Type': 'application/json',
|
|
},
|
|
body: JSON.stringify(data),
|
|
})
|
|
.then((response) => {
|
|
if (response.status !== 200) {
|
|
throw new Error(response.statusText);
|
|
}
|
|
|
|
return null;
|
|
})
|
|
.then(() => {
|
|
setStatus('success');
|
|
})
|
|
.catch((err) => {
|
|
setMessage(err.toString());
|
|
setStatus('error');
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (status === "success") {
|
|
navigate("/login");
|
|
}
|
|
}, [status, navigate]);
|
|
|
|
if (status === "error") {
|
|
return (
|
|
<>
|
|
<div>Something bad happened!</div>
|
|
<div>{message}</div>
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<form
|
|
action={FORM_ENDPOINT}
|
|
onSubmit={handleSubmit}
|
|
method="POST"
|
|
encType="multipart/form-data"
|
|
>
|
|
<input type="text" name="username" className="r-form-input" id="register-username" placeholder="Username" required /><br></br>
|
|
<input type="text" name="email" className="r-form-input" id="register-email" placeholder="Email" required /><br></br>
|
|
<input type="password" name="password" className="r-form-input" id="register-password" placeholder="Password" required /><br></br>
|
|
<input type="text" name="fullname" className="r-form-input" id="register-fullname" placeholder="Nama Lengkap" required /><br></br>
|
|
<input type="hidden" name="urole_id" value={"1d3c9d35-3d02-4b42-ad44-b75ca8c4e4fa"}/><br></br>
|
|
<button className="register-button">Register</button>
|
|
</form>
|
|
);
|
|
};
|
|
|
|
export default RegisterForm; |