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