I do the registration using React and Antd. When the backend sends the error "user already registered", after click "Sign up" you need to display it in the form.
Something like here or something else but where i input username and both passwords:
The response from the server that comes, but I can do it differently:
{
"errorCode": "1",
"errorMessage": "user already registered"
}
Code:
class RegisterPage extends React.Component {
// Method in which I send the request
signUp(values) {
fetch("http://localhost:8080/sign-up", {
method: "POST",
body: JSON.stringify({"username": values.username, "password": values.password})
}).then(response => response.json())
.then(response => {console.log(response)
})
}
render() {
return (
<>
<Header/>
<div className="container">
</div>
<Row type="flex" justify="center" align="middle" style={{minHeight: '80vh'}}>
<Form
name="normal_login"
className="login-form"
initialValues={{
remember: true,
}}
onFinish={this.signUp}
>
<Form.Item className="username-input"
name="username"
rules={[
{
required: true,
message: 'This user already registered!',
}
]}
>
<Input prefix={<UserOutlined className="site-form-item-icon"/>} placeholder="Username"/>
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
min: 1,
},
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon"/>}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item
name="confirm_password"
rules={[
{
required: true,
message: 'Please confirm your password!',
},
({getFieldValue}) => ({
validator(_, value) {
if (!value || getFieldValue('password') === value) {
return Promise.resolve();
}
return Promise.reject(new Error('Passwords don\'t match!'));
},
}),
]}
>
<Input
prefix={<LockOutlined className="site-form-item-icon"/>}
type="password"
placeholder="Confirm password"
/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button"
style={{width: "100%"}}>
Sign Up
</Button>
</Form.Item>
</Form>
</Row>
<PageFooter/>
</>
)
}
}
