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

@@ -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>
       );

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"

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;

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
   ;