- Add cancellation logic

- Simulate IP address change
- Switch buttons in footer when connecting

2 files changed, 77 insertions, 27 deletions

diff --git a/app/components/Connect.css b/app/components/Connect.css
index 812797ae6b..b494e9ab3c 100644
--- a/app/components/Connect.css
+++ b/app/components/Connect.css
@@ -74,12 +74,11 @@
   margin-left: 8px;
 }
 
-.connect__secure-button {
+.connect__footer-button {
   display: block;
   width:100%;
   border: 0;
   padding: 7px 12px 9px;
-  background-color: #44AD4D;
   border-radius: 4px;
   font-family: DINPro;
   font-size: 20px;
@@ -89,6 +88,20 @@
   color: #FFFFFF;
 }
 
+.connect__footer-button--connect {
+  background-color: #44AD4D;
+}
+
+.connect__footer-button--disconnect {
+  background-color: rgba(208,2,27,0.4);
+  backdrop-filter: blur(2px);
+}
+
+.connect__footer-button--switch {
+  background-color: rgba(255,255,255,0.2);
+  backdrop-filter: blur(2px);
+}
+
 .connect__status {
   padding: 0 24px;
   margin-top: auto;
diff --git a/app/components/Connect.js b/app/components/Connect.js
index 6d15d44ee7..83e49e3c2d 100644
--- a/app/components/Connect.js
+++ b/app/components/Connect.js
@@ -68,6 +68,8 @@ export default class Connect extends Component {
     const preferredServer = this.props.settings.preferredServer;
     const serverName = this.serverName(preferredServer);
     const isConnecting = this.props.connect.status === ConnectionState.connecting;
+    const isConnected = this.props.connect.status === ConnectionState.connected;
+    const isDisconnected = this.props.connect.status === ConnectionState.disconnected;
 
     return (
       <Layout>
@@ -88,40 +90,75 @@ export default class Connect extends Component {
                 </If>
                 
                 <div className={ this.networkSecurityClass() }>{ this.networkSecurityMessage() }</div>
-                <div className="connect__status-location">Gothenburg<br/>Sweden</div>
-                <div className="connect__status-ipaddress">193.138.219.245</div>
+                <div className="connect__status-location">{ "City" }<br/>{ serverName }</div>
+                <div className="connect__status-ipaddress">{ this.props.connect.clientIp }</div>
               </div>
 
-              <div className="connect__footer">
-                
-                <div className="connect__row">
-                  <div className="connect__server" onClick={ ::this.onSelectLocation }>
-                    <div className="connect__server-label">Connect to</div>                    
-                    <div className="connect__server-value">
+              { /* footer when disconnected */ }
+              <If condition={ isDisconnected }>
+                <Then>
+                  <div className="connect__footer">
+                    <div className="connect__row">
+
+                      <div className="connect__server" onClick={ ::this.onSelectLocation }>
+                        <div className="connect__server-label">Connect to</div>                    
+                        <div className="connect__server-value">
 
-                      <If condition={ preferredServer === 'fastest' }>
-                        <Then>
-                          <img className="connect__server-icon" src="./assets/images/icon-fastest.svg" />
-                        </Then>
-                      </If>
-                        
-                      <If condition={ preferredServer === 'nearest' }>
-                        <Then>
-                          <img className="connect__server-icon" src="./assets/images/icon-nearest.svg" />
-                        </Then>
-                      </If>
+                          <If condition={ preferredServer === 'fastest' }>
+                            <Then>
+                              <img className="connect__server-icon" src="./assets/images/icon-fastest.svg" />
+                            </Then>
+                          </If>
+                            
+                          <If condition={ preferredServer === 'nearest' }>
+                            <Then>
+                              <img className="connect__server-icon" src="./assets/images/icon-nearest.svg" />
+                            </Then>
+                          </If>
 
-                      <div className="connect__server-name">{ serverName }</div>
+                          <div className="connect__server-name">{ serverName }</div>
+
+                        </div>
+                      </div>
+                    </div>
 
+                    <div className="connect__row">
+                      <button className="connect__footer-button connect__footer-button--connect" onClick={ ::this.onConnect }>Secure my connection</button>
                     </div>
                   </div>
-                </div>
+                </Then>
+              </If>
+              
+              { /* footer when connecting */ }
+              <If condition={ isConnecting }>
+                <Then>
+                  <div className="connect__footer">
+                    <div className="connect__row">
+                      <button className="connect__footer-button connect__footer-button--switch" onClick={ ::this.onSelectLocation }>Switch location</button>
+                    </div>
 
-                <div className="connect__row">
-                  <button className="connect__secure-button" onClick={ ::this.onConnect }>Secure my connection</button>
-                </div>
+                    <div className="connect__row">
+                      <button className="connect__footer-button connect__footer-button--disconnect" onClick={ ::this.onDisconnect }>Cancel</button>
+                    </div>
+                  </div>
+                </Then>
+              </If>
+
+              { /* footer when connected */ }
+              <If condition={ isConnected }>
+                <Then>
+                  <div className="connect__footer">
+                    <div className="connect__row">
+                      <button className="connect__footer-button connect__footer-button--switch" onClick={ ::this.onSelectLocation }>Switch location</button>
+                    </div>
+
+                    <div className="connect__row">
+                      <button className="connect__footer-button connect__footer-button--disconnect" onClick={ ::this.onDisconnect }>Disconnect</button>
+                    </div>
+                  </div>
+                </Then>
+              </If>
 
-              </div>
             </div>
           </div>
         </Container>