deighton-ar/website/src/Auth/ResetPassword.js

import React, { Component, Fragment } from "react"
import PropTypes from "prop-types"
import { Box, Text, Image, Column, Row, BoundInput, BoundButton } from "ui"
import { MessageModal, WaitModal } from "../Modal"
import { api } from "src/API"
import { FormBinder } from "react-form-binder"
import { sizeInfo, colorInfo } from "ui/style"
import autobind from "autobind-decorator"
import headerLogo from "images/logo.png"

export class ResetPassword extends Component {
  static propTypes = {
    history: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
  }

  static bindings = {
    newPassword: {
      alwaysGet: true,
      isValid: (r, v) => v.length >= 6,
    },
    reenteredNewPassword: {
      isValid: (r, v) => v !== "" && v === r.getBindingValue("newPassword"),
    },
    submit: {
      noValue: true,
      isDisabled: (r) => !r.anyModified || !r.allValid,
    },
  }

  constructor(props) {
    super(props)
    this.state = {
      binder: new FormBinder({}, ResetPassword.bindings),
      messageModal: null,
      waitModal: null,
      tokenConfirmed: false,
    }
  }

  componentDidMount(props) {
    const passwordToken = new URLSearchParams(
      decodeURIComponent(window.location.search)
    ).get("password-token")

    this.setState({ waitModal: { message: "Confirming password reset..." } })

    if (passwordToken) {
      api
        .logout()
        .then(() => {
          return api.confirmResetPassword(passwordToken)
        })
        .then((response) => {
          this.setState({ waitModal: null })
        })
        .catch((err) => {
          this.setState({
            waitModal: null,
            messageModal: {
              icon: "hand",
              message: `We were unable to confirm you requested a password reset. Please request another reset.`,
              detail: err.message,
            },
          })
        })
    } else {
      this.props.history.replace("/")
    }
  }

  @autobind
  handleSubmit(e) {
    e.preventDefault()
    e.stopPropagation()

    const obj = this.state.binder.getModifiedBindingValues()
    const passwordToken = new URLSearchParams(
      decodeURIComponent(window.location.search)
    ).get("password-token")

    this.setState({ waitModal: { message: "Setting Password..." } })
    api
      .resetPassword({ newPassword: obj.newPassword, passwordToken })
      .then(() => {
        this.setState({
          waitModal: null,
          messageModal: {
            icon: "thumb",
            message: `Your password has been reset. You can now login to the system with your new password.`,
          },
        })
      })
      .catch((err) => {
        this.setState({
          binder: new FormBinder({}, ResetPassword.bindings), // Reset to avoid accidental rapid retries
          waitModal: null,
          messageModal: {
            icon: "hand",
            message:
              "There was a problem changing your password. Please request another reset email.",
            detail: err.message,
          },
        })
      })
  }

  @autobind
  handleMessageModalDismiss() {
    const { redirect } = this.state.messageModal

    this.setState({ messageModal: null })
    this.props.history.replace(redirect || "/login")
  }

  render() {
    const { messageModal, waitModal, binder } = this.state

    return (
      <Fragment>
        <Column.Item grow />
        <Column.Item>
          <Row>
            <Row.Item grow />
            <Row.Item width={sizeInfo.formRowSpacing} />
            <Row.Item width={sizeInfo.modalWidth}>
              <form onSubmit={this.handleSubmit} id="resetPasswordForm">
                <Box
                  border={{
                    width: sizeInfo.headerBorderWidth,
                    color: colorInfo.headerBorder,
                  }}
                  radius={sizeInfo.formBoxRadius}>
                  <Row>
                    <Row.Item width={sizeInfo.formRowSpacing} />
                    <Row.Item>
                      <Column>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item>
                          <Row>
                            <Row.Item grow />
                            <Row.Item>
                              <Image
                                source={headerLogo}
                                width={sizeInfo.loginLogoWidth}
                              />
                            </Row.Item>
                            <Row.Item grow />
                          </Row>
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item>
                          <Text size="large">Reset Password</Text>
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item>
                          <BoundInput
                            label="New Password"
                            password
                            name="newPassword"
                            message="A new password, cannot be blank or the same as your old password"
                            binder={binder}
                          />
                        </Column.Item>
                        <Column.Item>
                          <BoundInput
                            label="Re-enter New Password"
                            password
                            name="reenteredNewPassword"
                            message="The new password again, must match and cannot be blank"
                            binder={binder}
                          />
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                        <Column.Item minHeight={sizeInfo.buttonHeight}>
                          <Row>
                            <Row.Item grow />
                            <Row.Item>
                              <BoundButton
                                text="Submit"
                                name="submit"
                                submit="resetPasswordForm"
                                binder={binder}
                              />
                            </Row.Item>
                          </Row>
                        </Column.Item>
                        <Column.Item height={sizeInfo.formColumnSpacing} />
                      </Column>
                    </Row.Item>
                    <Row.Item width={sizeInfo.formRowSpacing} />
                  </Row>
                </Box>
              </form>
            </Row.Item>
            <Row.Item grow />
          </Row>
        </Column.Item>
        <Column.Item grow>
          <MessageModal
            open={!!messageModal}
            icon={messageModal ? messageModal.icon : ""}
            message={messageModal ? messageModal.message : ""}
            detail={messageModal ? messageModal.title : ""}
            onDismiss={this.handleMessageModalDismiss}
          />

          <WaitModal
            open={!!waitModal}
            message={waitModal ? waitModal.message : ""}
          />
        </Column.Item>
      </Fragment>
    )
  }
}