{"size": 2750, "ext": "js", "max_stars_repo_path": "src/frontend/pages/CreateAccount.js", "max_stars_repo_name": "harpreetchima/friendbank", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/frontend/pages/CreateAccount.js", "max_issues_repo_name": "harpreetchima/friendbank", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/frontend/pages/CreateAccount.js", "max_forks_repo_name": "harpreetchima/friendbank", "max_forks_repo_forks_event_min_datetime": "2020-10-07T00:38:13.000Z", "max_forks_repo_forks_event_max_datetime": "2020-10-07T00:38:13.000Z"}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": 1, "avg_line_length": 26.6990291262, "max_line_length": 69, "alphanum_fraction": 0.5865454545}
import React from 'react';
import Form from '../components/Form';
import Gateway from '../components/Gateway';
import {
  SINGLE_LINE_TEXT_INPUT,
  PASSWORD_INPUT,
} from '../components/FormFields';
import getCopy from '../utils/getCopy';
import makeFormApiRequest from '../utils/makeFormApiRequest';
import makeLocaleLink from '../utils/makeLocaleLink';
import { isAuthenticated } from '../utils/auth';
import {
  DASHBOARD_ROUTE,
  LOGIN_ROUTE,
  FORGOT_PASSWORD_ROUTE,
} from '../routes';
import {
  validateEmail,
  validatePassword,
  validateName,
  validateZip,
} from '../../shared/fieldValidations';
import { TRANSACTIONAL_EMAIL } from '../../shared/emailFrequency';

export const CREATE_ACCOUNT_ROUTE = '/friendbank/create-account';

export default function CreateAccount() {
  async function onCreateAccount(formValues) {
    const { email, password, firstName, zip } = formValues;

    const payload = {
      email,
      password,
      firstName,
      zip,
      emailFrequency: TRANSACTIONAL_EMAIL,
    };

    return await makeFormApiRequest('/api/v1/user', 'post', payload);
  }

  function onCompletion() {
    window.location.href = makeLocaleLink(DASHBOARD_ROUTE);
  }

  React.useEffect(() => {
    if (isAuthenticated()) {
      window.location.href = makeLocaleLink(DASHBOARD_ROUTE);
    }
  }, []);

  return (
    <Gateway
      leftLink={{
        path: LOGIN_ROUTE,
        copy: getCopy('authPage.login'),
      }}
      rightLink={{
        path: FORGOT_PASSWORD_ROUTE,
        copy: getCopy('authPage.forgotPassword'),
      }}
    >
      <Form
        formId="create-account"
        steps={[{
          title: getCopy('authPage.newAccount'),
          onStepSubmit: onCreateAccount,
          buttonCopy: getCopy('formLabels.submit'),
          fields: [
            {
              fieldId: 'firstName',
              fieldType: SINGLE_LINE_TEXT_INPUT,
              isHalfWidth: true,
              label: getCopy('formLabels.firstName'),
              validator: validateName,
            },
            {
              fieldId: 'zip',
              fieldType: SINGLE_LINE_TEXT_INPUT,
              isHalfWidth: true,
              label: getCopy('formLabels.zip'),
              validator: validateZip,
            },
            {
              fieldId: 'email',
              fieldType: SINGLE_LINE_TEXT_INPUT,
              label: getCopy('formLabels.email'),
              validator: validateEmail,
            },
            {
              fieldId: 'password',
              fieldType: PASSWORD_INPUT,
              label: getCopy('formLabels.password'),
              validator: validatePassword,
            },
          ],
        }]}
        onCompletion={onCompletion}
      />
    </Gateway>
  );
}
