qw-gallery-scenery/pages/change_pw.tsx

import axios from 'axios'
import { makeStyles } from "@material-ui/core/styles"
import TextField from '@material-ui/core/TextField'
import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent'
import CardActions from '@material-ui/core/CardActions'
import Button from '@material-ui/core/Button'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'

const useStyles = makeStyles(theme => ({
  container: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: "center",
    margin: `${theme.spacing(0)} auto`
  },
  change_password: {
    marginBottom: theme.spacing(2),
    flexGrow: 1
  },
  card: {
    marginTop: theme.spacing(10)
  },
  CardActions: {
    'flex-wrap': 'wrap'
  }
}))

function ChangePassword() {
  const router = useRouter()
  const token = router.query.token
  const classes = useStyles()
  const [password, setPassword] = useState('')
  const [password2, setPassword2] = useState('')
  const [isButtonDisabled, setIsButtonDisabled] = useState(true)
  const [helperText, setHelperText] = useState('')
  const [error, setError] = useState(false)

  useEffect(() => {
    if (password.trim() && password2.trim()) {
      setIsButtonDisabled(false)
    } else {
      setIsButtonDisabled(true)
    }
  }, [password, password2])


  const handleChangePassword = (captcha_token: string) => {
    const data = { token: token, password: password, 'g-recaptcha-response': captcha_token }
    axios(`/change_pw`, {
      method: "post",
      data: data,
      withCredentials: true
    }).then((resp) => {
      setError(false)
      setHelperText(resp.data.message)
      router.push("/login")
      console.log(resp)
    }).catch((err) => {
      setError(true)
      if (err.response) {
        setHelperText(err.response.data.message)
        console.log(err.response)
      } else {
        setHelperText("Unknown error")
      }
    })
  }
  const _handleChangePassword = () => {
    /*global grecaptcha*/ // defined in public/index.html
    if (password === password2) {
      grecaptcha.ready(function () {
        grecaptcha.execute(process.env.recaptcha_site_key, { action: 'change_password' }).then(function (token) {
          handleChangePassword(token)
        })
      })
    } else {
      setError(true)
      setHelperText("passwords do not match")
    }

  }

  const handleKeyPress = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (e.keyCode === 13 || e.which === 13) {
      isButtonDisabled || _handleChangePassword()
    }
  }
  return (
    <form className={classes.container} noValidate autoComplete="off">
      <Card className={classes.card}>
        <CardContent>
          <div>
            <TextField
              error={error}
              fullWidth
              id="password"
              type="password"
              label="Password"
              placeholder="Password"
              margin="normal"
              onChange={(e) => setPassword(e.target.value)}
              onKeyPress={(e) => handleKeyPress(e)}
            />
            <TextField
              error={error}
              fullWidth
              id="password2"
              type="password"
              label="Repeat password"
              placeholder="Repeat password"
              margin="normal"
              helperText={helperText}
              onChange={(e) => setPassword2(e.target.value)}
              onKeyPress={(e) => handleKeyPress(e)}
            />
          </div>
        </CardContent>
        <CardActions className={classes.CardActions}>
          <Button
            variant="contained"
            size="large"
            color="primary"
            className={classes.change_password}
            onClick={() => _handleChangePassword()}
            disabled={isButtonDisabled}>
            Change password
            </Button>

        </CardActions>
      </Card>
    </form>
  )
}

export default ChangePassword