Show the country when securing the connection

2 files changed, 42 insertions, 8 deletions

diff --git a/app/components/Connect.js b/app/components/Connect.js
index 3625022634..5f5af30955 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -2,7 +2,7 @@
 
 import moment from 'moment';
 import React, { Component } from 'react';
-import { If, Then, Else } from 'react-if';
+import { If, Then } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { BackendError } from '../lib/backend';
 import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
@@ -109,7 +109,7 @@ export default class Connect extends Component {
     case 'disconnected': isDisconnected = true; break;
     }
 
-    const { city, country } = isConnected
+    const { city, country } = isConnecting || isConnected
       ? serverInfo
       : { city: '\u2003', country: '\u2002' };
     const ip = isConnected
@@ -131,6 +131,14 @@ export default class Connect extends Component {
           : './assets/images/location-marker-unsecure.svg' } />
     */
 
+    let ipComponent = undefined;
+    if (isConnected || isDisconnected) {
+      if (this.state.showCopyIPMessage) {
+        ipComponent = <span>{ 'IP copied to clipboard!' }</span>;
+      } else {
+        ipComponent = <span>{ ip }</span>;
+      }
+    }
     return (
       <div className="connect">
         <div className="connect__map">
@@ -186,10 +194,7 @@ export default class Connect extends Component {
             */ }
 
             <div className={ this.ipAddressClass() } onClick={ this.onIPAddressClick.bind(this) }>
-              <If condition={ this.state.showCopyIPMessage }>
-                <Then><span>{ 'IP copied to clipboard!' }</span></Then>
-                <Else><span>{ ip }</span></Else>
-              </If>
+              { ipComponent }
             </div>
           </div>
 
diff --git a/test/components/Connect.spec.js b/test/components/Connect.spec.js
index 9c280c7308..62da014cd7 100644
--- a/test/components/Connect.spec.js
+++ b/test/components/Connect.spec.js
@@ -35,7 +35,27 @@ describe('components/Connect', () => {
     expect(disconnectButton.text()).to.equal('Disconnect');
   });
 
-  it('shows the connection location information when connected', () => {
+  it('shows the connection location when connecting', () => {
+    const component = renderConnecting({
+      getServerInfo: (_s) => ({
+        address: '',
+        name: '',
+        location: [0, 0],
+        country: 'norway',
+        city: 'oslo',
+      }),
+    }, {
+      clientIp: '185.65.132.102',
+    });
+    const countryAndCity = component.find('.connect__status-location');
+    const ipAddr = component.find('.connect__status-ipaddress');
+
+    expect(countryAndCity.text()).to.contain('norway');
+    expect(countryAndCity.text()).not.to.contain('oslo');
+    expect(ipAddr.text()).to.be.empty;
+  });
+
+  it('shows the connection location when connected', () => {
     const component = renderConnected({
       getServerInfo: (_s) => ({
         address: '',
@@ -55,7 +75,7 @@ describe('components/Connect', () => {
     expect(ipAddr.text()).to.contain('185.65.132.102');
   });
 
-  it('shows the connection location information when disconnected', () => {
+  it('shows the connection location when disconnected', () => {
     const component = renderNotConnected({
       getServerInfo: (_s) => ({
         address: '',
@@ -110,6 +130,15 @@ function renderNotConnected(customProps, customConnectionProps) {
   return renderWithProps(props);
 }
 
+function renderConnecting(customProps, customConnectionProps) {
+  const connection = Object.assign({}, defaultConnection, {
+    status: 'connecting',
+  }, customConnectionProps);
+
+  const props = Object.assign({}, customProps, {connection});
+  return renderWithProps(props);
+}
+
 function renderConnected(customProps, customConnectionProps) {
   const connection = Object.assign({}, defaultConnection, {
     status: 'connected',