- Install axios to make API requests
- Install react-hot-toast to show toast notifications
// pages/signup.js
// onFinish() and the rest of the code
import { useState, useEffect } from "react";
import useCurrentTheme from "../hooks/useCurrentTheme";
import { Form, Input, Button, Checkbox } from "antd";
import { MailOutlined, LockOutlined, UserOutlined } from "@ant-design/icons";
import { Row, Col, Typography } from "antd";
import axios from "axios";
import toast, { Toaster } from "react-hot-toast";
const { Title } = Typography;
const SignUp = () => {
const [loading, setLoading] = useState(false);
const onFinish = async (values) => {
// console.log("Success:", values);
try {
setLoading(true);
const { data } = await axios.post(
`http://localhost:8000/api/signup`,
values
);
console.log(data);
if (data.error) {
toast.error(data.error);
} else {
toast.success("Succeassfully registered");
console.log(
"save user and token response in context, localstorage then redirect user to dashboard"
);
setLoading(false);
}
} catch (err) {
toast.error("Signup failed. Try again.");
console.log(err);
}
};
return (
<Row>
<Col span={12} offset={6} style={{ paddingTop: "10%" }}>
<Toaster />
<Title>Sign Up</Title>
<Form initialValues={{ email: "" }} onFinish={onFinish}>
<Form.Item
name="name"
rules={[
{
required: true,
message: "Please enter your name!",
},
]}
hasFeedback
>
<Input prefix={<UserOutlined />} placeholder="Name" />
</Form.Item>
<Form.Item
name="email"
rules={[
{
type: "email",
message: "The input is not valid E-mail!",
},
{
required: true,
message: "Please input your E-mail!",
},
]}
hasFeedback
>
<Input prefix={<MailOutlined />} placeholder="Email" />
</Form.Item>
<Form.Item
name="password"
rules={[
{
required: true,
message: "Please input your password!",
min: 6,
max: 24,
},
]}
hasFeedback
>
<Input.Password
prefix={<LockOutlined />}
type="password"
placeholder="Password"
/>
</Form.Item>
<Form.Item
name="confirm"
dependencies={["password"]}
hasFeedback
rules={[
{
required: true,
message: "Please confirm your password!",
},
({ getFieldValue }) => ({
validator(_, value) {
if (!value || getFieldValue("password") === value) {
return Promise.resolve();
}
return Promise.reject(
new Error(
"The two passwords that you entered do not match!"
)
);
},
}),
]}
>
<Input.Password
prefix={<LockOutlined />}
placeholder="Confirm Password"
/>
</Form.Item>
<Form.Item>
<a href="">Forgot password</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
Sign Up
</Button>
<br /> Or <a href="">Register now!</a>
</Form.Item>
</Form>
</Col>
</Row>
);
};
export default SignUp;
Signup works. User is saved in the database. You are able to show error and success messages using react-hot-toast
too.