{"size": 2420, "ext": "js", "max_stars_repo_path": "apps/frontend/assets/src/omg-2fa-modal/Disable2FaModal.js", "max_stars_repo_name": "AndonMitev/EWallet", "max_stars_repo_stars_event_min_datetime": "2018-02-28T07:38:44.000Z", "max_stars_repo_stars_event_max_datetime": "2020-05-27T23:09:55.000Z", "max_issues_repo_path": "apps/frontend/assets/src/omg-2fa-modal/Disable2FaModal.js", "max_issues_repo_name": "AndonMitev/EWallet", "max_issues_repo_issues_event_min_datetime": "2018-02-28T12:05:20.000Z", "max_issues_repo_issues_event_max_datetime": "2020-05-22T08:34:38.000Z", "max_forks_repo_path": "apps/frontend/assets/src/omg-2fa-modal/Disable2FaModal.js", "max_forks_repo_name": "AndonMitev/EWallet", "max_forks_repo_forks_event_min_datetime": "2018-02-28T10:57:06.000Z", "max_forks_repo_forks_event_max_datetime": "2020-05-27T23:10:38.000Z"}
{"max_stars_count": 322, "max_issues_count": 643, "max_forks_count": 63, "avg_line_length": 22.4074074074, "max_line_length": 64, "alphanum_fraction": 0.6214876033}
import React, { useState } from 'react'
import { useDispatch } from 'react-redux'
import PropTypes from 'prop-types'
import styled from 'styled-components'
import { withRouter } from 'react-router-dom'

import Modal from '../omg-modal'
import { disable2Fa } from '../omg-2fa/action'
import { Input, Button, Icon } from '../omg-uikit'

const Disable2FaModalContainer = styled.div`
  padding: 50px;
  text-align: center;
  width: 450px;
  position: relative;
  i {
    position: absolute;
    top: 15px;
    right: 15px;
    cursor: pointer;
  }

  input {
    text-align: center;
    font-size: 18px;
  }

  button {
    margin-top: 30px;
  }
  h4 {
    margin-bottom: 10px;
  }
  .backup-container {
    text-align: center;
    p {
      margin: 20px 0;
    }
  }
  .backup-item {
    padding: 5px;
    display: inline-block;
    width: 110px;
  }
`

function DisableTwoFaModal ({ open, onRequestClose, history }) {
  const dispatch = useDispatch()
  const [passcode, setPasscode] = useState('')
  const [submitStatus, setSubmitStatus] = useState('DEFAULT')
  const afterClose = () => {
    setPasscode('')
    setSubmitStatus('DEFAULT')
  }

  const onSubmit = async e => {
    e.preventDefault()
    setSubmitStatus('LOADING')
    const result = await disable2Fa(passcode)(dispatch)
    if (result.data) {
      setSubmitStatus('SUCCESS')
      onRequestClose()
      history.push('/login')
    } else {
      setSubmitStatus('FAILED')
    }
  }

  const renderDisableSection = () => {
    return (
      <form onSubmit={onSubmit}>
        <h4>Disable Two Factor Authentication</h4>
        <Input
          value={passcode}
          onChange={e => setPasscode(e.target.value)}
          normalPlaceholder='2fa token...'
          autoFocus
          maxLength={6}
        />
        <Button loading={submitStatus === 'LOADING'}>
          Disable Two Factor Authentication<br />
          ( This Will Log You Out )
        </Button>
      </form>
    )
  }

  return (
    <Modal
      isOpen={open}
      onRequestClose={onRequestClose}
      onAfterClose={afterClose}
    >
      <Disable2FaModalContainer>
        <Icon name='Close' onClick={onRequestClose} />
        {renderDisableSection()}
      </Disable2FaModalContainer>
    </Modal>
  )
}

DisableTwoFaModal.propTypes = {
  open: PropTypes.bool,
  onRequestClose: PropTypes.func,
  history: PropTypes.object
}
export default withRouter(DisableTwoFaModal)
