In my backend, duplicates are not being created, but in the front part of the route /signup
, if I am able to register many times with an existing user, how can I limit this and perhaps send a message that says that this email has already been used?
import React, { useState } from 'react';
import { API } from '../config';
import { Link } from 'react-router-dom';
const Signup = () => {
const [values, setValues] = useState({
name: "",
email: "",
password: "",
error: "",
success: false
});
const { name, email, password, error, success } = values;
const handleChange = name => event => {
setValues({ ...values, error: false, [name]: event.target.value });
}
const signup = user => {
return fetch(`${API}/signup`, {
method: "POST",
headers: {
Accept: "application/json",
"Content-Type": "application/json"
},
body: JSON.stringify(user)
})
.then(response => {
return response.json();
})
.catch(error => {
console.log(error);
});
}
const clickSubmit = event => {
event.preventDefault();
setValues({ ...values, error: false });
signup({ name, email, password })
.then(data => {
if(data.error) {
setValues({ ...values, error: data.error, success: false });
} else {
setValues({ ...values, name: "", email: "", password: "", error: "", success: true });
}
});
}
const showError = () => {
return (
<div className="alert alert-danger" style={{ display: error ? "" : "none" }}>
{ error }
</div>
);
}
const showSuccess = () => {
return (
<div className="alert alert-info" style={{ display: success ? "" : "none" }}>
A new account was created, please <Link to="/signin">signin</Link>.
</div>
);
}
return (
<div className="register-background">
<div className="container">
{ showSuccess() }
{ showError() }
<div className="box-header text-center">
<p>Signup</p>
</div>
<form className="card">
<div className="card-body">
<div className="form-group">
<input onChange={handleChange("name")} type="text"
className="form-control"
placeholder="Enter your name."
value={name} />
</div>
<div className="form-group">
<input onChange={handleChange("email")} type="email"
className="form-control"
placeholder="Enter your email."
value={email} />
</div>
<div className="form-group">
<input onChange={handleChange("password")} type="password"
className="form-control"
placeholder="enter your password."
value={password} />
</div>
<button onClick={clickSubmit} className="btn btn-block btn-primary">Submit</button>
</div>
</form>
</div>
</div>
);
}
export default Signup;
You can make a query before sending the user's data to register, for example, you fill out the form, click send, and the system instead of sending it directly to register makes a query first and if there are no records of that same person, so yes, it does send to register, for example, you can do the query like this
You make sure that if the query returns empty, the variable where you store the result takes a value
null
, otherwise the query takes, and you return the value andreact
receive it and do something like thisI hope it helps you and you can understand it, since I haven't played in a while
react