<commit_before>import PropTypes from 'prop-types';
import React from 'react';
import Icon from '../icon';
import classnames from 'classnames';
import { delay, defer } from 'lodash';
import URLs from '../../model/urls';
import Notifications from '../../model/notifications';

class EmailNotification extends React.Component {
  static propTypes = {
    onDismiss: PropTypes.func.isRequired,

    notice: PropTypes.shape({
      is_verified: PropTypes.bool,
      requestInProgress: PropTypes.bool,
      verifyInProgress: PropTypes.bool,
      verificationFailed: PropTypes.bool,
      id: PropTypes.number.isRequired,
      value: PropTypes.string.isRequired,
      error: PropTypes.string,
      acknowledged: PropTypes.bool,
      on: PropTypes.func.isRequired,
      off: PropTypes.func.isRequired,
      sendConfirmation: PropTypes.func.isRequired,
      sendVerification: PropTypes.func.isRequired,
    }).isRequired,
  };

  componentWillUnmount() {
    return this.props.notice.off('change', this.onChange);
  }

  onChange = () => {
    return this.forceUpdate();
  };

  onPinCheck = () => {
    return this.props.notice.sendVerification(
      this.pinInput.value, this.onSuccess,
    );
  };

  onSuccess = () => {
    // wait a bit so the "Success" message is seen, then hide
    return delay(this.props.onDismiss, 1500);
  };

  onVerify = () => {
    return this.props.notice.sendConfirmation();
  };

  onVerifyKey = (ev) => {
    if (ev.key === 'Enter') {
      this.onPinCheck();
    }
  };

  // If used elsewhere, the on/off dance needs to be extracted to a component
  UNSAFE_componentWillMount() {
    return this.props.notice.on('change', this.onChange);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.notice && (nextProps.notice !== this.props.notice)) {
      this.props.notice.off('change', this.onChange);
      nextProps.notice.on('change', this.onChange);
    }
  }

  acknowledge = () => {
    Notifications.acknowledge(this.props.notice);
    return undefined;
  }; // silence React warning about return value

  renderFailure = () => {
    return (
      <span className="body">
        <a href={URLs.get('accounts_profile')} className="action" target="_blank">
          {'\
    Visit Profile \x3E\x3E\
           '}
        </a>
      </span>
    );
  };

  setInputRef = (pinInput) => {
    this.pinInput = pinInput;
  }

  renderPin = () => {
    defer(() => (this.pinInput != null ? this.pinInput.focus() : undefined));
    return (
      <span className="body verify">
        <Icon type="envelope" />
        <span className="message">
          {'\
    Check your email inbox. Enter the 6-digit verification code:\
           '}
        </span>
        <input
          autoFocus={true}
          ref={this.setInputRef}
          onKeyPress={this.onVerifyKey}
          type="text" />
        <a className="pin-check action" onClick={this.onPinCheck}>
          Go
        </a>
      </span>
    );
  };

  renderSpinner = () => {
    return (
      <span className="body">
        <span className="message">
          {'\
    Requesting...\
           '}
        </span>
        <Icon type="spinner" spin />
      </span>
    );
  };

  renderStart = () => {
    return (
      <span className="body">
        <Icon type="envelope" />
        {'\
    Verify your email\
         '}
        <a className="action" onClick={this.onVerify}>
          Verify now
        </a>
      </span>
    );
  };

  renderSuccess = () => {
    return (
      <span className="body">
        <Icon type="envelope" />
        <span className="message">
          Verification was successful!
        </span>
      </span>
    );
  };

  render() {

    let error;
    const body = this.props.notice.is_verified ?
      this.renderSuccess()
      : this.props.notice.requestInProgress ?
        this.renderSpinner()
        : this.props.notice.verifyInProgress ?
          this.props.notice.verificationFailed ?
            this.renderFailure()<commit_msg>only use shortened verify text on mobile and tablet<commit_after>import PropTypes from 'prop-types';
import React from 'react';
import Icon from '../icon';
import classnames from 'classnames';
import { delay, defer } from 'lodash';
import URLs from '../../model/urls';
import Notifications from '../../model/notifications';
import Responsive from '../../../../tutor/src/components/responsive';

class EmailNotification extends React.Component {
  static propTypes = {
    onDismiss: PropTypes.func.isRequired,

    notice: PropTypes.shape({
      is_verified: PropTypes.bool,
      requestInProgress: PropTypes.bool,
      verifyInProgress: PropTypes.bool,
      verificationFailed: PropTypes.bool,
      id: PropTypes.number.isRequired,
      value: PropTypes.string.isRequired,
      error: PropTypes.string,
      acknowledged: PropTypes.bool,
      on: PropTypes.func.isRequired,
      off: PropTypes.func.isRequired,
      sendConfirmation: PropTypes.func.isRequired,
      sendVerification: PropTypes.func.isRequired,
    }).isRequired,
  };

  componentWillUnmount() {
    return this.props.notice.off('change', this.onChange);
  }

  onChange = () => {
    return this.forceUpdate();
  };

  onPinCheck = () => {
    return this.props.notice.sendVerification(
      this.pinInput.value, this.onSuccess,
    );
  };

  onSuccess = () => {
    // wait a bit so the "Success" message is seen, then hide
    return delay(this.props.onDismiss, 1500);
  };

  onVerify = () => {
    return this.props.notice.sendConfirmation();
  };

  onVerifyKey = (ev) => {
    if (ev.key === 'Enter') {
      this.onPinCheck();
    }
  };

  // If used elsewhere, the on/off dance needs to be extracted to a component
  UNSAFE_componentWillMount() {
    return this.props.notice.on('change', this.onChange);
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    if (nextProps.notice && (nextProps.notice !== this.props.notice)) {
      this.props.notice.off('change', this.onChange);
      nextProps.notice.on('change', this.onChange);
    }
  }

  acknowledge = () => {
    Notifications.acknowledge(this.props.notice);
    return undefined;
  }; // silence React warning about return value

  renderFailure = () => {
    return (
      <span className="body">
        <a href={URLs.get('accounts_profile')} className="action" target="_blank">
          {'\
    Visit Profile \x3E\x3E\
           '}
        </a>
      </span>
    );
  };

  setInputRef = (pinInput) => {
    this.pinInput = pinInput;
  }

  renderPin = () => {
    defer(() => (this.pinInput != null ? this.pinInput.focus() : undefined));
    return (
      <span className="body verify">
        <Icon type="envelope" />
        <span className="message">
          {'\
    Check your email inbox. Enter the 6-digit verification code:\
           '}
        </span>
        <input
          autoFocus={true}
          ref={this.setInputRef}
          onKeyPress={this.onVerifyKey}
          type="text" />
        <a className="pin-check action" onClick={this.onPinCheck}>
          Go
        </a>
      </span>
    );
  };

  renderSpinner = () => {
    return (
      <span className="body">
        <span className="message">
          {'\
    Requesting...\
           '}
        </span>
        <Icon type="spinner" spin />
      </span>
    );
  };

  renderStart = () => {
    const shortText = 'Verify your email';

    return (
      <span className="body">
        <Icon type="envelope" />
          <Responsive
            desktop={'Verifying your email address allows you to recover your password if you ever forget it.'}
            tablet={shortText}
            mobile={shortText}
          />
        <a className="action" onClick={this.onVerify}>
          Verify now
        </a>
      </span>
    );
  };

  renderSuccess = () => {
    return (
      <span className="body">
        <Icon type="envelope" />
        <span className="message">
          Verification was successful!
        </span>
      </span>
    );
  };

  render() {

    let error;
    const body = this.props.notice.is_verified ?
      this.renderSuccess()
      : this.props.notice.requestInProgress ?
        this.renderSpinner()
        : this.props.notice.verifyInProgress ?
          this.props.notice.verificationFailed ?
            this.renderFailure()
{'fraction_non_alphanumeric': 0.142015392015392, 'fraction_numerical': 0.0016835016835016834, 'mean_word_length': 2.297779540047581, 'pattern_counts': {'":': 0, '<': 58, '<?xml version=': 0, '>': 84, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5098046', 'n_tokens_mistral': 2476, 'n_tokens_neox': 2458, 'n_words': 515}