@@ -127,22 +127,13 @@ class Nord extends React.Component {

   }

   connect(geography) {

-    const country_info = geography.properties ;

-//    this.setState({

-//        status: VPN.connecting,

-//        country: country_info.NAME,

-//        host: null,

-//    }) ;

-

     this.connection.send(JSON.stringify({

       method: 'connect',

-      country: country_info.ISO_A2

+      country: geography.properties.ISO_A2

     })) ;

   }

   disconnect() {

-//    this.setState((prev) => ({ ...prev, status: VPN.disconnecting })) ;

-

     this.connection.send(JSON.stringify({

       method: 'disconnect'

     })) ;

@@ -15,7 +15,7 @@

  along with this program.  If not, see <http://www.gnu.org/licenses/>.

 */

 import React from 'react' ;

-import {SlideDown} from 'react-slidedown'

+import AnimateHeight from 'react-animate-height'

 import Spinner from 'react-spinkit'

 import {

   ComposableMap,

@@ -24,8 +24,8 @@ import {

   Geography,

 } from "react-simple-maps"

-import 'bulma/css/bulma.css' ;

-import 'react-slidedown/lib/slidedown.css'

+import 'normalize.css/normalize.css'

+import './static/styles.css'

 // Import licence for GEOJSON so as to include it into the webpack output.

 // This is necessary to avoid violating the license terms.

@@ -38,6 +38,7 @@ const VPN = Object.freeze({

   connecting:2,

   connected:3,

   disconnecting: 4,

+  error: 5,

 }) ;

 class Nord extends React.Component {

@@ -50,17 +51,37 @@ class Nord extends React.Component {

         status: VPN.disconnected,

         country: null,

         host: null,

+        viewportWidth: null,

     } ;

     this.connection = null

+

     this.connect = this.connect.bind(this) ;

+    this.updateDimensions = this.updateDimensions.bind(this) ;

     this.disconnect = this.disconnect.bind(this) ;

     this.handleData = this.handleData.bind(this) ;

   }

+  updateDimensions() {

+    this.setState({

+      viewportWidth: Math.max(document.documentElement.clientWidth,

+                              window.innerWidth || 0)

+    }) ;

+  }

+

+  componentWillMount() {

+    this.updateDimensions() ;

+  }

+

+  componentWillUnmount() {

+    window.removeEventListener("resize", this.updateDimensions) ;

+  }

+

   componentDidMount() {

+    const upstream = location.hostname+(location.port ? ':'+location.port : '')

+    window.addEventListener("resize", this.updateDimensions) ;

     this.setState({enabled: false, loading: true})

-    this.connection = new WebSocket('ws://127.0.0.1:5000/api') ;

+    this.connection = new WebSocket('ws://'+upstream+'/api') ;

     this.connection.onopen = () =>

       this.setState({enabled: true, loading: false}) ;

     this.connection.onerror = () =>

@@ -74,21 +95,44 @@ class Nord extends React.Component {

     msg = JSON.parse(msg.data)

     switch(msg.state) {

       case "connected":

-        this.setState({status: VPN.connected, host: msg.host}) ;

+        this.setState({

+            status: VPN.connected,

+            host: msg.host

+        }) ;

         break ;

       case "disconnected":

-        this.setState({status: VPN.disconnected}) ;

+        this.setState({

+            status: VPN.disconnected

+        }) ;

+        break ;

+      case "connecting":

+        this.setState({

+            status: VPN.connecting,

+            country: msg.country,

+            host: null,

+        }) ;

+        break ;

+      case "disconnecting":

+        this.setState({

+            status: VPN.disconnecting,

+        }) ;

+        break ;

+      case "error":

+        this.setState({

+            status: VPN.error,

+            error_message: msg.message

+        }) ;

         break ;

     }

   }

   connect(geography) {

     const country_info = geography.properties ;

-    this.setState({

-        status: VPN.connecting,

-        country: country_info.NAME,

-        host: null,

-    }) ;

+//    this.setState({

+//        status: VPN.connecting,

+//        country: country_info.NAME,

+//        host: null,

+//    }) ;

     this.connection.send(JSON.stringify({

       method: 'connect',

@@ -97,7 +141,7 @@ class Nord extends React.Component {

   }

   disconnect() {

-    this.setState((prev) => ({ ...prev, status: VPN.disconnecting })) ;

+//    this.setState((prev) => ({ ...prev, status: VPN.disconnecting })) ;

     this.connection.send(JSON.stringify({

       method: 'disconnect'

@@ -106,11 +150,15 @@ class Nord extends React.Component {

   render() {

     return (

-      <div>

-        <Title/>

-        <VPNStatus connection={ this.state }

-                   onDisconnect={ this.disconnect }/>

-        <WorldMap onClick={ this.connect }/>

+      <div id="grid">

+        <Title className="full-width"/>

+        <section className="clip">

+          <VPNStatus connection={ this.state }

+                     onDisconnect={ this.disconnect }

+                     className="full-width overlap"/>

+          <WorldMap onClick={ this.connect }

+                    viewportWidth={ this.state.viewportWidth }/>

+        </section>

       </div>

     ) ;

   }

@@ -118,91 +166,98 @@ class Nord extends React.Component {

 }

-const Title = () => (

-  <section className="hero is-primary is-info has-text-centered">

-      <div className="container">

-        <div className="is-size-1">

-          Nord

-        </div>

-      </div>

-  </section>

-) ;

-

+const Title = (props) => {

+  return (

+    <section id="title" className={props.className}>

+    <h1 className="no-margin">Nord</h1>

+    </section>

+  ) ;

+} ;

-const VPNStatus = (props) => {

-  const connection = props.connection ;

-  const ConnectionSpinner = () => (

-    <div style={{"display": "inline-block", "margin-bottom": "-5px"}}>

-      <Spinner name="double-bounce" />

+const ConnectionSpinner = () => {

+  return (

+    <div>

+      <div className="connection-spinner">

+        <Spinner name="double-bounce" fadeIn="none" />

+      </div>

     </div>

   ) ;

+} ;

-  const DisconnectButton = () => {

-    var classes = "button is-danger " ;

-    if (connection.status == VPN.disconnecting) {

-      classes += "is-loading"

-    }

-    return (

-      <button className={classes} onClick={ props.onDisconnect }>

-        Disconnect

+const DisconnectButton = (props) => {

+  const onClick = props.connected ? props.onDisconnect : null ;

+  const content = props.connected ? "Disconnect" : <ConnectionSpinner/> ;

+  return (

+    <div className="disconnect-button-wrapper">

+      <button className="disconnect-button red" onClick={ onClick }>

+        { content }

       </button>

-    ) ;

-  }

+  </div>

+  ) ;

+} ;

+

+const VPNStatus = (props) => {

+  const connection = props.connection ;

-  const style = {"margin-right": "10px", display: "inline"} ;

   var color = "" ;

-  var text = "" ;

+  var content = null

-  switch(props.connection.status) {

-    case VPN.disconnected:

-      break ;

+  switch(connection.status) {

     case VPN.connecting:

-      color = "is-warning" ;

-      text = <div>

-              <div style={style}>

-                Connecting to servers in {connection.country}

-              </div>

-              <ConnectionSpinner/>

-            </div>

+      color = "yellow" ;

+      content = <div>

+                  Connecting to servers in <b>{ connection.country }</b>

+                  <ConnectionSpinner/>

+             </div>;

       break ;

     case VPN.connected:

     case VPN.disconnecting:

-      color = "is-success" ;

-      text = (<div>

-                <div style={style}>

-                  Connected to {connection.host}

-                </div>

-                <DisconnectButton/>

-              </div>) ;

+    case VPN.disconnected:

+      color = "green" ;

+      content = <div>

+                  Connected to <b>{ connection.host }</b>

+                  <DisconnectButton

+                    connected={ connection.status == VPN.connected }

+                    onDisconnect={ props.onDisconnect }/>

+               </div> ;

       break ;

+    case VPN.error:

+      color = "red" ;

+      content = <div>Error on backend: {connection.error_message}</div> ;

   }

   if (!connection.enabled && !connection.loading) {

-    color = "is-danger"

-    text = <div style={style}>Lost connection to server</div>

+    color = "red" ;

+    content = <div>Lost connection to backend</div> ;

   }

-  const classes = "hero is-primary has-text-centered " + color

-

   return (

-    <SlideDown>

-      <section className={classes}>

-          <div className="container">

-            <div className="is-size-4">

-              {text}

-            </div>

+      <AnimateHeight

+          className={props.className}

+          duration={ 500 }

+          height={ connection.status == VPN.disconnected ? '0' : 'auto'}>

+          <div className={"padded " + color}>

+            {content}

           </div>

-      </section>

-    </SlideDown>

+      </AnimateHeight>

   ) ;

 } ;

 const WorldMap = (props) => {

-  const zoom = 2 ;

-  const center = [ 0, 30 ] ;

+  var zoom = 7 ;

+  var center = [ 5, 65 ] ;

+  if (props.viewportWidth > 500) {

+    zoom = 4 ;

+    center = [5, 50]

+  }

+  if (props.viewportWidth > 1000) {

+    zoom = 2 ;

+  }

+

+

   const default_map_style = {

     fill: "#ECEFF1",

     stroke: "#607D8B",

@@ -211,7 +266,7 @@ const WorldMap = (props) => {

   } ;

   const map_container_style = {

     width: "100%",

-    height: "auto",

+    height: "100%",

   } ;

   const map_style = {

     default: default_map_style,

@@ -45,13 +45,41 @@ class Nord extends React.Component {

   constructor(props) {

     super(props) ;

     this.state = {

+        enabled: false,

+        loading: true,

         status: VPN.disconnected,

         country: null,

         host: null,

     } ;

+    this.connection = null

     this.connect = this.connect.bind(this) ;

     this.disconnect = this.disconnect.bind(this) ;

+    this.handleData = this.handleData.bind(this) ;

+  }

+

+  componentDidMount() {

+    this.setState({enabled: false, loading: true})

+    this.connection = new WebSocket('ws://127.0.0.1:5000/api') ;

+    this.connection.onopen = () =>

+      this.setState({enabled: true, loading: false}) ;

+    this.connection.onerror = () =>

+      this.setState({enabled: false, loading: false}) ;

+    this.connection.onclose = () =>

+      this.setState({enabled: false, loading: false}) ;

+    this.connection.onmessage = this.handleData ;

+  }

+

+  handleData(msg) {

+    msg = JSON.parse(msg.data)

+    switch(msg.state) {

+      case "connected":

+        this.setState({status: VPN.connected, host: msg.host}) ;

+        break ;

+      case "disconnected":

+        this.setState({status: VPN.disconnected}) ;

+        break ;

+    }

   }

   connect(geography) {

@@ -61,23 +89,19 @@ class Nord extends React.Component {

         country: country_info.NAME,

         host: null,

     }) ;

-    // TODO: add API call to connect to VPN and remove this stub

-    setTimeout((prev) => (

-      this.setState({

-        ...prev,

-        status: VPN.connected,

-        host: country_info.ISO_A2.toLowerCase() + "#123",

-      })), 5000) ;

+

+    this.connection.send(JSON.stringify({

+      method: 'connect',

+      country: country_info.ISO_A2

+    })) ;

   }

   disconnect() {

     this.setState((prev) => ({ ...prev, status: VPN.disconnecting })) ;

-    // TODO: add API call to disconnect from VPN and remove this stub

-    setTimeout((prev) => (

-      this.setState({

-        ...prev,

-        status: VPN.disconnected,

-      })), 2000) ;

+

+    this.connection.send(JSON.stringify({

+      method: 'disconnect'

+    })) ;

   }

   render() {

@@ -154,6 +178,11 @@ const VPNStatus = (props) => {

       break ;

   }

+  if (!connection.enabled && !connection.loading) {

+    color = "is-danger"

+    text = <div style={style}>Lost connection to server</div>

+  }

+

   const classes = "hero is-primary has-text-centered " + color

   return (

new file mode 100644

@@ -0,0 +1,213 @@

+/*

+ Copyright 2018 Joseph Weston

+

+ This program is free software: you can redistribute it and/or modify

+ it under the terms of the GNU General Public License as published by

+ the Free Software Foundation, either version 3 of the License, or

+ (at your option) any later version.

+

+ This program is distributed in the hope that it will be useful,

+ but WITHOUT ANY WARRANTY; without even the implied warranty of

+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the

+ GNU General Public License for more details.

+

+ You should have received a copy of the GNU General Public License

+ along with this program.  If not, see <http://www.gnu.org/licenses/>.

+*/

+import React from 'react' ;

+import {SlideDown} from 'react-slidedown'

+import Spinner from 'react-spinkit'

+import {

+  ComposableMap,

+  ZoomableGroup,

+  Geographies,

+  Geography,

+} from "react-simple-maps"

+

+import 'bulma/css/bulma.css' ;

+import 'react-slidedown/lib/slidedown.css'

+

+// Import licence for GEOJSON so as to include it into the webpack output.

+// This is necessary to avoid violating the license terms.

+import './static/LICENSE'

+import World from './static/world.geo.json'

+

+

+const VPN = Object.freeze({

+  disconnected:1,

+  connecting:2,

+  connected:3,

+  disconnecting: 4,

+}) ;

+

+class Nord extends React.Component {

+

+  constructor(props) {

+    super(props) ;

+    this.state = {

+        status: VPN.disconnected,

+        country: null,

+        host: null,

+    } ;

+

+    this.connect = this.connect.bind(this) ;

+    this.disconnect = this.disconnect.bind(this) ;

+  }

+

+  connect(geography) {

+    const country_info = geography.properties ;

+    this.setState({

+        status: VPN.connecting,

+        country: country_info.NAME,

+        host: null,

+    }) ;

+    // TODO: add API call to connect to VPN and remove this stub

+    setTimeout((prev) => (

+      this.setState({

+        ...prev,

+        status: VPN.connected,

+        host: country_info.ISO_A2.toLowerCase() + "#123",

+      })), 5000) ;

+  }

+

+  disconnect() {

+    this.setState((prev) => ({ ...prev, status: VPN.disconnecting })) ;

+    // TODO: add API call to disconnect from VPN and remove this stub

+    setTimeout((prev) => (

+      this.setState({

+        ...prev,

+        status: VPN.disconnected,

+      })), 2000) ;

+  }

+

+  render() {

+    return (

+      <div>

+        <Title/>

+        <VPNStatus connection={ this.state }

+                   onDisconnect={ this.disconnect }/>

+        <WorldMap onClick={ this.connect }/>

+      </div>

+    ) ;

+  }

+

+}

+

+

+const Title = () => (

+  <section className="hero is-primary is-info has-text-centered">

+      <div className="container">

+        <div className="is-size-1">

+          Nord

+        </div>

+      </div>

+  </section>

+) ;

+

+

+const VPNStatus = (props) => {

+  const connection = props.connection ;

+

+  const ConnectionSpinner = () => (

+    <div style={{"display": "inline-block", "margin-bottom": "-5px"}}>

+      <Spinner name="double-bounce" />

+    </div>

+  ) ;

+

+  const DisconnectButton = () => {

+    var classes = "button is-danger " ;

+    if (connection.status == VPN.disconnecting) {

+      classes += "is-loading"

+    }

+    return (

+      <button className={classes} onClick={ props.onDisconnect }>

+        Disconnect

+      </button>

+    ) ;

+  }

+

+  const style = {"margin-right": "10px", display: "inline"} ;

+  var color = "" ;

+  var text = "" ;

+

+  switch(props.connection.status) {

+    case VPN.disconnected:

+      break ;

+    case VPN.connecting:

+      color = "is-warning" ;

+      text = <div>

+              <div style={style}>

+                Connecting to servers in {connection.country}

+              </div>

+              <ConnectionSpinner/>

+            </div>

+      break ;

+    case VPN.connected:

+    case VPN.disconnecting:

+      color = "is-success" ;

+      text = (<div>

+                <div style={style}>

+                  Connected to {connection.host}

+                </div>

+                <DisconnectButton/>

+              </div>) ;

+      break ;

+  }

+

+  const classes = "hero is-primary has-text-centered " + color

+

+  return (

+    <SlideDown>

+      <section className={classes}>

+          <div className="container">

+            <div className="is-size-4">

+              {text}

+            </div>

+          </div>

+      </section>

+    </SlideDown>

+  ) ;

+} ;

+

+

+const WorldMap = (props) => {

+

+  const zoom = 2 ;

+  const center = [ 0, 30 ] ;

+  const default_map_style = {

+    fill: "#ECEFF1",

+    stroke: "#607D8B",

+    strokeWidth: 0.75,

+    outline: "none",

+  } ;

+  const map_container_style = {

+    width: "100%",

+    height: "auto",

+  } ;

+  const map_style = {

+    default: default_map_style,

+    hover: { ...default_map_style, fill: "#CFD8DC" },

+    pressed: { ...default_map_style, fill: "#CFD8DC" },

+  } ;

+

+  return (

+    <ComposableMap style={ map_container_style }>

+      <ZoomableGroup zoom={ zoom } center={ center }>

+        <Geographies geography={ World }>

+          {(geographies, projection) => geographies.map(geography => (

+            <Geography

+              key={ geography.id }

+              geography={ geography }

+              projection={ projection }

+              style={ map_style }

+              onClick={ props.onClick }

+              />

+          ))}

+        </Geographies>

+      </ZoomableGroup>

+    </ComposableMap>

+  ) ;

+} ;

+

+

+export default Nord ;