feat(Translations): FormattedHTMLMessage -> SanitizedFormattedHTMLMes…

…sage
blockchain · May 30, 2018 · 44290f5 · 44290f5
1 parent e6a4437
commit 44290f5
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 31 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/BuySell/EmptyOrderHistory.js b/packages/blockchain-wallet-v4-frontend/src/components/BuySell/EmptyOrderHistory.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 import { Image, Link, Text, TextGroup } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
@@ -34,7 +34,7 @@ class EmptyOrderHistoryContainer extends React.PureComponent {
           </Header>
           <TextGroup inline>
             <Text size='18px' weight={300}>
-              <FormattedHTMLMessage id='scenes.buysell.empty.content.goto' defaultMessage='To get started, go to ' />
+              <FormattedMessage id='scenes.buysell.empty.content.goto' defaultMessage='To get started, go to ' />
             </Text>
             <Link size='18px' onClick={() => changeTab('buy')}>
               <FormattedMessage id='scenes.buysell.empty.content.buy' defaultMessage='buy ' />

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/DataError/index.js b/packages/blockchain-wallet-v4-frontend/src/components/DataError/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
+import { FormattedMessage } from 'react-intl'
 import { Image, Link, Text, TextGroup } from 'blockchain-info-components'
 
 const Wrapper = styled.div`
@@ -34,13 +34,13 @@ class DataErrorContainer extends React.PureComponent {
           </Header>
           <TextGroup inline>
             <Text size='18px' weight={300}>
-              <FormattedHTMLMessage id='components.dataerror.body' defaultMessage='Please ' />
+              <FormattedMessage id='components.dataerror.body' defaultMessage='Please ' />
             </Text>
             <Link size='18px' onClick={this.props.onClick}>
               <FormattedMessage id='components.dataerror.click' defaultMessage='click here' />
             </Link>
             <Text size='18px' weight={300}>
-              <FormattedHTMLMessage id='components.dataerror.refresh' defaultMessage=' to refresh.' />
+              <FormattedMessage id='components.dataerror.refresh' defaultMessage=' to refresh.' />
             </Text>
           </TextGroup>
         </Empty>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/ImportBtcAddress/template.js b/packages/blockchain-wallet-v4-frontend/src/modals/ImportBtcAddress/template.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import styled from 'styled-components'
 import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'blockchain-info-components'
-import { FormattedMessage, FormattedHTMLMessage } from 'react-intl'
+import SanitizedFormattedHTMLMessage from 'components/SanitizedFormattedHTMLMessage'
+import { FormattedMessage } from 'react-intl'
 import { Field, reduxForm } from 'redux-form'
 import { RadioButton, Form } from 'components/Form'
 import ImportInternalBtcAddress from './ImportInternalBtcAddress'
@@ -20,6 +21,7 @@ const Title = styled.div`
 const RadioContainer = styled.div`
   font-size: 12px;
   margin-bottom: 10px;
+  label > span > span { font-weight: 500; }
 `
 
 const ImportBtcAddress = (props) => {
@@ -38,12 +40,12 @@ const ImportBtcAddress = (props) => {
             </Title>
             <RadioContainer>
               <Field name='address-type' value='internal' props={{id: 'internal', value: 'internal'}} validate={[]} component={RadioButton}>
-                <FormattedHTMLMessage id='modals.importbtcaddress.generated_in_wallet' defaultMessage='Existing address generated in <span style="font-weight: bold;">this wallet</span>.' />
+                <SanitizedFormattedHTMLMessage id='modals.importbtcaddress.generated_in_wallet' defaultMessage='Existing address generated in <span>this wallet</span>.' />
               </Field>
             </RadioContainer>
             <RadioContainer>
               <Field name='address-type' value='external' props={{id: 'external', value: 'external'}} validate={[]} component={RadioButton}>
-                <FormattedHTMLMessage id='modals.importbtcaddress.generated_outside_wallet' defaultMessage='Existing address generated <span style="font-weight: bold;">outside this wallet</span>.' />
+                <SanitizedFormattedHTMLMessage id='modals.importbtcaddress.generated_outside_wallet' defaultMessage='Existing address generated <span>outside this wallet</span>.' />
               </Field>
             </RadioContainer>
             { isAddressInternal && <ImportInternalBtcAddress /> }

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/AuthorizeLogin/template.error.js b/packages/blockchain-wallet-v4-frontend/src/scenes/AuthorizeLogin/template.error.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FormattedHTMLMessage } from 'react-intl'
 import { Icon, Text } from 'blockchain-info-components'
+import SanitizedFormattedHTMLMessage from 'components/SanitizedFormattedHTMLMessage'
 
 const Wrapper = styled.div`
   display: flex;
@@ -20,7 +20,7 @@ const Error = props => {
     <Wrapper>
       <Icon name='alert-filled' color='red' size='40px' />
       <ErrorText size='16px' weight={300} color='red' style={{ 'margin-top': '25px' }}>
-        <FormattedHTMLMessage id='scenes.authorizelogin.loading' defaultMessage='<span>Uh Oh. Something went wrong. Error: </span> {error}' values={{error: props.value}} />
+        <SanitizedFormattedHTMLMessage id='scenes.authorizelogin.loading' defaultMessage='<span>Uh Oh. Something went wrong. Error: </span> {error}' values={{error: props.value}} />
       </ErrorText>
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/Reset2FAToken/template.error.js b/packages/blockchain-wallet-v4-frontend/src/scenes/Reset2FAToken/template.error.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FormattedHTMLMessage } from 'react-intl'
 import { Icon, Text } from 'blockchain-info-components'
+import SanitizedFormattedHTMLMessage from 'components/SanitizedFormattedHTMLMessage'
 
 const Wrapper = styled.div`
   display: flex;
@@ -20,7 +20,7 @@ const Error = props => {
     <Wrapper>
       <Icon name='alert-filled' color='red' size='40px' />
       <ErrorText size='16px' weight={300} color='red' style={{ 'margin-top': '25px' }}>
-        <FormattedHTMLMessage id='scenes.reset2fatoken.error' defaultMessage='<span>Uh Oh. Something went wrong. Error: </span> {error}' values={{error: props.value}} />
+        <SanitizedFormattedHTMLMessage id='scenes.reset2fatoken.error' defaultMessage='<span>Uh Oh. Something went wrong. Error: </span> {error}' values={{error: props.value}} />
       </ErrorText>
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/VerifyEmailToken/template.error.js b/packages/blockchain-wallet-v4-frontend/src/scenes/VerifyEmailToken/template.error.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FormattedHTMLMessage } from 'react-intl'
 import { Icon, Text } from 'blockchain-info-components'
+import SanitizedFormattedHTMLMessage from 'components/SanitizedFormattedHTMLMessage'
 
 const Wrapper = styled.div`
   display: flex;
@@ -20,7 +20,7 @@ const Error = props => {
     <Wrapper>
       <Icon name='alert-filled' color='red' size='40px' />
       <ErrorText size='16px' weight={300} color='red' style={{ 'margin-top': '25px' }}>
-        <FormattedHTMLMessage id='scenes.verifyemailtoken.error' defaultMessage='<span>Uh Oh. Something went wrong. Error: </span> {error}' values={{error: props.value}} />
+        <SanitizedFormattedHTMLMessage id='scenes.verifyemailtoken.error' defaultMessage='<span>Uh Oh. Something went wrong. Error: </span> {error}' values={{error: props.value}} />
       </ErrorText>
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/VerifyEmailToken/template.success.js b/packages/blockchain-wallet-v4-frontend/src/scenes/VerifyEmailToken/template.success.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import styled from 'styled-components'
-import { FormattedHTMLMessage } from 'react-intl'
 import { Image, Text } from 'blockchain-info-components'
+import SanitizedFormattedHTMLMessage from 'components/SanitizedFormattedHTMLMessage'
 
 const Wrapper = styled.div`
   display: flex;
@@ -20,7 +20,7 @@ const Success = props => {
     <Wrapper>
       <Image name='blue-logo' width='50px' height='50px' />
       <SuccessText size='16px' weight={300} color='success' style={{ 'margin-top': '25px' }}>
-        <FormattedHTMLMessage id='scenes.verifyemailtoken.success' defaultMessage="You've succesfully verified your email address! <span>Return to the previous tab to view your wallet.</span>" />
+        <SanitizedFormattedHTMLMessage id='scenes.verifyemailtoken.success' defaultMessage="You've succesfully verified your email address! <span>Return to the previous tab to view your wallet.</span>" />
       </SuccessText>
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/tools/generateDefaultLocale.js b/packages/blockchain-wallet-v4-frontend/tools/generateDefaultLocale.js
@@ -9,7 +9,7 @@ const rootPath = path.resolve(`${__dirname}/../src`)
 const outputPath = rootPath + '/assets/locales'
 const outputFilename = 'en.json'
 // const regexIntlImport = new RegExp(/.+from['" ]+react-intl['" ]+/)
-const regexIntlComponent = new RegExp(/(<FormattedMessage([^>])+\/>|<FormattedHTMLMessage(.+)+\/>)/, 'gm')
+const regexIntlComponent = new RegExp(/(<FormattedMessage([^>])+\/>|<SanitizedFormattedHTMLMessage(.+)+\/>)/, 'gm')
 const regexIntlId = new RegExp(/id='([^']+)'/)
 const regexIntlMessage = new RegExp(/defaultMessage='([^']+)'|defaultMessage="(.+)"/)
 
@@ -52,8 +52,6 @@ export const toKeyValue = element => {
   const message = element.match(regexIntlMessage)
   if (isNil(id) && isNil(message)) {
     console.warn('Invalid FormattedMessage (Dynamic): ' + element)
-  } else if (element.includes('FormattedHTMLMessage')) {
-    console.log('Invalid FormattedMessage (HTML Injection): ' + element)
   } else if (isNil(id)) {
     console.log('Invalid ID: ' + element)
   } else if (isNil(message)) {