Add location picker

1 files changed, 69 insertions, 0 deletions

diff --git a/app/components/SelectLocation.js b/app/components/SelectLocation.js
new file mode 100644
index 0000000000..fc8ec7da25
--- /dev/null
+++ b/app/components/SelectLocation.js
@@ -0,0 +1,69 @@
+import React, { Component, PropTypes } from 'react';
+import { Layout, Container, Header } from './Layout';
+import { servers } from '../constants';
+
+export default class SelectLocation extends Component {
+
+  static propTypes = {
+    updateSettings: PropTypes.func.isRequired
+  }
+
+  onClose() {
+    this.props.router.push('/connect');
+  }
+
+  handleServer(name) {
+
+  }
+
+  handleFastest() {
+
+  }
+
+  handleNearest() {
+
+  }
+
+  render() {
+    return (
+      <Layout>
+        <Header hidden={ true } style={ Header.Style.defaultDark } />
+        <Container>
+          <div className="select-location">
+            <button className="select-location__close" onClick={ ::this.onClose } />
+            <div className="select-location__container">
+              <div className="select-location__header">
+                <h2 className="select-location__title">Select location</h2>
+                <div className="select-location__subtitle">
+                  While connected, your real location is masked with a private and secure location in the selected region
+                </div>
+              </div>
+              
+              <div className="select-location__list">
+                <div>
+                  <div className="select-location__cell" onClick={ ::this.handleFastest }>
+                    <img className="select-location__cell-icon" src="./assets/images/icon-fastest.svg" />
+                    <div className="select-location__cell-label">Fastest</div>
+                  </div>
+                  <div className="select-location__cell" onClick={ ::this.handleNearest }>
+                    <img className="select-location__cell-icon" src="./assets/images/icon-nearest.svg" />
+                    <div className="select-location__cell-label">Nearest</div>
+                  </div>
+                  <div className="select-location__separator"></div>
+                  
+                  {
+                    servers.map((name) => (
+                    <div className="select-location__cell" key={name}>
+                      <div className="select-location__cell-label">{ name }</div>
+                    </div>))
+                  }
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </Container>
+      </Layout>
+    );
+  }
+}