From 701c610bdfc59582e9234e8e8aa04e9c02bc6b03 Mon Sep 17 00:00:00 2001
From: CPatchane <code@patchane.com>
Date: Mon, 6 May 2019 11:30:33 +0200
Subject: [PATCH] fix(harvest): Use the same 2FA Modal for Trigger
 Manager/Launcher

---
 .../src/components/TriggerLauncher.jsx        |  20 ++-
 .../src/components/TwoFA/Modal.jsx            | 121 ------------------
 2 files changed, 15 insertions(+), 126 deletions(-)
 delete mode 100644 packages/cozy-harvest-lib/src/components/TwoFA/Modal.jsx

diff --git a/packages/cozy-harvest-lib/src/components/TriggerLauncher.jsx b/packages/cozy-harvest-lib/src/components/TriggerLauncher.jsx
index cfcd639260..1722cb0ccd 100644
--- a/packages/cozy-harvest-lib/src/components/TriggerLauncher.jsx
+++ b/packages/cozy-harvest-lib/src/components/TriggerLauncher.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 
 import { withMutations } from 'cozy-client'
 
-import TwoFAModal from './TwoFA/Modal'
+import TwoFAForm from './TwoFAForm'
 import { accountsMutations } from '../connections/accounts'
 import { triggersMutations } from '../connections/triggers'
 
@@ -17,6 +17,7 @@ const TWO_FA_REQUEST = 'TWO_FA_REQUEST'
 const TWO_FA_MISMATCH = 'TWO_FA_MISMATCH'
 const PENDING = 'PENDING'
 const SUCCESS = 'SUCCESS'
+const RUNNING_TWOFA = 'RUNNING_TWOFA'
 
 /**
  * Trigger Launcher renders its children with following props:
@@ -46,6 +47,7 @@ export class TriggerLauncher extends Component {
 
     this.launch = this.launch.bind(this)
     this.handleTwoFAModalDismiss = this.handleTwoFAModalDismiss.bind(this)
+    this.handle2FACode = this.handle2FACode.bind(this)
     this.handleError = this.handleError.bind(this)
     this.handleSuccess = this.handleSuccess.bind(this)
     this.handleLoginSuccess = this.handleLoginSuccess.bind(this)
@@ -77,6 +79,11 @@ export class TriggerLauncher extends Component {
     this.setState({ status: TWO_FA_MISMATCH, showTwoFAModal: true })
   }
 
+  handle2FACode(code) {
+    this.setState({ status: RUNNING_TWOFA })
+    this.konnectorJob.sendTwoFACode(code)
+  }
+
   async launch() {
     const { trigger } = this.props
     const { client } = this.context
@@ -95,7 +102,7 @@ export class TriggerLauncher extends Component {
 
   render() {
     const { showTwoFAModal, status } = this.state
-    const { children, submitting } = this.props
+    const { account, children, konnector, submitting } = this.props
 
     return (
       <div>
@@ -104,10 +111,13 @@ export class TriggerLauncher extends Component {
           running: ![ERRORED, IDLE, SUCCESS].includes(status) || submitting
         })}
         {showTwoFAModal && (
-          <TwoFAModal
+          <TwoFAForm
+            account={account}
+            konnector={konnector}
             dismissAction={this.handleTwoFAModalDismiss}
-            hasError={status === TWO_FA_MISMATCH}
-            onSubmit={this.konnectorJob.sendTwoFACode}
+            handleSubmitTwoFACode={this.handle2FACode}
+            submitting={status === RUNNING_TWOFA}
+            retryAsked={status === TWO_FA_MISMATCH}
             into="coz-harvest-modal-place"
           />
         )}
diff --git a/packages/cozy-harvest-lib/src/components/TwoFA/Modal.jsx b/packages/cozy-harvest-lib/src/components/TwoFA/Modal.jsx
deleted file mode 100644
index 0cc8035d31..0000000000
--- a/packages/cozy-harvest-lib/src/components/TwoFA/Modal.jsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import React, { PureComponent } from 'react'
-import PropTypes from 'prop-types'
-
-import { withMutations } from 'cozy-client'
-import Modal, { ModalDescription, ModalHeader } from 'cozy-ui/react/Modal'
-import Text, { SubTitle, Caption } from 'cozy-ui/react/Text'
-import { translate } from 'cozy-ui/react/I18n'
-import Button from 'cozy-ui/react/Button'
-import Field from 'cozy-ui/react/Field'
-import AppIcon from 'cozy-ui/react/AppIcon'
-
-import accounts from '../../helpers/accounts'
-import accountsMutations from '../../connections/accounts'
-
-const IDLE = 'IDLE'
-const ERRORED = 'ERRORED'
-const SUBMITTING = 'SUBMITTING'
-
-export class TwoFAModal extends PureComponent {
-  constructor(props) {
-    super(props)
-    this.state = { status: IDLE, twoFACode: '' }
-    this.handleChange = this.handleChange.bind(this)
-    this.handleSubmit = this.handleSubmit.bind(this)
-    this.fetchIcon = this.fetchIcon.bind(this)
-  }
-
-  componentDidUpdate() {
-    const { hasError } = this.props
-    if (hasError) {
-      this.setState({
-        status: ERRORED
-      })
-    }
-  }
-
-  handleChange(e) {
-    this.setState({ twoFACode: e.currentTarget.value })
-  }
-
-  async handleSubmit(event) {
-    event.preventDefault()
-
-    this.setState({
-      status: SUBMITTING
-    })
-
-    const { onSubmit } = this.props
-    const { twoFACode } = this.state
-
-    onSubmit(twoFACode)
-  }
-
-  fetchIcon() {
-    const { client } = this.context
-    const { konnector } = this.props
-    return client.stackClient.getIconURL({
-      type: 'konnector',
-      slug: konnector.slug
-    })
-  }
-
-  render() {
-    const { account, dismissAction, hasError, t } = this.props
-    const { status, twoFACode } = this.state
-    const submitting = status === SUBMITTING
-
-    return (
-      <Modal
-        dismissAction={dismissAction}
-        mobileFullscreen
-        closable
-        containerClassName="u-pos-absolute"
-        className="u-mt-3"
-        size="xsmall"
-      >
-        <ModalHeader>
-          <AppIcon fetchIcon={this.fetchIcon} className="u-mah-3 u-ml-1" />
-        </ModalHeader>
-        <ModalDescription>
-          <form onSubmit={this.handleSubmit}>
-            <SubTitle className="u-mb-1 u-mt-half u-ta-center">
-              {t(`twoFAForm.title.${accounts.getTwoFACodeProvider(account)}`)}
-            </SubTitle>
-            <Text>
-              {t(`twoFAForm.desc.${accounts.getTwoFACodeProvider(account)}`)}
-            </Text>
-            <Field
-              className="u-mt-0 u-mb-0"
-              value={twoFACode}
-              onChange={this.handleChange}
-              autoComplete="off"
-              label={t('twoFAForm.code.label')}
-              size="medium"
-              error={hasError}
-              fullwidth
-            />
-            {hasError && (
-              <Caption className="u-error u-fs-italic u-mt-half">
-                {t('twoFAForm.retry')}
-              </Caption>
-            )}
-            <Button
-              className="u-mt-1"
-              label={t('twoFAForm.CTA')}
-              busy={submitting}
-              disabled={submitting || !twoFACode}
-              extension="full"
-            />
-          </form>
-        </ModalDescription>
-      </Modal>
-    )
-  }
-}
-
-TwoFAModal.contextTypes = {
-  client: PropTypes.object
-}
-
-export default translate()(withMutations(accountsMutations)(TwoFAModal))