import React from 'react' ; import { Box , Text , Link } from 'design' ; import { Auth2faType } from 'shared/services' ; export default function TwoFAData ( { auth2faType , qr , submitBtnText } ) { const imgSrc = `data:image/png;base64,${ qr }` ; if ( auth2faType === 'otp' ) { return ( < Box width = "168px" > < Text typography = "paragraph2" mb = { 3 } > Scan the QR Code with any authenticator app and enter the generated code . < /Text> < img width = "152px" src = { imgSrc } style = { { border : '8px solid' } } /> < Text typography = "paragraph2" color = "text.secondary" > We recommend { ' ' } < Link href = "https://authy.com/download/" target = "_blank" > Authy < /Link> . < /Text> < /Box>); } if ( auth2faType === 'u2f' ) { return ( < Box width = "168px" > < Text typography = "h5" mb = "2" > Insert your hardware key < /Text> < Text typography = "paragraph2" mb = { 3 } > Press the button on the hardware key after you press the { ' ' } < Text as = "span" caps bold > { submitBtnText } < /Text>{' '} button . < /Text> < /Box>); } return null ; } type Props = { qr : string ; auth2faType : Auth2faType ; submitBtnText : string ; } ;