Merge branch 'add-a-dedicated-account-button-on-the-ios-94'

3 files changed, 175 insertions, 83 deletions

diff --git a/ios/MullvadVPN/Containers/Root/HeaderBarView.swift b/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
index efa5e392f9..dcc9cbac92 100644
--- a/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
+++ b/ios/MullvadVPN/Containers/Root/HeaderBarView.swift
@@ -51,29 +51,43 @@ class HeaderBarView: UIView {
         return label
     }()
 
-    let settingsButton = makeSettingsButton()
-
-    class func makeSettingsButton() -> HeaderBarButton {
-        let settingsImage = UIImage(named: "IconSettings")?
-            .withTintColor(UIColor.HeaderBar.buttonColor, renderingMode: .alwaysOriginal)
-        let disabledSettingsImage = UIImage(named: "IconSettings")?
-            .withTintColor(
-                UIColor.HeaderBar.disabledButtonColor,
-                renderingMode: .alwaysOriginal
-            )
+    let accountButton: HeaderBarButton = {
+        let button = makeHeaderBarButton(with: UIImage(named: "IconAccount"))
+        button.accessibilityIdentifier = "AccountButton"
+        button.accessibilityLabel = NSLocalizedString(
+            "HEADER_BAR_ACCOUNT_BUTTON_ACCESSIBILITY_LABEL",
+            tableName: "HeaderBar",
+            value: "Account",
+            comment: ""
+        )
+        return button
+    }()
 
-        let settingsButton = HeaderBarButton(type: .system)
-        settingsButton.setImage(settingsImage, for: .normal)
-        settingsButton.setImage(disabledSettingsImage, for: .disabled)
-        settingsButton.translatesAutoresizingMaskIntoConstraints = false
-        settingsButton.accessibilityIdentifier = "SettingsButton"
-        settingsButton.accessibilityLabel = NSLocalizedString(
+    let settingsButton: HeaderBarButton = {
+        let button = makeHeaderBarButton(with: UIImage(named: "IconSettings"))
+        button.accessibilityIdentifier = "SettingsButton"
+        button.accessibilityLabel = NSLocalizedString(
             "HEADER_BAR_SETTINGS_BUTTON_ACCESSIBILITY_LABEL",
             tableName: "HeaderBar",
             value: "Settings",
             comment: ""
         )
-        return settingsButton
+        return button
+    }()
+
+    class func makeHeaderBarButton(with image: UIImage?) -> HeaderBarButton {
+        let buttonImage = image?.withTintColor(UIColor.HeaderBar.buttonColor, renderingMode: .alwaysOriginal)
+        let disabledButtonImage = image?.withTintColor(
+            UIColor.HeaderBar.disabledButtonColor,
+            renderingMode: .alwaysOriginal
+        )
+
+        let barButton = HeaderBarButton(type: .system)
+        barButton.setImage(buttonImage, for: .normal)
+        barButton.setImage(disabledButtonImage, for: .disabled)
+        barButton.translatesAutoresizingMaskIntoConstraints = false
+
+        return barButton
     }
 
     private let borderLayer: CALayer = {
@@ -107,49 +121,52 @@ class HeaderBarView: UIView {
         let imageSize = brandNameImage?.size ?? .zero
         let brandNameAspectRatio = imageSize.width / max(imageSize.height, 1)
 
-        let constraints = [
-            logoImageView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor),
-            logoImageView.centerYAnchor.constraint(equalTo: brandNameImageView.centerYAnchor),
-            logoImageView.widthAnchor.constraint(equalToConstant: 44),
+        [deviceName, timeLeft].forEach { deviceInfoHolder.addArrangedSubview($0) }
+
+        addConstrainedSubviews([logoImageView, brandNameImageView, accountButton, settingsButton, deviceInfoHolder]) {
+            logoImageView.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor)
+            logoImageView.centerYAnchor.constraint(equalTo: brandNameImageView.centerYAnchor)
+            logoImageView.widthAnchor.constraint(equalToConstant: 44)
             logoImageView.heightAnchor.constraint(
                 equalTo: logoImageView.widthAnchor,
                 multiplier: 1
-            ),
+            )
 
             brandNameImageView.leadingAnchor.constraint(
                 equalTo: logoImageView.trailingAnchor,
                 constant: 9
-            ),
+            )
             brandNameImageView.topAnchor.constraint(
                 equalTo: layoutMarginsGuide.topAnchor,
                 constant: 22
-            ),
+            )
             brandNameImageView.widthAnchor.constraint(
                 equalTo: brandNameImageView.heightAnchor,
                 multiplier: brandNameAspectRatio
-            ),
-            brandNameImageView.heightAnchor.constraint(equalToConstant: 18),
+            )
+            brandNameImageView.heightAnchor.constraint(equalToConstant: 18)
             layoutMarginsGuide.bottomAnchor.constraint(
                 equalTo: deviceInfoHolder.bottomAnchor,
                 constant: 8
-            ),
+            )
 
-            settingsButton.leadingAnchor.constraint(
+            accountButton.leadingAnchor.constraint(
                 greaterThanOrEqualTo: brandNameImageView.trailingAnchor,
                 constant: 8
-            ),
-            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),
-        ]
+            )
+            accountButton.centerYAnchor.constraint(equalTo: brandNameImageView.centerYAnchor)
 
-        [logoImageView, brandNameImageView, settingsButton, deviceInfoHolder].forEach { addSubview($0) }
-        [deviceName, timeLeft].forEach { deviceInfoHolder.addArrangedSubview($0) }
+            settingsButton.leadingAnchor.constraint(
+                equalTo: accountButton.trailingAnchor,
+                constant: 20
+            ).withPriority(.defaultHigh)
+            settingsButton.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor)
+            settingsButton.centerYAnchor.constraint(equalTo: accountButton.centerYAnchor)
 
-        NSLayoutConstraint.activate(constraints)
+            deviceInfoHolder.leadingAnchor.constraint(equalTo: layoutMarginsGuide.leadingAnchor)
+            deviceInfoHolder.trailingAnchor.constraint(equalTo: layoutMarginsGuide.trailingAnchor)
+            deviceInfoHolder.topAnchor.constraint(equalTo: logoImageView.bottomAnchor, constant: 7)
+        }
     }
 
     required init?(coder: NSCoder) {
@@ -164,33 +181,35 @@ class HeaderBarView: UIView {
 }
 
 extension HeaderBarView {
-    func update(deviceState: DeviceState) {
-        switch deviceState {
-        case let .loggedIn(storedAccountData, storedDeviceData):
+    func update(configuration: RootConfigration) {
+        if let name = configuration.deviceName {
             let formattedDeviceName = NSLocalizedString(
                 "DEVICE_NAME_HEADER_VIEW",
                 tableName: "Account",
-                value: "Device name : %@",
+                value: "Device name: %@",
                 comment: ""
             )
+            deviceName.text = .init(format: formattedDeviceName, name)
+        }
+
+        if let expiry = configuration.expiry {
             let formattedTimeLeft = NSLocalizedString(
                 "TIME_LEFT_HEADER_VIEW",
                 tableName: "Account",
-                value: "Time left : %@",
+                value: "Time left: %@",
                 comment: ""
             )
-            deviceName.text = .init(format: formattedDeviceName, storedDeviceData.name)
             timeLeft.text = .init(
                 format: formattedTimeLeft,
                 CustomDateComponentsFormatting.localizedString(
                     from: Date(),
-                    to: storedAccountData.expiry,
+                    to: expiry,
                     unitsStyle: .full
                 ) ?? ""
             )
-            deviceInfoHolder.arrangedSubviews.forEach { $0.isHidden = false }
-        case .loggedOut, .revoked:
-            deviceInfoHolder.arrangedSubviews.forEach { $0.isHidden = true }
         }
+
+        deviceInfoHolder.arrangedSubviews.forEach { $0.isHidden = configuration.deviceName == nil }
+        accountButton.isHidden = !configuration.showsAccountButton
     }
 }
diff --git a/ios/MullvadVPN/Containers/Root/RootConfiguration.swift b/ios/MullvadVPN/Containers/Root/RootConfiguration.swift
new file mode 100644
index 0000000000..2229bdf4a0
--- /dev/null
+++ b/ios/MullvadVPN/Containers/Root/RootConfiguration.swift
@@ -0,0 +1,15 @@
+//
+//  RootConfiguration.swift
+//  MullvadVPN
+//
+//  Created by Jon Petersson on 2023-04-19.
+//  Copyright © 2023 Mullvad VPN AB. All rights reserved.
+//
+
+import Foundation
+
+struct RootConfigration {
+    var deviceName: String?
+    var expiry: Date?
+    var showsAccountButton: Bool
+}
diff --git a/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift b/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift
index 3b96728d12..679964d46c 100644
--- a/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift
+++ b/ios/MullvadVPN/Containers/Root/RootContainerViewController.swift
@@ -44,6 +44,11 @@ protocol RootContainment {
 }
 
 protocol RootContainerViewControllerDelegate: AnyObject {
+    func rootContainerViewControllerShouldShowAccount(
+        _ controller: RootContainerViewController,
+        animated: Bool
+    )
+
     func rootContainerViewControllerShouldShowSettings(
         _ controller: RootContainerViewController,
         navigateTo route: SettingsNavigationRoute?,
@@ -62,8 +67,10 @@ class RootContainerViewController: UIViewController {
     typealias CompletionHandler = () -> Void
 
     private let headerBarView = HeaderBarView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
-    private let transitionContainer = UIView(frame: UIScreen.main.bounds)
+    let transitionContainer = UIView(frame: UIScreen.main.bounds)
+    private var presentationContainerAccountButton: UIButton?
     private var presentationContainerSettingsButton: UIButton?
+    private var configuration = RootConfigration(showsAccountButton: false)
 
     private(set) var headerBarPresentation = HeaderBarPresentation.default
     private(set) var headerBarHidden = false
@@ -256,6 +263,14 @@ class RootContainerViewController: UIViewController {
     }
 
     /// Request to display settings controller
+    func showAccount(animated: Bool) {
+        delegate?.rootContainerViewControllerShouldShowAccount(
+            self,
+            animated: animated
+        )
+    }
+
+    /// Request to display settings controller
     func showSettings(navigateTo route: SettingsNavigationRoute? = nil, animated: Bool) {
         delegate?.rootContainerViewControllerShouldShowSettings(
             self,
@@ -264,47 +279,37 @@ class RootContainerViewController: UIViewController {
         )
     }
 
-    /// Enable or disable the settings bar button displayed in the header bar
-    func setEnableSettingsButton(_ isEnabled: Bool) {
-        headerBarView.settingsButton.isEnabled = isEnabled
-        presentationContainerSettingsButton?.isEnabled = isEnabled
-    }
-
-    /// Add settings bar button into the presentation container to make settings accessible even
-    /// when the root container is covered with modal.
-    func addSettingsButtonToPresentationContainer(_ presentationContainer: UIView) {
-        let settingsButton: UIButton
+    /// Add account and settings bar buttons into the presentation container to make them accessible even
+    /// when the root container is covered with a modal.
+    func addTrailingButtonsToPresentationContainer(_ presentationContainer: UIView) {
+        let accountButton = getPresentationContainerAccountButton()
+        let settingsButton = getPresentationContainerSettingsButton()
 
-        if let transitionViewSettingsButton = presentationContainerSettingsButton {
-            transitionViewSettingsButton.removeFromSuperview()
-            settingsButton = transitionViewSettingsButton
-        } else {
-            settingsButton = HeaderBarView.makeSettingsButton()
-            settingsButton.isEnabled = headerBarView.settingsButton.isEnabled
-            settingsButton.addTarget(
-                self,
-                action: #selector(handleSettingsButtonTap),
-                for: .touchUpInside
-            )
-
-            presentationContainerSettingsButton = settingsButton
-        }
+        presentationContainerAccountButton = accountButton
+        presentationContainerSettingsButton = settingsButton
 
-        // Hide the settings button inside the header bar to avoid color blending issues
+        // Hide the account button inside the header bar to avoid color blending issues
+        headerBarView.accountButton.alpha = 0
         headerBarView.settingsButton.alpha = 0
 
-        presentationContainer.addSubview(settingsButton)
+        presentationContainer.addConstrainedSubviews([accountButton, settingsButton]) {
+            accountButton.centerXAnchor
+                .constraint(equalTo: headerBarView.accountButton.centerXAnchor)
+            accountButton.centerYAnchor
+                .constraint(equalTo: headerBarView.accountButton.centerYAnchor)
 
-        NSLayoutConstraint.activate([
             settingsButton.centerXAnchor
-                .constraint(equalTo: headerBarView.settingsButton.centerXAnchor),
+                .constraint(equalTo: headerBarView.settingsButton.centerXAnchor)
             settingsButton.centerYAnchor
-                .constraint(equalTo: headerBarView.settingsButton.centerYAnchor),
-        ])
+                .constraint(equalTo: headerBarView.settingsButton.centerYAnchor)
+        }
     }
 
-    func removeSettingsButtonFromPresentationContainer() {
+    func removeTrailingButtonsFromPresentationContainer() {
+        presentationContainerAccountButton?.removeFromSuperview()
         presentationContainerSettingsButton?.removeFromSuperview()
+
+        headerBarView.accountButton.alpha = 1
         headerBarView.settingsButton.alpha = 1
     }
 
@@ -353,6 +358,12 @@ class RootContainerViewController: UIViewController {
         // Prevent automatic layout margins adjustment as we manually control them.
         headerBarView.insetsLayoutMarginsFromSafeArea = false
 
+        headerBarView.accountButton.addTarget(
+            self,
+            action: #selector(handleAccountButtonTap),
+            for: .touchUpInside
+        )
+
         headerBarView.settingsButton.addTarget(
             self,
             action: #selector(handleSettingsButtonTap),
@@ -364,6 +375,50 @@ class RootContainerViewController: UIViewController {
         NSLayoutConstraint.activate(constraints)
     }
 
+    private func getPresentationContainerAccountButton() -> UIButton {
+        let button: UIButton
+
+        if let transitionViewButton = presentationContainerAccountButton {
+            transitionViewButton.removeFromSuperview()
+            button = transitionViewButton
+        } else {
+            button = HeaderBarView.makeHeaderBarButton(with: UIImage(named: "IconAccount"))
+            button.addTarget(
+                self,
+                action: #selector(handleAccountButtonTap),
+                for: .touchUpInside
+            )
+        }
+
+        button.isEnabled = headerBarView.accountButton.isEnabled
+        button.isHidden = !configuration.showsAccountButton
+
+        return button
+    }
+
+    private func getPresentationContainerSettingsButton() -> UIButton {
+        let button: UIButton
+
+        if let transitionViewButton = presentationContainerSettingsButton {
+            transitionViewButton.removeFromSuperview()
+            button = transitionViewButton
+        } else {
+            button = HeaderBarView.makeHeaderBarButton(with: UIImage(named: "IconSettings"))
+            button.isEnabled = headerBarView.settingsButton.isEnabled
+            button.addTarget(
+                self,
+                action: #selector(handleSettingsButtonTap),
+                for: .touchUpInside
+            )
+        }
+
+        return button
+    }
+
+    @objc private func handleAccountButtonTap() {
+        showAccount(animated: true)
+    }
+
     @objc private func handleSettingsButtonTap() {
         showSettings(animated: true)
     }
@@ -676,7 +731,10 @@ extension UIViewController {
 }
 
 extension RootContainerViewController {
-    func update(deviceState: DeviceState) {
-        headerBarView.update(deviceState: deviceState)
+    func update(configuration: RootConfigration) {
+        self.configuration = configuration
+
+        presentationContainerAccountButton?.isHidden = !configuration.showsAccountButton
+        headerBarView.update(configuration: configuration)
     }
 }