Add backend errors and polish error views

2 files changed, 20 insertions, 1 deletions

diff --git a/app/components/Connect.css b/app/components/Connect.css
index a727b4a251..dc9a070c99 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -105,7 +105,9 @@
   font-family: "Open Sans";
   font-size: 13px;
   font-weight: 600;
+  line-height: normal;
   color: #fff;
+  margin-bottom: 24px;
 }
 
 .connect__status-security {
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 2aef252a01..544b42860e 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -5,7 +5,9 @@ import ReactMapboxGl, { Marker } from 'react-mapbox-gl';
 import cheapRuler from 'cheap-ruler';
 import { Layout, Container, Header } from './Layout';
 import { mapbox as mapboxConfig } from '../config';
+import Backend from '../lib/Backend';
 import { ConnectionState } from '../enums';
+import ExternalLinkSVG from '../assets/images/icon-extLink.svg';
 
 export default class Connect extends Component {
   
@@ -15,6 +17,7 @@ export default class Connect extends Component {
     onConnect: PropTypes.func.isRequired,
     onCopyIP: PropTypes.func.isRequired,
     onDisconnect: PropTypes.func.isRequired,
+    onExternalLink: PropTypes.func.isRequired,
     getServerInfo: PropTypes.func.isRequired
   };
 
@@ -65,11 +68,21 @@ export default class Connect extends Component {
             <img src="./assets/images/icon-fail.svg" alt="" />
           </div>
           <div className="connect__error-title">
-            Error
+            { this.props.connect.error.title }
           </div>
           <div className="connect__error-message">
             { this.props.connect.error.message }
           </div>
+          <If condition={ this.props.connect.error.code === Backend.ErrorType.noCredit }>
+            <Then>
+            <div>
+              <button className="button button--positive" onClick={ this.onExternalLink.bind(this, 'purchase') }>
+                <span className="button-label">Buy more time</span>
+                <ExternalLinkSVG className="button-icon button-icon--16" />
+              </button>
+            </div>
+            </Then>
+          </If>
         </div>
       </div>
     )
@@ -294,6 +307,10 @@ export default class Connect extends Component {
     this.props.onConnect(serverInfo.address);
   }
 
+  onExternalLink(type) {
+    this.props.onExternalLink(type);
+  }
+
   onIPAddressClick() {
     this._copyTimer && clearTimeout(this._copyTimer);
     this._copyTimer = setTimeout(() => this.setState({ showCopyIPMessage: false }), 3000);