From 67e1e86edbe852ed35e082186e5752e1c3b5e304 Mon Sep 17 00:00:00 2001
From: Sebastian Streich <strseb@users.noreply.github.com>
Date: Wed, 21 Aug 2024 21:43:41 +0100
Subject: [PATCH] Polish: Get Time from the VPN client (#32)

> [!NOTE]
> Depends on
https://github.com/mozilla-mobile/mozilla-vpn-client/pull/9776/files

Pulls the connection timestamp from the VPN state, allowing them to
sync.



![image](https://github.com/user-attachments/assets/9d138d03-3fa3-44ab-a996-f8656eea0f56)
---
 src/background/vpncontroller/states.js        | 10 ++++-
 src/background/vpncontroller/vpncontroller.js |  9 ++++-
 src/components/vpncard.js                     | 37 +++----------------
 src/ui/browserAction/popupPage.js             |  1 +
 4 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/background/vpncontroller/states.js b/src/background/vpncontroller/states.js
index 1c1705c..d02e836 100644
--- a/src/background/vpncontroller/states.js
+++ b/src/background/vpncontroller/states.js
@@ -42,6 +42,10 @@ export class VPNState {
 
   /** @type {ServerCountry | undefined } */
   exitServerCountry = new ServerCountry();
+  /**
+   * Timestamp since the VPN connection was established
+   */
+  connectedSince = 0;
   /**
    * Constructs state of another state, moving
    * non essential data.
@@ -130,16 +134,20 @@ export class StateVPNEnabled extends VPNState {
    * @param {VPNState} other -
    * @param {string|boolean} aloophole - False if loophole is not supported,
    */
-  constructor(other, aloophole) {
+  constructor(other, aloophole, connectedSince) {
     super(other);
     if (other) {
       this.loophole = other.loophole;
       this.exitServerCity = other.exitServerCity;
       this.exitServerCountry = other.exitServerCountry;
+      this.connectedSince = other.connectedSince;
     }
     if (aloophole) {
       this.loophole = aloophole;
     }
+    if (connectedSince) {
+      this.connectedSince = connectedSince;
+    }
   }
 
   state = "Enabled";
diff --git a/src/background/vpncontroller/vpncontroller.js b/src/background/vpncontroller/vpncontroller.js
index 27bb80f..b25fa69 100644
--- a/src/background/vpncontroller/vpncontroller.js
+++ b/src/background/vpncontroller/vpncontroller.js
@@ -145,6 +145,12 @@ export class VPNController extends Component {
       case "status":
         const status = response.status;
         const controllerState = status.vpn;
+        const connectedSince = (() => {
+          if (!status.connectedSince) {
+            return 0;
+          }
+          return parseInt(status.connectedSince);
+        })();
         const exit_city_name = status.location["exit_city_name"];
         const exit_country_code = status.location["exit_country_code"];
         const exitServerCountry = this.#mState.value.servers.find(
@@ -163,7 +169,8 @@ export class VPNController extends Component {
         if (controllerState === "StateOn") {
           this.#mState.value = new StateVPNEnabled(
             next_state,
-            status.localProxy?.url
+            status.localProxy?.url,
+            connectedSince
           );
           return;
         }
diff --git a/src/components/vpncard.js b/src/components/vpncard.js
index 1c0f7e4..5de361f 100644
--- a/src/components/vpncard.js
+++ b/src/components/vpncard.js
@@ -27,10 +27,9 @@ export class VPNCard extends LitElement {
   constructor() {
     super();
     this.enabled = false;
-    this.connectedSince = Date.now();
-
     this.cityName = "";
     this.countryFlag = "";
+    this.connectedSince = 0;
   }
   #intervalHandle = null;
 
@@ -78,9 +77,11 @@ export class VPNCard extends LitElement {
         formatSingle(secs)
       );
     }
-    const timeString = this.enabled
-      ? html`<p>${formatTime(Date.now() - this.connectedSince)}</p>`
-      : html``;
+    //console.log(`Connected Since ${this.connectedSince}`)
+    const time = Date.now() - this.connectedSince;
+    //console.log(`Elapsed Time: ${time}`)
+
+    const timeString = this.enabled ? html`<p>${formatTime(time)}</p>` : html``;
 
     const subLine = this.enabled
       ? "Secure and private"
@@ -222,31 +223,5 @@ export class VPNCard extends LitElement {
       border-radius: 6px;
     }
   `;
-
-  /**
-   * Returns the Properties this element should have based on a VPN State
-   * @param {VPNState} vpnState
-   * @returns {VPNCard.properties}
-   */
-  static propertiesFrom(vpnState) {
-    return {
-      enabled: vpnState.connected,
-      cityName: vpnState.exitServerCity?.name,
-      countryFlag: vpnState.exitServerCountry?.code,
-      connectedSince: Date.now(), // TODO: We actually dont send this from the client
-    };
-  }
-  /**
-   * Returns the Properties this element should have based on a VPN State
-   * @param {VPNState} vpnState
-   * @returns {void}
-   */
-  apply(vpnState) {
-    const bag = VPNCard.propertiesFrom(vpnState);
-    this.enabled = bag.enabled;
-    this.cityName = bag.cityName;
-    this.countryFlag = bag.countryFlag;
-    this.connectedSince = bag.connectedSince;
-  }
 }
 customElements.define("vpn-card", VPNCard);
diff --git a/src/ui/browserAction/popupPage.js b/src/ui/browserAction/popupPage.js
index 393c41b..f8b5a92 100644
--- a/src/ui/browserAction/popupPage.js
+++ b/src/ui/browserAction/popupPage.js
@@ -114,6 +114,7 @@ export class BrowserActionPopup extends LitElement {
               .enabled=${this.vpnState?.connected}
               .cityName=${this.vpnState?.exitServerCity?.name}
               .countryFlag=${this.vpnState?.exitServerCountry?.code}
+              .connectedSince=${this.vpnState?.connectedSince}
             ></vpn-card>
             ${this.locationSettings()}
           </main>