Spaces:
Runtime error
Runtime error
File size: 2,999 Bytes
8830402 |
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 |
import React, { useState } from 'react'
import styles from "./SignupPage.module.css";
import { Link, useNavigate } from 'react-router-dom';
function SignupPage() {
const signup_url = process.env.REACT_APP_BACKEND_URL + "/signup";
const [errors, setErrors] = useState({});
const navigate = useNavigate();
const handleSubmit = async (e) => {
e.preventDefault();
// console.log(e.target);
setErrors({});
const res = await fetch(signup_url, {
method: "POST",
credentials: "include",
body: new FormData(e.target),
})
if (!res.ok) {
// setErrors(re)
const data = await res.json();
if ("error" in data) {
setErrors(data);
}
if ("field_error" in data) {
setErrors(data.field_error);
}
}
else {
// handle redirect to home page
console.log("success");
navigate("/");
}
}
return (
<div id={styles.signup_page}>
<form id={styles.signup_form} onSubmit={handleSubmit}>
<h2>Signup</h2>
{errors.error && (
<p className={styles.error_msg}>{errors.error}</p>
)}
<div className={styles.input_box}>
<label htmlFor="name">Name</label>
<input type="text" name="name" id="name" />
{errors.name && (
<p className={styles.error_msg}>{errors.name[0]}</p>
)}
</div>
<div className={styles.input_box}>
<label htmlFor="username">Username</label>
<input type="text" name="username" id="username" />
{errors.username && (
<p className={styles.error_msg}>{errors.username[0]}</p>
)}
</div>
<div className={styles.input_box}>
<label htmlFor="username">Password</label>
<input type="password" name="password" id="password" />
{errors.password && (
<p className={styles.error_msg}>{errors.password[0]}</p>
)}
</div>
<div className={styles.input_box}>
<label htmlFor="username">Confirm Password</label>
<input type="password" name="confirm_password" id="confirm_password" />
{errors.confirm_password && (
<p className={styles.error_msg}>{errors.confirm_password[0]}</p>
)}
</div>
<input id={styles.submit_btn} type="submit" value="login" />
<Link to="/login" id={styles.redirect_link}>Already have an account?</Link>
</form>
</div>
)
}
export default SignupPage |