- Update deps

- Update configuration
- Add maps

6 files changed, 180 insertions, 53 deletions

diff --git a/app/assets/css/style.css b/app/assets/css/style.css
index 6e86ad3fe2..5e16d580c3 100644
--- a/app/assets/css/style.css
+++ b/app/assets/css/style.css
@@ -1,6 +1,12 @@
+/* global */
 @import 'reset.css';
 @import 'fonts.css';
 @import 'global.css';
+
+/* external */
+@import '../../../node_modules/leaflet/dist/leaflet.css';
+
+/* app */
 @import '../../components/CustomScrollbars.css';
 @import '../../components/Login.css';
 @import '../../components/Connect.css';
diff --git a/app/components/Connect.css b/app/components/Connect.css
index a47c4d07b7..1dac602770 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -9,21 +9,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-size: cover;
-  background-position: 0 -72px;
-  transition: 0.5s all ease-in-out;
-}
-
-.connect__map--connecting {
-  background-image: url(../assets/images/map/connecting@2x.png);
-}
-
-.connect__map--connected {
-  background-image: url(../assets/images/map/connected@2x.png);
-}
-
-.connect__map--disconnected {
-  background-image: url(../assets/images/map/not-connected@2x.png);
+  z-index: 0;
 }
 
 .connect__container {
@@ -51,7 +37,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(4px);
 }
 
 .connect__server-label {
@@ -106,12 +92,12 @@
 
 .connect__footer-button--disconnect {
   background-color: rgba(208,2,27,0.4);
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(4px);
 }
 
 .connect__footer-button--switch {
   background-color: rgba(255,255,255,0.2);
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(4px);
 }
 
 .connect__status {
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 7f3b98c2ff..eccfb723a1 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -1,5 +1,8 @@
 import React, { Component, PropTypes } from 'react';
 import { If, Then } from 'react-if';
+import Leaflet from 'leaflet';
+import cheapRuler from 'cheap-ruler';
+import { Map, Marker, Popup, TileLayer } from 'react-leaflet';
 import { Layout, Container, Header } from './Layout';
 import { servers, ConnectionState } from '../constants';
 
@@ -11,6 +14,19 @@ export default class Connect extends Component {
     onDisconnect: PropTypes.func.isRequired
   };
 
+  constructor() {
+    super();
+
+    this.state = { 
+      userLocation: [40.706213526877455, -74.0044641494751]
+    };
+
+    this._markerIcon = Leaflet.icon({
+      iconUrl: './assets/images/icon-tick.svg',
+      iconSize: [28, 20]
+    });
+  }
+
   onSettings() {
     this.props.router.push('/settings');
   }
@@ -28,11 +44,23 @@ export default class Connect extends Component {
     this.props.onDisconnect();
   }
 
-  serverName(key) {
+  serverInfo(key) {
     switch(key) {
-    case 'fastest': return 'Fastest';
-    case 'nearest': return 'Nearest';
-    default: return (servers[key] || {}).name;
+    case 'fastest': 
+      return {
+        name: 'Fastest',
+        city: 'New York',
+        country: 'USA',
+        location: [40.7127837, -74.0059413]
+      };
+    case 'nearest':
+      return {
+        name: 'Nearest',
+        city: 'New York',
+        country: 'USA',
+        location: [40.7127837, -74.0059413]
+      };
+    default: return servers[key] || {};
     }
   }
 
@@ -64,13 +92,33 @@ export default class Connect extends Component {
     }
   }
 
-  mapClass() {
-    return ['connect__map', 'connect__map--' + this.props.connect.status].join(' ');
+  displayLocation() {
+    if(this.props.connect.status === ConnectionState.disconnected) {
+      return this.state.userLocation;
+    }
+    
+    const preferredServer = this.props.settings.preferredServer;
+    const serverInfo = this.serverInfo(preferredServer);
+
+    return serverInfo.location;
+  }
+
+  getBounds(center) {
+    const ruler = cheapRuler(center[0], 'meters');
+    const bbox = ruler.bufferPoint(center, 100000);
+    const p1 = Leaflet.latLng(bbox[0], bbox[1]);
+    const p2 = Leaflet.latLng(bbox[2], bbox[3]);
+
+    return Leaflet.latLngBounds(p1, p2);
   }
 
   render() {
+    const tileURL = 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}@2x.png';
+
     const preferredServer = this.props.settings.preferredServer;
-    const serverName = this.serverName(preferredServer);
+    const serverInfo = this.serverInfo(preferredServer);
+    const displayLocation = this.displayLocation();
+
     const isConnecting = this.props.connect.status === ConnectionState.connecting;
     const isConnected = this.props.connect.status === ConnectionState.connected;
     const isDisconnected = this.props.connect.status === ConnectionState.disconnected;
@@ -80,7 +128,20 @@ export default class Connect extends Component {
         <Header style={ this.headerStyle() } showSettings={ true } onSettings={ ::this.onSettings } />
         <Container>
           <div className="connect">
-            <div className={ this.mapClass() }></div>
+            <div className="connect__map">
+              <Map zoomControl={ false } 
+                   bounds={ this.getBounds(displayLocation) }
+                   boundsOptions={ { paddingBottomRight: [0, 150]} }
+                   dragging={ false }
+                   useFlyTo={ true }
+                   animate={ true }
+                   fadeAnimation={ false }
+                   style={{ height: '100%', backgroundColor: 'black' }}>
+                <TileLayer url={ tileURL } />
+                <Marker position={ displayLocation } 
+                        keyboard={ false } />
+              </Map>
+            </div>
             <div className="connect__container">
 
               <div className="connect__status">
@@ -94,7 +155,7 @@ export default class Connect extends Component {
                 </If>
                 
                 <div className={ this.networkSecurityClass() }>{ this.networkSecurityMessage() }</div>
-                <div className="connect__status-location">{ 'City' }<br/>{ serverName }</div>
+                <div className="connect__status-location">{ serverInfo.city }<br/>{ serverInfo.country }</div>
                 <div className="connect__status-ipaddress">{ this.props.connect.clientIp }</div>
               </div>
 
@@ -120,7 +181,7 @@ export default class Connect extends Component {
                             </Then>
                           </If>
 
-                          <div className="connect__server-name">{ serverName }</div>
+                          <div className="connect__server-name">{ serverInfo.name }</div>
 
                         </div>
                       </div>
diff --git a/app/constants.js b/app/constants.js
index ad4d2a51d8..10dfea6526 100644
--- a/app/constants.js
+++ b/app/constants.js
@@ -11,21 +11,91 @@ module.exports = {
     supportEmail: 'mailto:support@mullvad.net'
   },
   servers: {
-    'ca1.mullvad.net':  { name: 'Canada' }, 
-    'ca2.mullvad.net':  { name: 'Canada (Quebec)' }, 
-    'da.mullvad.net':   { name: 'Denmark' }, 
-    'de.mullvad.net':   { name: 'Germany' }, 
-    'lt.mullvad.net':   { name: 'Lithuania' }, 
-    'nl.mullvad.net':   { name: 'The Netherlands' }, 
-    'no.mullvad.net':   { name: 'Norway' }, 
-    'ro.mullvad.net':   { name: 'Romania' },
-    'sg.mullvad.net':   { name: 'Singapore' }, 
-    'es.mullvad.net':   { name: 'Spain' }, 
-    'se1.mullvad.net':  { name: 'Sweden' }, 
-    'ch.mullvad.net':   { name: 'Switzerland' },
-    'uk.mullvad.net':   { name: 'United Kingdom' }, 
-    'us1.mullvad.net':  { name: 'USA' }
+    'ca1.mullvad.net':  { 
+      name: 'Canada',
+      city: 'Ottawa',
+      country: 'Canada',
+      location: [45.421530, -75.697193]
+    }, 
+    'ca2.mullvad.net':  { 
+      name: 'Canada (Quebec)',
+      city: 'Quebec',
+      country: 'Canada',
+      location: [46.810811, -71.215439]
+    }, 
+    'da.mullvad.net':   { 
+      name: 'Denmark',
+      city: '‎Copenhagen',
+      country: 'Denmark',
+      location: [55.6760968, 12.5683371]
+    }, 
+    'de.mullvad.net':   { 
+      name: 'Germany',
+      city: 'Berlin',
+      country: 'Germany',
+      location: [52.52000659999999, 13.404954]
+    }, 
+    'lt.mullvad.net':   { 
+      name: 'Lithuania',
+      city: 'Vilnius',
+      country: 'Lithuania',
+      location: [54.6871555, 25.2796514]
+    }, 
+    'nl.mullvad.net':   { 
+      name: 'The Netherlands',
+      city: 'Amsterdam',
+      country: 'The Netherlands',
+      location: [52.3702157, 4.895167900000001]
+    }, 
+    'no.mullvad.net':   { 
+      name: 'Norway',
+      city: 'Oslo',
+      country: 'Norway',
+      location: [59.9138688, 10.7522454]
+    }, 
+    'ro.mullvad.net':   { 
+      name: 'Romania',
+      city: 'Bucharest',
+      country: 'Canada',
+      location: [44.4267674, 26.1025384]
+    },
+    'sg.mullvad.net':   { 
+      name: 'Singapore',
+      city: 'Singapore',
+      country: 'Singapore',
+      location: [1.352083, 103.819836]
+    }, 
+    'es.mullvad.net':   { 
+      name: 'Spain',
+      city: 'Madrid',
+      country: 'Spain',
+      location: [40.4167754, -3.7037902]
+    }, 
+    'se1.mullvad.net':  { 
+      name: 'Sweden',
+      city: 'Stockholm',
+      country: 'Sweden',
+      location: [59.32932349999999, 18.0685808] 
+    }, 
+    'ch.mullvad.net':   { 
+      name: 'Switzerland',
+      city: 'Zürich',
+      country: 'Switzerland',
+      location: [47.3768866, 8.541694]
+    },
+    'uk.mullvad.net':   { 
+      name: 'United Kingdom',
+      city: 'London',
+      country: 'United Kingdom',
+      location: [51.5073509, -0.1277583]
+    }, 
+    'us1.mullvad.net':  { 
+      name: 'USA',
+      city: 'New York',
+      country: 'USA',
+      location: [40.7127837, -74.0059413]
+    }
   },
-  defaultServer: 'nearest', // can be nearest, fastest or any of keys from .servers
+  defaultServer: 'se1.mullvad.net', // can be nearest, fastest or any of keys from .servers
   LoginState, ConnectionState
 };
diff --git a/electron-builder.yml b/electron-builder.yml
index a9646c0878..5964a08b1c 100644
--- a/electron-builder.yml
+++ b/electron-builder.yml
@@ -1,6 +1,6 @@
-appId: com.example.app
-copyright: Example co
-productName: Mullvad VPN
+appId: net.mullvad.vpn
+copyright: Amagicom AB
+productName: Mullvad
 
 asar: true
 
diff --git a/package.json b/package.json
index 6ffa1ff87a..3ce23f82ed 100644
--- a/package.json
+++ b/package.json
@@ -1,23 +1,27 @@
 {
-  "name": "electron-react-redux-boilerplate",
+  "name": "",
   "version": "0.0.0",
-  "description": "electron-react-redux-boilerplate",
+  "description": "Mullvad",
   "main": "init.js",
   "author": {
-    "name": "Jordan Schroter",
-    "email": "email@author.com"
+    "name": "Andrej Mihajlov",
+    "email": "and@mullvad.net"
   },
-  "repository": "https://github.com/jschr/electron-react-redux-boilerplate",
+  "repository": "https://github.com/mullvad/vpnclient-gui",
   "license": "MIT",
   "dependencies": {
     "babel-runtime": "^6.22.0",
+    "cheap-ruler": "^2.4.1",
+    "leaflet": "^1.0.3",
     "react": "^15.4.2",
     "react-custom-scrollbars": "^4.0.2",
     "react-dom": "^15.4.2",
     "react-if": "^2.1.0",
+    "react-leaflet": "^1.1.0",
     "react-redux": "^5.0.2",
     "react-router": "^3.0.2",
     "react-router-redux": "^4.0.7",
+    "rebound": "0.0.13",
     "redux": "^3.0.0",
     "redux-actions": "^1.2.1",
     "redux-localstorage": "^0.4.1",
@@ -39,8 +43,8 @@
     "browser-sync": "^2.9.3",
     "chai": "^3.4.1",
     "chai-spies": "^0.7.1",
-    "electron": "^1.5.0",
-    "electron-builder": "^13.8.2",
+    "electron": "^1.6.0",
+    "electron-builder": "^14.1.1",
     "electron-devtools-installer": "^2.1.0",
     "eslint": "^3.14.1",
     "eslint-plugin-react": "^6.9.0",