text: import React, { useState, useEffect } from "react";
  import { withRouter } from "react-router-dom";
  import PropTypes from "prop-types";
  import validate from "validate.js";
  import { makeStyles } from "@material-ui/styles";
  import {
    Grid,
    Button,
    IconButton,
    TextField,
    Typography,
  } from "@material-ui/core";
  import ArrowBackIcon from "@material-ui/icons/ArrowBack";
  import axios from "axios";
  import Swal from "sweetalert2";
  
  const useStyles = makeStyles((theme) => ({
    root: {
      backgroundColor: theme.palette.background.default,
      height: "100%",
    },
    button: {
      margin: " 1vh 1vh 1vh 0vh",
      background: "teal",
      color: "#fff",
    },
    grid: {
      height: "100%",
    },
    quoteContainer: {
      [theme.breakpoints.down("md")]: {
        display: "none",
      },
    },
    quote: {
      backgroundColor: theme.palette.neutral,
      height: "100%",
      display: "flex",
      justifyContent: "center",
      alignItems: "center",
      backgroundImage: "url(/images/auth.jpg)",
      backgroundSize: "cover",
      backgroundRepeat: "no-repeat",
      backgroundPosition: "center",
    },
    quoteInner: {
      textAlign: "center",
      flexBasis: "600px",
    },
    quoteText: {
      color: theme.palette.white,
      fontWeight: 300,
    },
    name: {
      marginTop: theme.spacing(3),
      color: theme.palette.white,
    },
    bio: {
      color: theme.palette.white,
    },
    contentContainer: {},
    content: {
      height: "100%",
      display: "flex",
      flexDirection: "column",
    },
    contentHeader: {
      display: "flex",
      alignItems: "center",
      paddingTop: theme.spacing(5),
      paddingBototm: theme.spacing(2),
      paddingLeft: theme.spacing(2),
      paddingRight: theme.spacing(2),
    },
    logoImage: {
      marginLeft: theme.spacing(4),
    },
    contentBody: {
      flexGrow: 1,
      display: "flex",
      alignItems: "center",
      [theme.breakpoints.down("md")]: {
        justifyContent: "center",
      },
    },
    form: {
      paddingLeft: 100,
      paddingRight: 100,
      paddingBottom: 125,
      flexBasis: 700,
      [theme.breakpoints.down("sm")]: {
        paddingLeft: theme.spacing(2),
        paddingRight: theme.spacing(2),
      },
    },
    title: {
      marginTop: theme.spacing(3),
    },
    socialButtons: {
      marginTop: theme.spacing(3),
    },
    socialIcon: {
      marginRight: theme.spacing(1),
    },
    sugestion: {
      marginTop: theme.spacing(2),
    },
    textField: {
      marginTop: theme.spacing(2),
    },
    VerifyEmailButton: {
      margin: theme.spacing(2, 0),
    },
  }));
  
  const ResetPass = (props) => {
    const { history } = props;
  
    const classes = useStyles();
  
    const [loading, setLoading] = useState(false);
    const [formState, setFormState] = useState({
      isValid: false,
      values: {},
      touched: {},
      errors: {},
    });
  
    useEffect(() => {
      const errors = validate(formState.values);
  
      setFormState((formState) => ({
        ...formState,
        isValid: errors ? false : true,
        errors: errors || {},
      }));
    }, [formState.values]);
  
    const handleBack = () => {
      history.goBack();
    };
  
    const handleChange = (event) => {
      event.persist();
  
      setFormState((formState) => ({
        ...formState,
        values: {
          ...formState.values,
          [event.target.name]:
            event.target.type === "checkbox"
              ? event.target.checked
              : event.target.value,
        },
        touched: {
          ...formState.touched,
          [event.target.name]: true,
        },
      }));
    };
  
    const handleResetPass = (event) => {
      event.preventDefault();
  
      setLoading(true);
  
      const resetPassword = {
        password: formState.values.password,
        token: props.match.params.id,
      };
  
      axios
        .post(`${process.env.REACT_APP_API_DASH}/new-password`, resetPassword)
        .then((res) => {
          console.log("response", res);
          setLoading(false);
          Swal.fire("Success!", "Your password has been changed !", "success");
          history.push("/sign-in");
        })
  
        .catch((err) => {
          console.error("error", err);
          setLoading(false);
          Swal.fire({
            icon: "error",
            title: "Oops...",
            text: "Erorr !",
          });
        });
  
      console.log(resetPassword);
    };
  
    const hasError = (field) =>
      formState.touched[field] && formState.errors[field] ? true : false;
  
    return (
      <div className={classes.root}>
        <Grid className={classes.grid} container>
          <Grid className={classes.quoteContainer} item lg={5}>
            <div className={classes.quote}>
              <div className={classes.quoteInner}>
                <Typography className={classes.quoteText} variant="h1">
                  Hella narwhal Cosby sweater McSweeney's, salvia kitsch before
                  they sold out High Life.
                </Typography>
                <div className={classes.person}>
                  <Typography className={classes.name} variant="body1">
                    Takamaru Ayako
                  </Typography>
                  <Typography className={classes.bio} variant="body2">
                    Manager at inVision
                  </Typography>
                </div>
              </div>
            </div>
          </Grid>
          <Grid className={classes.content} item lg={7} xs={12}>
            <div className={classes.content}>
              <div className={classes.contentHeader}>
                <IconButton onClick={handleBack}>
                  <ArrowBackIcon />
                </IconButton>
              </div>
              <div className={classes.contentBody}>
                <form className={classes.form} onSubmit={handleResetPass}>
                  <Typography className={classes.title} variant="h2">
                    Reset Password
                  </Typography>
                  <Typography color="textSecondary" gutterBottom>
                    Create your new password in this column
                  </Typography>
                  <TextField
                    className={classes.textField}
                    error={hasError("password")}
                    fullWidth
                    helperText={
                      hasError("password") ? formState.errors.password[0] : null
                    }
                    label="Password"
                    name="password"
                    onChange={handleChange}
                    type="password"
                    value={formState.values.password || ""}
                    variant="outlined"
                  />
                  <Grid item>
                    <Button
                      className={classes.button}
                      onClick={handleResetPass}
                      size="large"
                      disabled={loading}
                      variant="contained"
                    >
                      {loading ? "loading ..." : "Reset Password"}
                    </Button>
                  </Grid>
                </form>
              </div>
            </div>
          </Grid>
        </Grid>
      </div>
    );
  };
  
  ResetPass.propTypes = {
    history: PropTypes.object,
  };
  
  export default withRouter(ResetPass);
  