openreplay/frontend/app/components/Signup/SignupForm/SignupForm.js

import React from 'react';
import { Form, Input, Icon, Button, Link } from 'UI';
import { login } from 'App/routes';
import ReCAPTCHA from 'react-google-recaptcha';
import stl from './signup.module.css';
import { signup } from 'Duck/user';
import { connect } from 'react-redux';
import Select from 'Shared/Select';
import { SITE_ID_STORAGE_KEY } from 'App/constants/storageKeys';

const LOGIN_ROUTE = login();
const recaptchaRef = React.createRef();

@connect(
  (state) => ({
    tenants: state.getIn(['user', 'tenants']),
    errors: state.getIn(['user', 'signupRequest', 'errors']),
    loading: state.getIn(['user', 'signupRequest', 'loading']),
  }),
  { signup }
)
export default class SignupForm extends React.Component {
  state = {
    tenantId: '',
    fullname: '',
    password: '',
    email: '',
    projectName: '',
    organizationName: '',
    reload: false,
    CAPTCHA_ENABLED: window.env.CAPTCHA_ENABLED === 'true',
  };

  static getDerivedStateFromProps(props, state) {
    if (props.errors && props.errors.size > 0 && state.reload) {
      recaptchaRef.current.reset();
      return {
        reload: false,
      };
    }
    return null;
  }

  handleSubmit = (token) => {
    const { tenantId, fullname, password, email, projectName, organizationName, auth } = this.state;
    localStorage.removeItem(SITE_ID_STORAGE_KEY);
    this.props.signup({
      tenantId,
      fullname,
      password,
      email,
      projectName,
      organizationName,
      auth,
      'g-recaptcha-response': token,
    });
    this.setState({ reload: true });
  };

  write = ({ target: { value, name } }) => this.setState({ [name]: value });
  writeOption = ({ name, value }) => this.setState({ [name]: value.value });

  onSubmit = (e) => {
    e.preventDefault();
    const { CAPTCHA_ENABLED } = this.state;
    if (CAPTCHA_ENABLED && recaptchaRef.current) {
      recaptchaRef.current.execute();
    } else if (!CAPTCHA_ENABLED) {
      this.handleSubmit();
    }
  };
  render() {
    const { loading, errors, tenants } = this.props;
    const { CAPTCHA_ENABLED } = this.state;

    return (
      <Form onSubmit={this.onSubmit} className="bg-white border rounded">
        <div className="mb-8">
          <h2 className="text-center text-2xl font-medium mb-6 border-b p-5 w-full">Create Account</h2>
        </div>
        <>
          {CAPTCHA_ENABLED && (
            <ReCAPTCHA
              ref={recaptchaRef}
              size="invisible"
              sitekey={window.env.CAPTCHA_SITE_KEY}
              onChange={(token) => this.handleSubmit(token)}
            />
          )}
          <div className="px-8">
            {tenants.length > 0 && (
              <Form.Field>
                <label>Existing Accounts</label>
                <Select
                  className="w-full"
                  placeholder="Select account"
                  selection
                  options={tenants}
                  name="tenantId"
                  // value={ instance.currentPeriod }
                  onChange={this.writeOption}
                />
              </Form.Field>
            )}
            <Form.Field>
              <label>Email Address</label>
              <Input
                autoFocus={true}
                autoComplete="username"
                type="email"
                placeholder="E.g. email@yourcompany.com"
                name="email"
                onChange={this.write}
                required="true"
                icon="envelope"
              />
            </Form.Field>
            <Form.Field>
              <label className="mb-2">Password</label>
              <Input
                type="password"
                placeholder="Min 8 Characters"
                minLength="8"
                name="password"
                onChange={this.write}
                required="true"
                icon="key"
              />
            </Form.Field>
            <Form.Field>
              <label>Name</label>
              <Input
                type="text"
                placeholder="E.g John Doe"
                name="fullname"
                onChange={this.write}
                required="true"
                icon="user-alt"
              />
            </Form.Field>
            <Form.Field>
              <label>Organization</label>
              <Input
                type="text"
                placeholder="E.g Uber"
                name="organizationName"
                onChange={this.write}
                required="true"
                icon="buildings"
              />
            </Form.Field>
            
            <Button type="submit" variant="primary" loading={loading} className="w-full">
              Create account
            </Button>
            <div className="my-6">
              <div className="text-sm">
                By signing up, you agree to our{' '}
                <a href="https://openreplay.com/terms.html" className="link">
                terms of service
                </a>{' '}
                and{' '}
                <a href="https://openreplay.com/privacy.html" className="link">
                  privacy policy
                </a>
                .
              </div>
            </div>
          </div>
        </>
        {errors && (
          <div className={stl.errors}>
            {errors.map((error) => (
              <div className={stl.errorItem}>
                <Icon name="info" color="red" size="20" />
                <span className="color-red ml-2">
                  {error}
                  <br />
                </span>
              </div>
            ))}
          </div>
        )}
        <div className="text-center bg-gray-50 py-4 border-t">
            Already having an account?{' '}
            <span className="link">
              <Link to={LOGIN_ROUTE}>Login</Link>
            </span>
          </div>
      </Form>
    );
  }
}