test gists

ForgetPassword.js

/**
 *
 * ForgetPassword
 *
 */

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Helmet } from 'react-helmet';
import { FormattedMessage } from 'react-intl';
import { createStructuredSelector } from 'reselect';
import { compose } from 'redux';
import _ from 'lodash';
import Joi from 'joi';
import SnackBar from 'components/SnackBar';
import Layout from '@material-ui/core/Grid';
import injectSaga from 'utils/injectSaga';
import injectReducer from 'utils/injectReducer';
import TwButton from 'components/TwButton';
import AuthContainerTitle from 'components/AuthContainerTitle';
import TextField from '@material-ui/core/TextField';
import FormHelperText from '@material-ui/core/FormHelperText';
import CheckEmailSection from 'components/CheckEmailSection';

import reducer from './reducer';
import saga from './saga';
import messages from './messages';
import { forgetPassword, resetError, resendPasswordRequest } from './actions';
import Schema from './Schema';
import {
  selectorPasswordRequestSuccess,
  selectorPasswordRequestError,
} from './selectors';
import {
  handleFieldChange,
  groupFieldError,
  getMessageFromErrorField,
  hasErrorInFormField,
} from '../../utils/Helper/commonHelper';

const Wrapper = styled.div`
  display: flex;
  flex-direction: column;
  padding: 110px 0 250px;
  .mb-30 {
    margin-bottom: 30px;
  }
  .auth-message-container {
    background-color: #ffffff;
    padding: 55px 105px;
    border-radius: 5px;
    width: 50%;
    max-width: 600px;
    align-self: center;
    justify-self: center;
    display: flex;
    flex-direction: column;
    align-content: center;
    .mb-15 {
      margin-bottom: 15px;
    }
    .instruction {
      display: block;
      margin-bottom: 50px;
      text-align: center;
      color: #000000;
      font-family: Roboto;
      font-size: 18px;
      font-weight: 500;
      line-height: 25px;
    }
    .auth-field-base {
      background-color: #f9f9f9;
      &:hover,
      &:before,
      &:after,
      &:hover:before {
        border-bottom: none;
        transition: none;
      }
    }
    .auth-field {
      border-radius: 5px 5px 0 0;
      background-color: #f9f9f9;
      padding: 38px 20px 20px;
      color: #000000;
      font-family: Roboto;
      font-size: 15px;
      line-height: 18px;
      border: none;
      border-bottom: 1px solid #e0e0e0;
    }
    .auth-field-label {
      color: #9c9c9c;
      font-family: Roboto;
      font-size: 13px;
      line-height: 15px;
    }
    .auth-field-shrink {
      transform: translate(20px, 20px) scale(1);
    }
    .auth-field-focused {
      background: -webkit-linear-gradient(-45deg, #a351c9 0%, #fe915a 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
`;

/* eslint-disable react/prefer-stateless-function */
export class ForgetPassword extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      email: '',
      errors: {
        email: [],
      },
    };
    this.handleContinue = this.handleContinue.bind(this);
    this.handleResendEmail = this.handleResendEmail.bind(this);
  }

  validateField = name => () => {
    const { errors } = this.state;
    const result = Joi.validate({ [name]: this.state[name] }, Schema);
    if (result.error) {
      const groupedError = groupFieldError(result.error.details);
      this.setState({ errors: Object.assign({}, errors, groupedError) });
    } else {
      this.setState({ errors: Object.assign({}, errors, { [name]: [] }) });
    }
  };

  handleContinue() {
    const { dispatch } = this.props;
    const currentState = _.pick(this.state, 'email');
    const result = Joi.validate(currentState, Schema);
    if (result.error) {
      const groupedError = groupFieldError(result.error.details);
      this.setState({ errors: groupedError });
    } else {
      this.setState({ errors: {} });
      dispatch(forgetPassword(currentState));
    }
  }

  handleResendEmail() {
    const { dispatch } = this.props;
    const currentState = _.pick(this.state, 'email');
    const result = Joi.validate(currentState, Schema);
    if (result.error) {
      const groupedError = groupFieldError(result.error.details);
      this.setState({ errors: groupedError });
    } else {
      this.setState({ errors: {} });
      dispatch(resendPasswordRequest(currentState));
    }
  }

  render() {
    const { email, errors } = this.state;
    const { requestError, requestSuccess } = this.props;
    if (requestSuccess)
      return <CheckEmailSection email={email} onCta={this.handleResendEmail} />;
    return (
      <Wrapper>
        <Helmet>
          <title>Forget Password</title>
          <meta name="description" content="Forget password page" />
        </Helmet>
        <div className="auth-message-container">
          <AuthContainerTitle className="mb-15">
            <FormattedMessage {...messages.header} />
          </AuthContainerTitle>
          <span className="instruction">
            Please fill in the form below to reset your password.
          </span>
          <SnackBar
            open={!!requestError}
            message={requestError || 'Password change request error'}
            onClose={this.props.onCloseNotification}
          />
          <Layout item container direction="column" md={12}>
            <Layout item xs={12} md={12} className="mb-30">
              <TextField
                variant="filled"
                id="email"
                name="email"
                label={<FormattedMessage {...messages.emailLabel} />}
                InputProps={{
                  classes: { root: 'auth-field-base', input: 'auth-field' },
                }}
                InputLabelProps={{
                  classes: {
                    root: 'auth-field-label',
                    shrink: 'auth-field-shrink',
                    focused: 'auth-field-focused',
                  },
                }}
                value={email}
                onChange={e => this.setState(handleFieldChange(e))}
                onKeyDown={e =>
                  e.key === 'Enter' ? this.handleContinue(e) : null
                }
                onBlur={this.validateField('email')}
                fullWidth
                error={hasErrorInFormField(errors.email)}
              />
              <FormHelperText error>
                {getMessageFromErrorField(errors.email)}
              </FormHelperText>
            </Layout>
            <Layout item md={12}>
              <TwButton
                onClick={this.handleContinue}
                label="Continue"
                fullWidth
              />
            </Layout>
          </Layout>
        </div>
      </Wrapper>
    );
  }
}

ForgetPassword.propTypes = {
  dispatch: PropTypes.func.isRequired,
  requestError: PropTypes.string,
  requestSuccess: PropTypes.bool,
};

const mapStateToProps = createStructuredSelector({
  requestSuccess: selectorPasswordRequestSuccess(),
  requestError: selectorPasswordRequestError(),
});

function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onCloseNotification: () => dispatch(resetError()),
  };
}

const withConnect = connect(
  mapStateToProps,
  mapDispatchToProps,
);

const withReducer = injectReducer({ key: 'forgetPassword', reducer });
const withSaga = injectSaga({ key: 'forgetPassword', saga });

export default compose(
  withReducer,
  withSaga,
  withConnect,
)(ForgetPassword);