vendredi 28 août 2020

how to confirm password in react to change it and post in api?

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