this is my signup page & i don't get any error with post request with thunderclient but error occurs when using Signup page. I am stuck at this from a long time and i am intermediate in javascript. This is my second NextJs program. The users can not sign in to this, if i remove Password, user and name's required field it adds an empty entry to mongodb
import { useState } from "react";
import Link from "next/link";
const Signup = () => {
const [name, setName] = useState()
const [email, setEmail] = useState()
const [password, setPassword] = useState()
const handleChange = (e) => {
if(e.target.name == 'name'){
setName(e.target.value);
}
else if(e.target.name == 'email'){
setEmail(e.target.value);
}
else if(e.target.name == 'password'){
setPassword(e.target.value);
}
};
const handleSubmit = async (e) => {
e.preventDefault()
const data = { name, email, password }
let res = await fetch('http://localhost:3000/api/signup', {
method: 'POST', // or 'PUT'
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data),
});
let response = await res.json();
console.log(response);
setName('')
setEmail('')
setPassword('')
};
return (
<div className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4 flex flex-col">
<form onSubmit={handleSubmit} className='mt-8 space-y-10' method="POST">
<div className="mb-4">
<label
className="block text-grey-darker text-sm font-bold mb-2"
htmlFor="name"
>
Name
</label>
<input
value={name}
onChange={handleChange}
required
className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
id="name"
type="text"
placeholder="name"
/>
</div>
<div className="mb-4">
<label
className="block text-grey-darker text-sm font-bold mb-2"
htmlFor="email"
>
Email
</label>
<input
value={email}
onChange={handleChange}
required
className="shadow appearance-none border rounded w-full py-2 px-3 text-grey-darker"
id="email"
type="email"
placeholder="email"
/>
</div>
<div className="mb-6">
<label
className="block text-grey-darker text-sm font-bold mb-2"
htmlFor="password"
>
Password
</label>
<input
value={password}
onChange={handleChange}
required
className="shadow appearance-none border border-red rounded w-full py-2 px-3 text-grey-darker mb-3"
id="password"
type="password"
placeholder="Password"
/>
<p className="text-red text-xs italic">Please choose a password.</p>
</div>
<div className="flex items-center justify-between">
<button
className="bg-blue hover:bg-blue-dark text-black font-bold py-2 px-4 rounded"
type="submit"
>
Sign In
</button>
<a
className="inline-block align-baseline font-bold text-sm text-blue hover:text-blue-darker"
href={"/forgot"}
>
Forgot Password?
</a>
</div>
</form>
</div>
);
};
export default Signup;
//this is my models file
const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema(
{
name: {type: String, required: true},
email: {type: String, required: true, unique: true},
password: {type: String, required: true},
}, {timestamps: true}
);
mongoose.models = {}
// export default mongoose.models.User || mongoose.model("User", UserSchema);
export default mongoose.model("User", UserSchema);
//This is my api
import connectDb from "../../middleware/mongoose"
import User from "../../models/User"
const handler = async (req, res)=> {
if(req.method == 'POST'){
let u = new User(req.body)
await u.save()
res.status(200).json({success: "success"})
}
else{
res.status(400).json({error: "this method is not allowed"})
}
}
export default connectDb(handler);```
//this is what i get when i log response
`{
properties: [Object],
kind: 'required',
path: 'email',
value: undefined,
reason: undefined,
[Symbol(mongoose:validatorError)]: true
},`
