FormOAuth.tsx

import React, { useCallback, useState } from 'react'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import { useClient } from 'cozy-client'
import './auth.scss'
import { Konnector } from 'models'
import { OAuthWindow } from 'cozy-harvest-lib/dist/components/OAuthWindow'
import Button from '@material-ui/core/Button'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import StyledBlackSpinner from 'components/CommonKit/Spinner/StyledBlackSpinner'
import { getPartnerPicto } from 'utils/picto'

interface FormOAuthProps {
  konnector: Konnector | null
  onSuccess: Function
  highlightedStyle?: boolean
}

const FormOAuth: React.FC<FormOAuthProps> = ({
  konnector,
  onSuccess,
  highlightedStyle = true,
}: FormOAuthProps) => {
  const IDLE = 'idle'
  const WAITING = 'waiting'

  const { t } = useI18n()
  const client = useClient()
  const [status, setStatus] = useState<string>(IDLE)

  const endOAuth = useCallback(() => {
    setStatus(IDLE)
  }, [])

  const startOAuth = useCallback(() => {
    setStatus(WAITING)
  }, [])

  const handleAccountId = useCallback(
    (accountId: string) => {
      endOAuth()
      onSuccess(accountId)
    },
    [endOAuth, onSuccess]
  )

  const handleOAuthCancel = useCallback(() => {
    endOAuth()
  }, [endOAuth])

  const icon = getPartnerPicto(
    konnector ? konnector.slug : '',
    highlightedStyle
  )
  const isWaiting = status === WAITING

  if (!konnector) {
    return null
  }
  return (
    <>
      <Button
        aria-label={t('auth.accessibility.button_connect')}
        onClick={startOAuth}
        disabled={isWaiting}
        classes={{
          root: `${
            highlightedStyle ? 'btn-highlight' : 'btn-secondary-negative'
          }`,
          label: 'text-18-bold',
        }}
      >
        <div className="authform-button-content">
          <div className="authform-button-content-icon">
            {isWaiting ? (
              <StyledBlackSpinner size={48} />
            ) : (
              <StyledIcon icon={icon} size={80} />
            )}
          </div>
          <div className="authform-button-text text-18-bold">
            <div>{t('auth.' + konnector.slug + '.connect.label1')}</div>
            <div>{t('auth.' + konnector.slug + '.connect.label2')}</div>
          </div>
        </div>
      </Button>
      {isWaiting && (
        <OAuthWindow
          client={client}
          konnector={konnector}
          redirectSlug={client.appMetadata.slug}
          onSuccess={handleAccountId}
          onCancel={handleOAuthCancel}
          t={t}
        />
      )}
    </>
  )
}

export default FormOAuth