Add account button in header

6 files changed, 65 insertions, 7 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt
index ceb67ebc6c..4d72ff3590 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/MainActivity.kt
@@ -39,6 +39,7 @@ import net.mullvad.mullvadvpn.model.DeviceState
 import net.mullvad.mullvadvpn.repository.AccountRepository
 import net.mullvad.mullvadvpn.repository.DeviceRepository
 import net.mullvad.mullvadvpn.repository.PrivacyDisclaimerRepository
+import net.mullvad.mullvadvpn.ui.fragment.AccountFragment
 import net.mullvad.mullvadvpn.ui.fragment.ConnectFragment
 import net.mullvad.mullvadvpn.ui.fragment.DeviceRevokedFragment
 import net.mullvad.mullvadvpn.ui.fragment.LoadingFragment
@@ -183,6 +184,20 @@ open class MainActivity : FragmentActivity() {
         }
     }
 
+    fun openAccount() {
+        supportFragmentManager.beginTransaction().apply {
+            setCustomAnimations(
+                R.anim.fragment_enter_from_bottom,
+                R.anim.do_nothing,
+                R.anim.do_nothing,
+                R.anim.fragment_exit_to_bottom
+            )
+            replace(R.id.main_fragment, AccountFragment())
+            addToBackStack(null)
+            commitAllowingStateLoss()
+        }
+    }
+
     fun openSettings() {
         supportFragmentManager.beginTransaction().apply {
             setCustomAnimations(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/AccountFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/AccountFragment.kt
index 09accbc826..06fdb37b79 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/AccountFragment.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/AccountFragment.kt
@@ -5,6 +5,7 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
+import androidx.core.content.ContextCompat
 import androidx.core.view.isVisible
 import androidx.lifecycle.Lifecycle
 import androidx.lifecycle.lifecycleScope
@@ -26,8 +27,12 @@ import net.mullvad.mullvadvpn.repository.DeviceRepository
 import net.mullvad.mullvadvpn.ui.CollapsibleTitleController
 import net.mullvad.mullvadvpn.ui.GroupedPasswordTransformationMethod
 import net.mullvad.mullvadvpn.ui.GroupedTransformationMethod
+import net.mullvad.mullvadvpn.ui.NavigationBarPainter
+import net.mullvad.mullvadvpn.ui.StatusBarPainter
 import net.mullvad.mullvadvpn.ui.extension.openAccountPageInBrowser
 import net.mullvad.mullvadvpn.ui.extension.requireMainActivity
+import net.mullvad.mullvadvpn.ui.paintNavigationBar
+import net.mullvad.mullvadvpn.ui.paintStatusBar
 import net.mullvad.mullvadvpn.ui.serviceconnection.ServiceConnectionManager
 import net.mullvad.mullvadvpn.ui.serviceconnection.ServiceConnectionState
 import net.mullvad.mullvadvpn.ui.serviceconnection.authTokenCache
@@ -45,7 +50,7 @@ import net.mullvad.talpid.tunnel.ErrorStateCause
 import org.joda.time.DateTime
 import org.koin.android.ext.android.inject
 
-class AccountFragment : BaseFragment() {
+class AccountFragment : BaseFragment(), StatusBarPainter, NavigationBarPainter {
 
     // Injected dependencies
     private val accountRepository: AccountRepository by inject()
@@ -117,7 +122,7 @@ class AccountFragment : BaseFragment() {
     ): View {
         val view = inflater.inflate(R.layout.account, container, false)
 
-        view.findViewById<View>(R.id.back).setOnClickListener {
+        view.findViewById<View>(R.id.close).setOnClickListener {
             requireMainActivity().onBackPressed()
         }
 
@@ -157,6 +162,11 @@ class AccountFragment : BaseFragment() {
         return view
     }
 
+    override fun onResume() {
+        super.onResume()
+        paintNavigationBar(ContextCompat.getColor(requireContext(), R.color.darkBlue))
+    }
+
     override fun onStop() {
         jobTracker.cancelAllJobs()
         super.onStop()
@@ -178,6 +188,7 @@ class AccountFragment : BaseFragment() {
             launchUpdateTextOnExpiryChanges()
             launchTunnelStateSubscription()
             launchRefreshDeviceStateAfterAnimation()
+            launchPaintStatusBarAfterTransition()
         }
     }
 
@@ -227,6 +238,12 @@ class AccountFragment : BaseFragment() {
         }
     }
 
+    private fun CoroutineScope.launchPaintStatusBarAfterTransition() = launch {
+        transitionFinishedFlow.collect {
+            paintStatusBar(ContextCompat.getColor(requireContext(), R.color.darkBlue))
+        }
+    }
+
     private fun CoroutineScope.launchRefreshDeviceStateAfterAnimation() = launch {
         transitionFinishedFlow.collect { deviceRepository.refreshDeviceState() }
     }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LoginFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LoginFragment.kt
index 3168824c92..ba29326b3d 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LoginFragment.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/LoginFragment.kt
@@ -58,7 +58,11 @@ class LoginFragment : BaseFragment(), NavigationBarPainter {
     ): View? {
         val view = inflater.inflate(R.layout.login, container, false)
 
-        headerBar = view.findViewById(R.id.header_bar)
+        headerBar =
+            view.findViewById<HeaderBar?>(R.id.header_bar).apply {
+                setAccountButtonVisibility(false)
+            }
+
         title = view.findViewById(R.id.title)
         subtitle = view.findViewById(R.id.subtitle)
         loggingInStatus = view.findViewById(R.id.logging_in_status)
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/HeaderBar.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/HeaderBar.kt
index 6f7ca5e8c5..788bc92691 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/HeaderBar.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/widget/HeaderBar.kt
@@ -7,6 +7,7 @@ import android.view.LayoutInflater
 import android.view.View
 import android.widget.LinearLayout
 import androidx.core.content.ContextCompat
+import androidx.core.view.isVisible
 import kotlin.properties.Delegates.observable
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.model.TunnelState
@@ -24,6 +25,7 @@ constructor(
 ) : LinearLayout(context, attributes, defStyleAttr, defStyleRes), StatusBarPainter {
     private val container = LayoutInflater.from(context).inflate(R.layout.header_bar, this)
     private val settingsButton = findViewById<View>(R.id.settings)
+    private val accountButton = findViewById<View>(R.id.account)
 
     private val disabledColor = ContextCompat.getColor(context, android.R.color.transparent)
     private val securedColor = ContextCompat.getColor(context, R.color.green)
@@ -48,6 +50,11 @@ constructor(
         gravity = Gravity.CENTER_VERTICAL
         orientation = HORIZONTAL
 
+        accountButton.apply {
+            isEnabled = true
+            setOnClickListener { (context as? MainActivity)?.openAccount() }
+        }
+
         settingsButton.apply {
             isEnabled = true
             setOnClickListener { (context as? MainActivity)?.openSettings() }
@@ -56,6 +63,10 @@ constructor(
         tunnelState = null
     }
 
+    fun setAccountButtonVisibility(isVisible: Boolean) {
+        accountButton.isVisible = isVisible
+    }
+
     fun setSettingsButtonEnabled(isEnabled: Boolean) {
         settingsButton.isEnabled = isEnabled
     }
diff --git a/android/app/src/main/res/layout/account.xml b/android/app/src/main/res/layout/account.xml
index 01a003c883..25c912d131 100644
--- a/android/app/src/main/res/layout/account.xml
+++ b/android/app/src/main/res/layout/account.xml
@@ -14,10 +14,12 @@
                   android:orientation="vertical">
         <FrameLayout android:layout_width="match_parent"
                      android:layout_height="wrap_content">
-            <net.mullvad.mullvadvpn.ui.widget.BackButton android:id="@+id/back"
-                                                         android:layout_width="wrap_content"
-                                                         android:layout_height="wrap_content"
-                                                         mullvad:text="@string/settings" />
+            <ImageButton android:id="@+id/close"
+                         android:layout_width="wrap_content"
+                         android:layout_height="wrap_content"
+                         android:padding="12dp"
+                         android:background="?android:attr/selectableItemBackground"
+                         android:src="@drawable/icon_close" />
             <TextView android:id="@+id/collapsed_title"
                       android:layout_width="wrap_content"
                       android:layout_height="wrap_content"
diff --git a/android/app/src/main/res/layout/header_bar.xml b/android/app/src/main/res/layout/header_bar.xml
index 9ca2756626..784d0a85ec 100644
--- a/android/app/src/main/res/layout/header_bar.xml
+++ b/android/app/src/main/res/layout/header_bar.xml
@@ -22,6 +22,15 @@
                    app:layout_constraintStart_toEndOf="@id/appIcon"
                    app:layout_constraintTop_toTopOf="parent"
                    app:layout_constraintBottom_toBottomOf="parent" />
+        <ImageButton android:id="@+id/account"
+                     android:layout_width="wrap_content"
+                     android:layout_height="match_parent"
+                     android:background="?android:attr/selectableItemBackground"
+                     android:paddingHorizontal="16dp"
+                     android:src="@drawable/icon_account"
+                     app:layout_constraintEnd_toStartOf="@id/settings"
+                     app:layout_constraintTop_toTopOf="parent"
+                     app:layout_constraintBottom_toBottomOf="parent" />
         <ImageButton android:id="@+id/settings"
                      android:layout_width="wrap_content"
                      android:layout_height="match_parent"