mist/interface/components/RequestAccount.js

import React from 'react';

class RequestAccount extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      creating: false,
      passwordInputType: 'text',
      pw: '',
      pwRepeat: '',
      showPassword: false,
      showRepeat: false
    };
  }

  resetForm() {
    this.setState({
      pw: '',
      pwRepeat: '',
      showRepeat: false,
      creating: false
    });
  }

  handleCancel(e) {
    e.preventDefault();
    ipc.send('backendAction_closePopupWindow');
  }

  handleSubmit(e) {
    e.preventDefault();

    const { pw, pwRepeat } = this.state;

    // ask for password repeat
    if (!pwRepeat.length) {
      this.setState({ showRepeat: true });
      this.refs.password_repeat.focus();
      return;
    }

    // check passwords
    if (pw !== pwRepeat) {
      GlobalNotification.warning({
        content: TAPi18n.__(
          'mist.popupWindows.requestAccount.errors.passwordMismatch'
        ),
        duration: 3
      });
      this.resetForm();
    } else if (pw && pw.length < 8) {
      GlobalNotification.warning({
        content: TAPi18n.__(
          'mist.popupWindows.requestAccount.errors.passwordTooShort'
        ),
        duration: 3
      });
      this.resetForm();
    } else if (pw && pw.length >= 8) {
      this.setState({ creating: true }, () => this.createAccount(pwRepeat));
    }
  }

  createAccount(pw) {
    web3.eth.personal.newAccount(pw).then(address => {
      ipc.send('backendAction_windowMessageToOwner', null, address);

      // notify about backing up!
      alert(TAPi18n.__('mist.popupWindows.requestAccount.backupHint'));

      this.resetForm();

      ipc.send('backendAction_closePopupWindow');
    });
  }

  renderFormBody() {
    if (this.state.creating) {
      return <h2>{i18n.t('mist.popupWindows.requestAccount.creating')}</h2>;
    } else {
      return (
        <div>
          <div
            className={`field-container ${
              this.state.showRepeat ? 'repeat-field' : ''
            }`}
          >
            <input
              autoFocus
              type={this.state.showPassword ? 'text' : 'password'}
              placeholder={i18n.t(
                'mist.popupWindows.requestAccount.enterPassword'
              )}
              className="password"
              value={this.state.pw}
              onChange={e => this.setState({ pw: e.target.value })}
            />
            <input
              type={this.state.showPassword ? 'text' : 'password'}
              placeholder={i18n.t(
                'mist.popupWindows.requestAccount.repeatPassword'
              )}
              className="password-repeat"
              ref="password_repeat"
              value={this.state.pwRepeat}
              onChange={e => this.setState({ pwRepeat: e.target.value })}
            />
          </div>
          <div className="show-password-container">
            <input
              id="show-password-checkbox"
              type="checkbox"
              name="elements_input_bool"
              className="show-password abi-input"
              checked={this.state.showPassword}
              onChange={() =>
                this.setState({ showPassword: !this.state.showPassword })
              }
            />
            <label htmlFor="show-password-checkbox">
              {i18n.t('mist.popupWindows.importAccount.buttons.showPassword')}
            </label>
          </div>

          <div className="dapp-modal-buttons">
            <button
              className="cancel"
              type="button"
              onClick={e => this.handleCancel(e)}
            >
              {i18n.t('buttons.cancel')}
            </button>
            <button className="ok dapp-primary-button" type="submit">
              {i18n.t('buttons.ok')}
            </button>
          </div>
        </div>
      );
    }
  }

  render() {
    return (
      <div className="popup-windows request-account">
        <form onSubmit={e => this.handleSubmit(e)}>
          <h1>{i18n.t('mist.popupWindows.requestAccount.title')}</h1>

          {this.renderFormBody()}
        </form>
      </div>
    );
  }
}

export default RequestAccount;