From a32002eabdd784a3fe904ddb07480b0405b5f714 Mon Sep 17 00:00:00 2001
From: Tom Hacohen <tom@stosb.com>
Date: Sun, 17 Dec 2017 02:24:07 +0000
Subject: [PATCH] Replace the a tag with an ExternalLink component.

This lets us handle behaviour more consistently, for example by opening
external links in a new tab.
---
 src/LoginGate.tsx            | 7 +++++--
 src/components/LoginForm.tsx | 4 +++-
 src/widgets/ExternalLink.tsx | 8 ++++++++
 src/widgets/List.tsx         | 6 ++++--
 4 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 src/widgets/ExternalLink.tsx

diff --git a/src/LoginGate.tsx b/src/LoginGate.tsx
index 32fde25..6321e3f 100644
--- a/src/LoginGate.tsx
+++ b/src/LoginGate.tsx
@@ -3,6 +3,7 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router';
 
 import Container from './widgets/Container';
+import ExternalLink from './widgets/ExternalLink';
 import SyncGate from './SyncGate';
 import LoginForm from './components/LoginForm';
 
@@ -49,8 +50,10 @@ class Root extends React.PureComponent {
           />
           <hr style={style.divider}/>
           <ul>
-            <li><a style={style.isSafe} href={C.faq + '#web-client'}>Is the web client safe to use?</a></li>
-            <li><a style={style.isSafe} href={C.sourceCode}>Source code</a></li>
+            <li><ExternalLink style={style.isSafe} href={C.faq + '#web-client'}>
+                Is the web client safe to use?
+            </ExternalLink></li>
+            <li><ExternalLink style={style.isSafe} href={C.sourceCode}>Source code</ExternalLink></li>
           </ul>
         </Container>
       );
diff --git a/src/components/LoginForm.tsx b/src/components/LoginForm.tsx
index 5352e55..88dd487 100644
--- a/src/components/LoginForm.tsx
+++ b/src/components/LoginForm.tsx
@@ -3,6 +3,8 @@ import RaisedButton from 'material-ui/RaisedButton';
 import TextField from 'material-ui/TextField';
 import Toggle from 'material-ui/Toggle';
 
+import ExternalLink from '../widgets/ExternalLink';
+
 import { getPalette } from '../App';
 
 import * as C from '../constants';
@@ -148,7 +150,7 @@ class LoginForm extends React.PureComponent {
             onChange={this.handleInputChange}
           />
           <div style={styles.forgotPassword}>
-            <a href={C.forgotPassword}>Forgot password?</a>
+            <ExternalLink href={C.forgotPassword}>Forgot password?</ExternalLink>
           </div>
           <TextField
             type="password"
diff --git a/src/widgets/ExternalLink.tsx b/src/widgets/ExternalLink.tsx
new file mode 100644
index 0000000..904c65c
--- /dev/null
+++ b/src/widgets/ExternalLink.tsx
@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { pure } from 'recompose';
+
+export const ExternalLink = pure((props: any) => (
+  <a target="_blank" {...props} />
+));
+
+export default ExternalLink;
diff --git a/src/widgets/List.tsx b/src/widgets/List.tsx
index 7d99942..303a5cb 100644
--- a/src/widgets/List.tsx
+++ b/src/widgets/List.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
 import { pure } from 'recompose';
 
+import ExternalLink from './ExternalLink';
+
 import './List.css';
 
 export const ListItemRaw = pure((_props: any) => {
@@ -14,9 +16,9 @@ export const ListItemRaw = pure((_props: any) => {
 
   const inner = href ?
     (
-      <a href={href} className="ListItem-href">
+      <ExternalLink href={href} className="ListItem-href">
         {children}
-      </a>
+      </ExternalLink>
     ) :
     children
   ;