Gh 1767/bugfix/target blank links crash opera

_locales/en/messages.json

@@ -2235,6 +2235,23 @@
 	"cliqz_feature_status_off": {
 		"message": "Off"
 	},
+	"create_account_form_legal_consent_checkbox_label": {
+		"message": "I accept the $LINK_TERMS_START$Terms and Conditions$LINK_END$, the $LINK_LICENSE_START$Public License Agreement$LINK_END$, and consent to data practices found in the $LINK_PRIVACY_START$Privacy Policy$LINK_END$.",
+		"placeholders": {
+			"link_end": {
+				"content": "</a>"
+			},
+			"link_license_start": {
+				"content": "<a target=\"_blank\" href=\"https://www.mozilla.org/en-US/MPL/2.0/\" rel=\"noopener noreferrer\">"
+			},
+			"link_privacy_start": {
+				"content": "<a target=\"_blank\" href=\"https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy/\" rel=\"noopener noreferrer\">"
+			},
+			"link_terms_start": {
+				"content": "<a target=\"_blank\" href=\"https://www.ghostery.com/about-ghostery/ghostery-terms-and-conditions/\" rel=\"noopener noreferrer\">"
+			}
+		}
+	},
 	"ghostery_rewards": {
 		"message": "ghostery rewards"
 	},
@@ -2246,23 +2263,5 @@
 	},
 	"unknown_description": {
 		"message": "Unknown trackers scrubbed by Anti-Tracking"
-	},
-	"i_accept_the": {
-		"message": "I accept the"
-	},
-	"terms_and_conditions": {
-		"message": "Terms and Conditions"
-	},
-	"and": {
-		"message": "and"
-	},
-	"public_license_agreement": {
-		"message": "Public License Agreement"
-	},
-	"and_consent_to_data_practices_found_in_the": {
-		"message": "and consent to data practices found in the"
-	},
-	"privacy_policy": {
-		"message": "Privacy Policy"
 	}
 }

app/panel/components/CreateAccount.jsx

@@ -15,8 +15,8 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import ClassNames from 'classnames';
 import RSVP from 'rsvp';
-import PanelToTabLink from './BuildingBlocks/PanelToTabLink';
 import { validateEmail, validateConfirmEmail, validatePassword } from '../utils/utils';
+import I18nWithLink from '../../shared-components/I18nWithLink';
 
 /**
  * @class Implement Create Account view which opens
@@ -134,38 +134,6 @@ class CreateAccount extends React.Component {
 		});
 	}
 
-	/**
-	 * Render helper for the legal consent checkbox label
-	 * @returns {ReactElement}	React element representing the legal consent checkbox label
-	 * @private
-	 */
-	_renderLegalConsentCheckboxLabel() {
-		const termsUrl = 'https://www.ghostery.com/about-ghostery/ghostery-terms-and-conditions';
-		const licenseUrl = 'https://www.mozilla.org/en-US/MPL/2.0/';
-		const privacyUrl = 'https://www.ghostery.com/about-ghostery/browser-extension-privacy-policy';
-
-		// Using this ungainly monstrosity instead of our svelte frenemy dangerouslySetInnerHTML
-		// because the latter breaks Opera, which requires panel-to-tab links to be opened using chrome.tabs.create.
-		// See GH-1767 for more details.
-		// ~ Ilya, July 2019
-		return (
-			<span>
-				{t('i_accept_the')}
-				&#8200;
-				<PanelToTabLink href={termsUrl} label={t('terms_and_conditions')} />
-				&#8200;
-				{t('and')}
-				&#8200;
-				<PanelToTabLink href={licenseUrl} label={t('public_license_agreement')} />
-				&#8200;
-				{t('and_consent_to_data_practices_found_in_the')}
-				&#8200;
-				<PanelToTabLink href={privacyUrl} label={t('privacy_policy')} />
-				.
-			</span>
-		);
-	}
-
 	/**
 	 * Render Create Account panel.
 	 * @return {ReactComponent}   ReactComponent instance
@@ -247,7 +215,10 @@ class CreateAccount extends React.Component {
 								<div className="small-12 columns">
 									<div id="create-account-legal-consent-checkbox" className={(legalConsentNotCheckedError ? 'checkbox-error' : '')}>
 										<input id="legalConsentChecked" name="legalConsentChecked" type="checkbox" checked={legalConsentChecked} onChange={this.handleCheckboxChange} />
-										<label htmlFor="legalConsentChecked">{this._renderLegalConsentCheckboxLabel()}</label>
+										{/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+										<label htmlFor="legalConsentChecked">
+											<I18nWithLink value="create_account_form_legal_consent_checkbox_label" />
+										</label>
 									</div>
 								</div>
 							</div>

app/shared-components/I18nWithLink/I18nWithLink.jsx

@@ -0,0 +1,42 @@
+import React, { Component, createRef } from 'react';
+import PropTypes from 'prop-types';
+
+import { sendMessage } from '../../panel/utils/msg';
+
+class I18nWithLink extends Component {
+	constructor(props) {
+		super(props);
+		this.containerRef = createRef();
+	}
+
+	componentDidMount() {
+		const { current: { children } } = this.containerRef;
+		for (let i = 0; i < children.length; i++) {
+			const ele = children[i];
+			if (ele.nodeName.toLowerCase() !== 'a') {
+				return;
+			}
+			ele.onclick = (e) => {
+				e.preventDefault();
+				const { href } = e.target;
+				sendMessage('openNewTab', {
+					url: href,
+					become_active: true,
+				});
+			};
+		}
+	}
+
+	render() {
+		const { value } = this.props;
+		return (
+			<span ref={this.containerRef} dangerouslySetInnerHTML={{ __html: t(value) }} />
+		);
+	}
+}
+
+export default I18nWithLink;
+
+I18nWithLink.propTypes = {
+	value: PropTypes.string.isRequired,
+};

app/shared-components/I18nWithLink/index.js

@@ -0,0 +1,16 @@
+/**
+ * Point of entry index.js file for I18nWithLink
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2019 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import I18nWithLink from './I18nWithLink';
+
+export default I18nWithLink;