<commit_before>// @flow

import React from "react";
import { createFragmentContainer, graphql, commitMutation } from 'react-relay/compat';
import DocumentTitle from 'react-document-title';
import { Link } from 'react-router';
import GraphQLErrors from 'app/constants/GraphQLErrors';
import Button from 'app/components/shared/Button';
import PageHeader from "app/components/shared/PageHeader";
import Panel from 'app/components/shared/Panel';
import Icon from "app/components/shared/Icon";

type ViewerType = {
  totp: ?{
    id: string
  }
};

type Props = {
  viewer: ViewerType,
  relay: Object
};

type State = {
  deletingTOTP: boolean,
  deletedTOTP: boolean
};

type TOTPDeleteReturnType = {
  totpDelete: {
    viewer: ViewerType
  }
};

class TwoFactorDelete extends React.PureComponent<Props, State> {
  state = {
    deletingTOTP: false,
    deletedTOTP: false
  };

  render() {
    return (
      <DocumentTitle title="Remove Two-Factor Authentication">
        <div className="container">
          <PageHeader>
            <PageHeader.Icon>
              <Icon
                icon="placeholder"
                style={{ width: 34, height: 34, marginTop: 3, marginLeft: 3 }}
              />
            </PageHeader.Icon>
            <PageHeader.Title>
              Remove Two-Factor Authentication
            </PageHeader.Title>
          </PageHeader>

          {this.renderCurrentStatus()}

          <Link
            className="blue hover-navy text-decoration-none hover-underline"
            to="/user/two-factor"
          >
            Back to Two-Factor Authentication Settings
          </Link>
        </div>
      </DocumentTitle>
    );
  }

  renderCurrentStatus() {
    if (this.state.deletedTOTP) {
      return this.renderDeletedStatus();
    }

    if (!this.props.viewer.totp) {
      return (
        <Panel className="mb4">
          <Panel.Section>
            Two-factor authentication is not currently activated on your account, so we canʼt deactivate it!
          </Panel.Section>
        </Panel>
      );
    }

    return (
      <Panel className="mb4">
        <Panel.Header>
          Deactivate Two-factor Authentication
        </Panel.Header>
        <Panel.Section>
          <p>Two-factor authentication is currently activated. We recommend keeping two-factor authentication activated to help secure your account.</p>
          <p>Removing two-factor authentication will take effect immediately. You may reconfigure two-factor authentication at any time.</p>
        </Panel.Section>
        <Panel.Footer>
          <Button
            theme="error"
            outline={true}
            onClick={this.handleDeleteClick}
            loading={this.state.deletingTOTP && "Removing two-factor authentication…"}
          >
            Remove Two-Factor Authentication
          </Button>
        </Panel.Footer>
      </Panel>
    );
  }

  renderDeletedStatus() {
    return (
      <Panel className="mb4">
        <Panel.Section>
          <p>Two-factor authentication has been removed from your account.</p>
        </Panel.Section>
        <Panel.Section>
          <p>Need to configure two-factor authentication again?</p>
          <Button
            theme="success"
            link="/user/two-factor/configure"
          >
            Configure Two-Factor Authentication
          </Button>
        </Panel.Section>
      </Panel>
    );
  }

  handleDeleteClick = () => {
    if (!this.props.viewer.totp) {
      throw new Error('TOTP Delete called without an active TOTP configuration (This should not be possible!)');
    }

    const totpId = this.props.viewer.totp.id;

    this.setState({ deletingTOTP: true }, () => {
      commitMutation(this.props.relay.environment, {
        mutation: graphql`
          mutation TwoFactorDeleteMutation($input: TOTPDeleteInput!) {
            totpDelete(input: $input) {
              clientMutationId
              viewer {
                totp {
                  id
                }
              }
            }
          }
        `,
        variables: { input: { id: totpId } },
        onCompleted: this.handleDeleteMutationComplete,
        onError: this.handleDeleteMutationError
      });
    });
  };

  handleDeleteMutationComplete = (mutationResult: TOTPDeleteReturnType) => {
    this.setState({
      deletingTOTP: false,
      deletedTOTP: !mutationResult.totpDelete.viewer.totp
    });
  };

  handleDeleteMutationError = (error) => {
    if (error) {
      if (error.source && error.source.type === GraphQLErrors.ESCALATION_ERROR) {
        location.reload();
      } else {
        // if (error.source && error.source.type === GraphQLErrors.RECORD_VALIDATION_ERROR) {
        //   this.setState({ errors: error.source.errors });
        // } else {
        alert(JSON.stringify(error));
      }
    }
  };
}

export default createFragmentContainer(TwoFactorDelete, {
  viewer: graphql`
    fragment TwoFactorDelete_viewer on Viewer {
      totp {
        id
      }
    }
  `
});
<commit_msg>Fix styles on deactivate screen<commit_after>// @flow

import React from "react";
import { createFragmentContainer, graphql, commitMutation } from 'react-relay/compat';
import DocumentTitle from 'react-document-title';
import { Link } from 'react-router';
import GraphQLErrors from 'app/constants/GraphQLErrors';
import Button from 'app/components/shared/Button';
import PageHeader from "app/components/shared/PageHeader";
import Panel from 'app/components/shared/Panel';
import Icon from "app/components/shared/Icon";

type ViewerType = {
  totp: ?{
    id: string
  }
};

type Props = {
  viewer: ViewerType,
  relay: Object
};

type State = {
  deletingTOTP: boolean,
  deletedTOTP: boolean
};

type TOTPDeleteReturnType = {
  totpDelete: {
    viewer: ViewerType
  }
};

class TwoFactorDelete extends React.PureComponent<Props, State> {
  state = {
    deletingTOTP: false,
    deletedTOTP: false
  };

  render() {
    return (
      <div style={{ padding: '20px' }}>
        <PageHeader>
          <PageHeader.Icon>
            <Icon
              icon="placeholder"
              style={{ width: 34, height: 34, marginTop: 3, marginLeft: 3 }}
            />
          </PageHeader.Icon>
          <PageHeader.Title>
            Remove Two-Factor Authentication
          </PageHeader.Title>
        </PageHeader>
        <div>
          {this.renderCurrentStatus()}
        </div>
      </div>
    );
  }

  renderCurrentStatus() {
    if (this.state.deletedTOTP) {
      return this.renderDeletedStatus();
    }

    if (!this.props.viewer.totp) {
      return (
        <Panel className="mb3">
          <Panel.Section>
            Two-factor authentication is not currently activated on your account, so we canʼt deactivate it!
          </Panel.Section>
        </Panel>
      );
    }

    return (
      <React.Fragment>
        <p>Two-factor authentication is currently activated. We recommend keeping two-factor authentication activated to help secure your account.</p>
        <p>Removing two-factor authentication will take effect immediately. You may reconfigure two-factor authentication at any time.</p>
      <Button
        className="col-12"
        theme="error"
        outline={true}
        onClick={this.handleDeleteClick}
        loading={this.state.deletingTOTP && "Removing two-factor authentication…"}
      >
        Remove Two-Factor Authentication
      </Button>
      </React.Fragment>
    );
  }

  renderDeletedStatus() {
    return (
      <Panel className="mb4">
        <Panel.Section>
          <p>Two-factor authentication has been removed from your account.</p>
        </Panel.Section>
        <Panel.Section>
          <p>Need to configure two-factor authentication again?</p>
          <Button
            theme="success"
            link="/user/two-factor/configure"
          >
            Configure Two-Factor Authentication
          </Button>
        </Panel.Section>
      </Panel>
    );
  }

  handleDeleteClick = () => {
    if (!this.props.viewer.totp) {
      throw new Error('TOTP Delete called without an active TOTP configuration (This should not be possible!)');
    }

    const totpId = this.props.viewer.totp.id;

    this.setState({ deletingTOTP: true }, () => {
      commitMutation(this.props.relay.environment, {
        mutation: graphql`
          mutation TwoFactorDeleteMutation($input: TOTPDeleteInput!) {
            totpDelete(input: $input) {
              clientMutationId
              viewer {
                totp {
                  id
                }
              }
            }
          }
        `,
        variables: { input: { id: totpId } },
        onCompleted: this.handleDeleteMutationComplete,
        onError: this.handleDeleteMutationError
      });
    });
  };

  handleDeleteMutationComplete = (mutationResult: TOTPDeleteReturnType) => {
    this.setState({
      deletingTOTP: false,
      deletedTOTP: !mutationResult.totpDelete.viewer.totp
    });
  };

  handleDeleteMutationError = (error) => {
    if (error) {
      if (error.source && error.source.type === GraphQLErrors.ESCALATION_ERROR) {
        location.reload();
      } else {
        // if (error.source && error.source.type === GraphQLErrors.RECORD_VALIDATION_ERROR) {
        //   this.setState({ errors: error.source.errors });
        // } else {
        alert(JSON.stringify(error));
      }
    }
  };
}

export default createFragmentContainer(TwoFactorDelete, {
  viewer: graphql`
    fragment TwoFactorDelete_viewer on Viewer {
      totp {
        id
      }
    }
  `
});

{'fraction_non_alphanumeric': 0.11233019853709508, 'fraction_numerical': 0.00219435736677116, 'mean_word_length': 2.135976408912189, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 91, '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': '1559024', 'n_tokens_mistral': 2758, 'n_tokens_neox': 2749, 'n_words': 602}