5 files changed, 39 insertions, 11 deletions
diff --git a/app/components/Connect.css b/app/components/Connect.css
index c74c0da03d..b28ba52674 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -23,7 +23,7 @@
 .connect__footer {
   display: flex;
   flex-direction: column;
-  padding: 42px 24px 24px;
+  padding: 0px 24px 24px;
 }
 
 .connect__row + .connect__row{
@@ -88,7 +88,8 @@
 
 .connect__status {
   padding: 0 24px;
-  margin-top: auto;
+  margin-top: 188px;
+  margin-bottom: 42px;
 }
 
 .connect__status-security {
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 3b7dc70adf..307002970d 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -21,12 +21,7 @@ export default class Connect extends Component {
     super();
 
     this.state = {
-      isFirstPass: true,
-      userLocation: {
-        location: [28.358744, -14.053676],
-        city: 'Corralejo',
-        country: 'Spain'
-      }
+      isFirstPass: true
     };
   }
 
@@ -53,7 +48,7 @@ export default class Connect extends Component {
     const displayLocation = this.displayLocation();
     const bounds = this.getBounds(displayLocation.location, altitude);
 
-    const userLocation = this.toLngLat(this.state.userLocation.location);
+    const userLocation = this.toLngLat(this.props.user.location);
     const serverLocation = this.toLngLat(serverInfo.location);
     const mapBounds = this.toLngLatBounds(bounds);
     const mapBoundsOptions = { offset: [0, -113], animate: !this.state.isFirstPass };
@@ -263,7 +258,8 @@ export default class Connect extends Component {
 
   displayLocation() {
     if(this.props.connect.status === ConnectionState.disconnected) {
-      return this.state.userLocation;
+      const { location, country, city } = this.props.user;
+      return { location, country, city };
     }
     
     const preferredServer = this.props.settings.preferredServer;
diff --git a/app/lib/backend-redux-actions.js b/app/lib/backend-redux-actions.js
index 3fff1e1127..89690da2fe 100644
--- a/app/lib/backend-redux-actions.js
+++ b/app/lib/backend-redux-actions.js
@@ -8,6 +8,10 @@ export default function mapBackendEventsToReduxActions(backend, store) {
     store.dispatch(connectActions.connectionChange({ clientIp }));
   };
 
+  const onUpdateLocation = (data) => {
+    store.dispatch(userActions.loginChange(data));
+  };
+
   const onConnecting = (serverAddress) => {
     store.dispatch(connectActions.connectionChange({ 
       status: ConnectionState.connecting,
@@ -52,6 +56,7 @@ export default function mapBackendEventsToReduxActions(backend, store) {
   };
 
   backend.on(Backend.EventType.updatedIp, onUpdateIp);
+  backend.on(Backend.EventType.updatedLocation, onUpdateLocation);
   backend.on(Backend.EventType.connecting, onConnecting);
   backend.on(Backend.EventType.connect, onConnect);
   backend.on(Backend.EventType.disconnect, onDisconnect);
diff --git a/app/lib/backend.js b/app/lib/backend.js
index 158828ab62..cf0c4258ae 100644
--- a/app/lib/backend.js
+++ b/app/lib/backend.js
@@ -4,7 +4,7 @@ import { EventEmitter } from 'events';
 import { servers } from '../config';
 import { ConnectionState as ReduxConnectionState } from '../enums';
 
-const EventType = Enum('connect', 'connecting', 'disconnect', 'login', 'logging', 'logout', 'updatedIp');
+const EventType = Enum('connect', 'connecting', 'disconnect', 'login', 'logging', 'logout', 'updatedIp', 'updatedLocation');
 const ConnectionState = Enum('disconnected', 'connecting', 'connected');
 
 /**
@@ -204,11 +204,34 @@ export default class Backend extends EventEmitter {
     // @TODO: Add disconnect call
   }
 
+  _fetchLocation() {
+    return fetch('https://freegeoip.net/json/').then((res) => {
+      return res.json();
+    });
+  }
+
   refreshIp() {
+    if(this._connStatus === ConnectionState.disconnected) {
+      this._fetchLocation().then((res) => {
+        console.log('Got location data: ', res);
+        const data = {
+          location: [ res.latitude, res.longitude ], // lat, lng
+          city: res.city,
+          country: res.country_name
+        };
+        this.emit(EventType.updatedLocation, data);
+        this.emit(EventType.updatedIp, res.ip);
+      }).catch((error) => {
+        console.log('Got error: ', error);
+      });
+      return;
+    }
+
     let ip = [];
     for(let i = 0; i < 4; i++) {
       ip.push(parseInt(Math.random() * 253 + 1));
     }
+
     this.emit(EventType.updatedIp, ip.join('.'));
   }
 }
diff --git a/app/reducers/user.js b/app/reducers/user.js
index e198ee4c26..15685034b8 100644
--- a/app/reducers/user.js
+++ b/app/reducers/user.js
@@ -5,6 +5,9 @@ import { LoginState } from '../enums';
 const initialState = {
   account: null,
   paidUntil: null, // ISO8601
+  location: [0, 0],
+  country: null,
+  city: null,
   status: LoginState.none,
   error: null
 };