i have api URL: X/profile/password which take oldpassword and newpassword as request body build in express now i need to use it to allow user to change password but i cant realize how to confirm new password this is my code in react:
export default function UserProfile() {
const classes = useStyles();
const [user, setUser] = useState({
old_password: "",
new_password: "",
});
const updatePass = (event) => {
setUser({ ...user, [event.target.name]: event.target.value });
};
const submitHandler = async (e) => {
e.preventDefault();
try {
console.log(user);
const resp = await Axios({
method: "POST",
url: `http://localhost:3001/api/profile/password`,
headers: {
"Content-Type": "application/json",
},
data: user,
});
console.log(resp);
} catch (error) {
console.log(error.message);
}
};
const [mail, setMail] = useState({
new_email: "",
});
const updateMail = (event) => {
setMail({ ...mail, [event.target.name]: event.target.value });
};
const submitHandler2 = async (e) => {
e.preventDefault();
try {
console.log(user);
const resp = await Axios({
method: "POST",
url: `http://localhost:3001/api/profile/email`,
headers: {
"Content-Type": "application/json",
},
data: mail,
});
console.log(resp);
} catch (error) {
console.log(error.message);
}
};
return (
<div>
<GridContainer>
<GridItem xs={12} sm={12} md={12}>
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>Edit Email</h4>
<p className={classes.cardCategoryWhite}>
Update your current email address
</p>
</CardHeader>
<CardBody>
<form className={classes.form} noValidate onSubmit={submitHandler2}>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<TextField
label="Email address"
id="new_email"
fullWidth
required
name="new_email"
autoComplete="new_email"
autoFocus
onChange={updateMail}
/>
</GridItem>
</GridContainer>
</form>
</CardBody>
<CardFooter>
<Button color="primary"
type="submit"
variant="contained"
className={classes.submit}>Update Email</Button>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={12}>
<form className={classes.form} noValidate onSubmit={submitHandler}>
<Card>
<CardHeader color="primary">
<h4 className={classes.cardTitleWhite}>Edit Password</h4>
<p className={classes.cardCategoryWhite}>Update your Password</p>
</CardHeader>
<CardBody>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<TextField
id="old_password"
label="Old Password"
type="password"
name="old_password"
autoComplete="old_password"
required
autoFocus
onChange={updatePass}
/>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<TextField
id="new_password"
label="New Password"
required
type="password"
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<TextField
id="new-password-2"
label="Confirm Password"
required
type="password"
/>
</GridItem>
</GridContainer>
</CardBody>
<CardFooter>
<Button type="submit"
variant="contained"
color="primary"
className={classes.submit}>Update Password</Button>
</CardFooter>
</Card>
</form>
</GridItem>
</GridContainer>
</div>
);
}
this is the code which contain email change and password change, is it okay? and how to confirm password,that's mean disable submit if password not match, and show a message that password don't match.
Aucun commentaire:
Enregistrer un commentaire