Add device name and time left to header

3 files changed, 78 insertions, 7 deletions

diff --git a/ios/MullvadVPN/Containers/Root/HeaderBarView.swift b/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
index 467bdb37da..0c309e6947 100644
--- a/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
+++ b/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
@@ -26,6 +26,28 @@ class HeaderBarView: UIView {
         return imageView
     }()
 
+    private let deviceInfoHolder: UIStackView = {
+        let stackView = UIStackView()
+        stackView.axis = .horizontal
+        stackView.distribution = .fillProportionally
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        return stackView
+    }()
+
+    private lazy var deviceName: UILabel = {
+        let label = UILabel(frame: .zero)
+        label.font = UIFont.systemFont(ofSize: 14)
+        label.textColor = UIColor(white: 1.0, alpha: 0.8)
+        return label
+    }()
+
+    private lazy var timeLeft: UILabel = {
+        let label = UILabel(frame: .zero)
+        label.font = UIFont.systemFont(ofSize: 14)
+        label.textColor = UIColor(white: 1.0, alpha: 0.8)
+        return label
+    }()
+
     let settingsButton = makeSettingsButton()
 
     class func makeSettingsButton() -> HeaderBarButton {
@@ -105,8 +127,8 @@ class HeaderBarView: UIView {
             ),
             brandNameImageView.heightAnchor.constraint(equalToConstant: 18),
             layoutMarginsGuide.bottomAnchor.constraint(
-                equalTo: brandNameImageView.bottomAnchor,
-                constant: 22
+                equalTo: deviceInfoHolder.bottomAnchor,
+                constant: 4
             ),
 
             settingsButton.leadingAnchor.constraint(
@@ -115,9 +137,14 @@ class HeaderBarView: UIView {
             ),
             settingsButton.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor),
             settingsButton.centerYAnchor.constraint(equalTo: brandNameImageView.centerYAnchor),
+
+            deviceInfoHolder.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
+            deviceInfoHolder.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor),
+            deviceInfoHolder.topAnchor.constraint(equalTo: logoImageView.bottomAnchor, constant: 7),
         ]
 
-        [logoImageView, brandNameImageView, settingsButton].forEach { addSubview($0) }
+        [logoImageView, brandNameImageView, settingsButton, deviceInfoHolder].forEach { addSubview($0) }
+        [deviceName, timeLeft].forEach { deviceInfoHolder.addArrangedSubview($0) }
 
         NSLayoutConstraint.activate(constraints)
     }
@@ -132,3 +159,35 @@ class HeaderBarView: UIView {
         borderLayer.frame = CGRect(x: 0, y: frame.maxY - 1, width: frame.width, height: 1)
     }
 }
+
+extension HeaderBarView {
+    func update(deviceState: DeviceState) {
+        switch deviceState {
+        case let .loggedIn(storedAccountData, storedDeviceData):
+            let formattedDeviceName = NSLocalizedString(
+                "DEVICE_NAME_HEADER_VIEW",
+                tableName: "Account",
+                value: "Device name : %@",
+                comment: ""
+            )
+            let formattedTimeLeft = NSLocalizedString(
+                "TIME_LEFT_HEADER_VIEW",
+                tableName: "Account",
+                value: "Time left : %@",
+                comment: ""
+            )
+            deviceName.text = .init(format: formattedDeviceName, storedDeviceData.name)
+            timeLeft.text = .init(
+                format: formattedTimeLeft,
+                CustomDateComponentsFormatting.localizedString(
+                    from: Date(),
+                    to: storedAccountData.expiry,
+                    unitsStyle: .full
+                ) ?? ""
+            )
+            deviceInfoHolder.arrangedSubviews.forEach { $0.isHidden = false }
+        case .loggedOut, .revoked:
+            deviceInfoHolder.arrangedSubviews.forEach { $0.isHidden = true }
+        }
+    }
+}
diff --git a/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift b/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift
index 65ebaffd47..3b96728d12 100644
--- a/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift
+++ b/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift
@@ -674,3 +674,9 @@ extension UIViewController {
         rootContainerController?.updateHeaderBarHiddenAppearance()
     }
 }
+
+extension RootContainerViewController {
+    func update(deviceState: DeviceState) {
+        headerBarView.update(deviceState: deviceState)
+    }
+}
diff --git a/ios/MullvadVPN/Coordinators/App/ApplicationCoordinator.swift b/ios/MullvadVPN/Coordinators/App/ApplicationCoordinator.swift
index 4a745e385c..710b0e2cdc 100644
--- a/ios/MullvadVPN/Coordinators/App/ApplicationCoordinator.swift
+++ b/ios/MullvadVPN/Coordinators/App/ApplicationCoordinator.swift
@@ -92,9 +92,9 @@ final class ApplicationCoordinator: Coordinator, Presenting, RootContainerViewCo
         self.devicesProxy = devicesProxy
 
         /*
-          Uncomment if you'd like to test TOS again
+         Uncomment if you'd like to test TOS again
          TermsOfService.unsetAgreed()
-          */
+         */
 
         super.init()
 
@@ -417,7 +417,6 @@ final class ApplicationCoordinator: Coordinator, Presenting, RootContainerViewCo
 
     private func presentMain(animated: Bool, completion: @escaping (Coordinator) -> Void) {
         precondition(!isPad)
-
         let tunnelCoordinator = makeTunnelCoordinator()
 
         horizontalFlowController.pushViewController(
@@ -587,12 +586,15 @@ final class ApplicationCoordinator: Coordinator, Presenting, RootContainerViewCo
         let tunnelObserver =
             TunnelBlockObserver(didUpdateDeviceState: { [weak self] manager, deviceState in
                 self?.deviceStateDidChange(deviceState)
+                self?.updateView(deviceState: deviceState)
             })
 
         tunnelManager.addObserver(tunnelObserver)
 
         self.tunnelObserver = tunnelObserver
 
+        updateView(deviceState: tunnelManager.deviceState)
+
         splitViewController.preferredDisplayMode = tunnelManager.deviceState.splitViewMode
     }
 
@@ -616,6 +618,11 @@ final class ApplicationCoordinator: Coordinator, Presenting, RootContainerViewCo
         }
     }
 
+    private func updateView(deviceState: DeviceState) {
+        primaryNavigationContainer.update(deviceState: deviceState)
+        secondaryNavigationContainer.update(deviceState: deviceState)
+    }
+
     // MARK: - Out of time
 
     private func updateOutOfTimeTimer() {
@@ -723,7 +730,6 @@ final class ApplicationCoordinator: Coordinator, Presenting, RootContainerViewCo
         case .pendingReconnect:
             break
         }
-
         return true
     }