Add info dialog for device name

mullvad · Sep 25, 2023 · b9706b7 · b9706b7
1 parent 588a19b
commit b9706b7
Show file tree

Hide file tree

Showing 27 changed files with 171 additions and 38 deletions.
diff --git a/...oid/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreenTest.kt b/...oid/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreenTest.kt
@@ -9,7 +9,7 @@ import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.asSharedFlow
-import net.mullvad.mullvadvpn.compose.state.AccountUiState
+import net.mullvad.mullvadvpn.viewmodel.AccountUiState
 import net.mullvad.mullvadvpn.viewmodel.AccountViewModel
 import org.junit.Before
 import org.junit.Rule

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceNameInfoDialog.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/dialog/DeviceNameInfoDialog.kt
@@ -0,0 +1,19 @@
+package net.mullvad.mullvadvpn.compose.dialog
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.stringResource
+import net.mullvad.mullvadvpn.R
+
+@Composable
+fun DeviceNameInfoDialog(onDismiss: () -> Unit) {
+    InfoDialog(
+        message = stringResource(id = R.string.local_network_sharing_info),
+        additionalInfo =
+            buildString {
+                appendLine(stringResource(id = R.string.device_name_info_part1))
+                appendLine(stringResource(id = R.string.device_name_info_part2))
+                appendLine(stringResource(id = R.string.device_name_info_part3))
+            },
+        onDismiss = onDismiss
+    )
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
@@ -2,22 +2,26 @@ package net.mullvad.mullvadvpn.compose.screen
 
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
@@ -34,12 +38,14 @@ import net.mullvad.mullvadvpn.compose.component.CopyableObfuscationView
 import net.mullvad.mullvadvpn.compose.component.InformationView
 import net.mullvad.mullvadvpn.compose.component.MissingPolicy
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
-import net.mullvad.mullvadvpn.compose.state.AccountUiState
+import net.mullvad.mullvadvpn.compose.dialog.DeviceNameInfoDialog
 import net.mullvad.mullvadvpn.constant.IS_PLAY_BUILD
 import net.mullvad.mullvadvpn.lib.common.util.capitalizeFirstCharOfEachWord
 import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser
 import net.mullvad.mullvadvpn.lib.theme.Dimens
 import net.mullvad.mullvadvpn.util.toExpiryDateString
+import net.mullvad.mullvadvpn.viewmodel.AccountScreenDialogState
+import net.mullvad.mullvadvpn.viewmodel.AccountUiState
 import net.mullvad.mullvadvpn.viewmodel.AccountViewModel
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -51,7 +57,8 @@ private fun PreviewAccountScreen() {
             AccountUiState(
                 deviceName = "Test Name",
                 accountNumber = "1234123412341234",
-                accountExpiry = null
+                accountExpiry = null,
+                dialogState = AccountScreenDialogState.NoDialog
             ),
         viewActions = MutableSharedFlow<AccountViewModel.ViewAction>().asSharedFlow(),
         enterTransitionEndAction = MutableSharedFlow()
@@ -63,6 +70,8 @@ private fun PreviewAccountScreen() {
 fun AccountScreen(
     uiState: AccountUiState,
     viewActions: SharedFlow<AccountViewModel.ViewAction>,
+    onDeviceNameInfoClick: () -> Unit = {},
+    onDismissInfoClick: () -> Unit = {},
     enterTransitionEndAction: SharedFlow<Unit>,
     onRedeemVoucherClick: () -> Unit = {},
     onManageAccountClick: () -> Unit = {},
@@ -78,6 +87,10 @@ fun AccountScreen(
     LaunchedEffect(Unit) {
         enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
     }
+    if (uiState.dialogState == AccountScreenDialogState.DeviceNameInfoDialog) {
+        DeviceNameInfoDialog(onDismissInfoClick)
+    }
+
     CollapsingToolbarScaffold(
         backgroundColor = MaterialTheme.colorScheme.background,
         modifier = Modifier.fillMaxSize(),
@@ -126,10 +139,21 @@ fun AccountScreen(
                 modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin)
             )
 
-            InformationView(
-                content = uiState.deviceName.capitalizeFirstCharOfEachWord(),
-                whenMissing = MissingPolicy.SHOW_SPINNER
-            )
+            Row {
+                InformationView(
+                    content = uiState.deviceName.capitalizeFirstCharOfEachWord(),
+                    whenMissing = MissingPolicy.SHOW_SPINNER
+                )
+                Icon(
+                    modifier =
+                        Modifier.clickable { onDeviceNameInfoClick() }
+                            .padding(start = Dimens.mediumPadding, end = Dimens.mediumPadding)
+                            .align(Alignment.CenterVertically),
+                    painter = painterResource(id = R.drawable.icon_info),
+                    contentDescription = null,
+                    tint = MaterialTheme.colorScheme.inverseSurface
+                )
+            }
 
             Text(
                 style = MaterialTheme.typography.labelMedium,
@@ -141,9 +165,9 @@ fun AccountScreen(
                         top = Dimens.smallPadding
                     )
             )
-
-            CopyableObfuscationView(content = uiState.accountNumber)
-
+            if (uiState.accountNumber != null) {
+                CopyableObfuscationView(content = uiState.accountNumber)
+            }
             Text(
                 style = MaterialTheme.typography.labelMedium,
                 text = stringResource(id = R.string.paid_until),

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/AccountUiState.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/AccountUiState.kt
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
@@ -36,10 +36,11 @@ class AccountFragment : BaseFragment(), StatusBarPainter, NavigationBarPainter {
                         enterTransitionEndAction = vm.enterTransitionEndAction,
                         onRedeemVoucherClick = { openRedeemVoucherFragment() },
                         onManageAccountClick = vm::onManageAccountClick,
-                        onLogoutClick = vm::onLogoutClick
-                    ) {
-                        activity?.onBackPressed()
-                    }
+                        onLogoutClick = vm::onLogoutClick,
+                        onDeviceNameInfoClick = vm::onDeviceNameInfoClick,
+                        onDismissInfoClick = vm::onDismissInfoClick,
+                        onBackClick = { activity?.onBackPressedDispatcher?.onBackPressed() }
+                    )
                 }
             }
         }

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountUiState.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountUiState.kt
@@ -0,0 +1,28 @@
+package net.mullvad.mullvadvpn.viewmodel
+
+import net.mullvad.mullvadvpn.model.AccountExpiry
+import net.mullvad.mullvadvpn.model.DeviceState
+import org.joda.time.DateTime
+
+data class AccountUiState(
+    val deviceName: String,
+    val accountNumber: String?,
+    val accountExpiry: DateTime?,
+    val dialogState: AccountScreenDialogState = AccountScreenDialogState.NoDialog
+) {
+    companion object {
+        fun default() =
+            AccountUiState(
+                deviceName = DeviceState.Unknown.deviceName() ?: "",
+                accountNumber = DeviceState.Unknown.token(),
+                accountExpiry = AccountExpiry.Missing.date(),
+                dialogState = AccountScreenDialogState.NoDialog
+            )
+    }
+}
+
+sealed class AccountScreenDialogState {
+    data object NoDialog : AccountScreenDialogState()
+
+    data object DeviceNameInfoDialog : AccountScreenDialogState()
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModel.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModel.kt
@@ -3,13 +3,14 @@ package net.mullvad.mullvadvpn.viewmodel
 import androidx.lifecycle.ViewModel
 import androidx.lifecycle.viewModelScope
 import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.SharingStarted
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.asSharedFlow
 import kotlinx.coroutines.flow.combine
 import kotlinx.coroutines.flow.stateIn
+import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
-import net.mullvad.mullvadvpn.compose.state.AccountUiState
 import net.mullvad.mullvadvpn.repository.AccountRepository
 import net.mullvad.mullvadvpn.repository.DeviceRepository
 import net.mullvad.mullvadvpn.ui.serviceconnection.ServiceConnectionManager
@@ -25,27 +26,24 @@ class AccountViewModel(
     private val _enterTransitionEndAction = MutableSharedFlow<Unit>()
     val viewActions = _viewActions.asSharedFlow()
 
+    private val dialogState =
+        MutableStateFlow<AccountScreenDialogState>(AccountScreenDialogState.NoDialog)
+
     private val vmState: StateFlow<AccountUiState> =
-        combine(deviceRepository.deviceState, accountRepository.accountExpiryState) {
+        combine(deviceRepository.deviceState, accountRepository.accountExpiryState, dialogState) {
                 deviceState,
-                accountExpiry ->
+                accountExpiry,
+                dialogState ->
                 AccountUiState(
                     deviceName = deviceState.deviceName() ?: "",
-                    accountNumber = deviceState.token() ?: "",
-                    accountExpiry = accountExpiry.date()
+                    accountNumber = deviceState.token(),
+                    accountExpiry = accountExpiry.date(),
+                    dialogState = dialogState
                 )
             }
-            .stateIn(
-                viewModelScope,
-                SharingStarted.WhileSubscribed(),
-                AccountUiState(deviceName = "", accountNumber = "", accountExpiry = null)
-            )
+            .stateIn(viewModelScope, SharingStarted.WhileSubscribed(), AccountUiState.default())
     val uiState =
-        vmState.stateIn(
-            viewModelScope,
-            SharingStarted.WhileSubscribed(),
-            AccountUiState(deviceName = "", accountNumber = "", accountExpiry = null)
-        )
+        vmState.stateIn(viewModelScope, SharingStarted.WhileSubscribed(), AccountUiState.default())
 
     val enterTransitionEndAction = _enterTransitionEndAction.asSharedFlow()
 
@@ -63,6 +61,18 @@ class AccountViewModel(
         accountRepository.logout()
     }
 
+    fun onDeviceNameInfoClick() {
+        dialogState.update { AccountScreenDialogState.DeviceNameInfoDialog }
+    }
+
+    fun onDismissInfoClick() {
+        hideDialog()
+    }
+
+    private fun hideDialog() {
+        dialogState.update { AccountScreenDialogState.NoDialog }
+    }
+
     fun onTransitionAnimationEnd() {
         viewModelScope.launch { _enterTransitionEndAction.emit(Unit) }
     }

diff --git a/android/lib/resource/src/main/res/values-da/strings.xml b/android/lib/resource/src/main/res/values-da/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">Enheden er inaktiv</string>
     <string name="device_inactive_unblock_warning">Hvis du logger på, ophæves blokeringen af internettet på denne enhed.</string>
     <string name="device_name">Enhedsnavn</string>
+    <string name="device_name_info_part1">Dette er det navn, der er tildelt enheden. Hver enhed, der er logget på en Mullvad-konto, får et unikt navn, der hjælper dig med at identificere den, når du administrerer dine enheder i appen eller på webstedet.</string>
+    <string name="device_name_info_part2">Du kan have op til 5 enheder logget ind på én Mullvad-konto.</string>
+    <string name="device_name_info_part3">Hvis du logger ud, fjernes enheden og enhedsnavnet. Når du logger på igen, får enheden et nyt navn.</string>
     <string name="disconnect">Afbryd forbindelse</string>
     <string name="disconnecting">Afbryder</string>
     <string name="dismiss">Afvis</string>

diff --git a/android/lib/resource/src/main/res/values-de/strings.xml b/android/lib/resource/src/main/res/values-de/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">Gerät ist inaktiv</string>
     <string name="device_inactive_unblock_warning">Wenn Sie mit der Anmeldung fortfahren, wird die Internetsperre auf diesem Gerät aufgehoben.</string>
     <string name="device_name">Gerätename</string>
+    <string name="device_name_info_part1">Dies ist der dem Gerät zugewiesene Name. Jedes Gerät, das in einem Mullvad-Konto angemeldet ist, erhält einen eindeutigen Namen, mit dem Sie es identifizieren können, wenn Sie Ihre Geräte in der App oder auf der Website verwalten.</string>
+    <string name="device_name_info_part2">Es sind pro Mullvad-Konto bis zu 5 angemeldete Geräte möglich.</string>
+    <string name="device_name_info_part3">Wenn Sie sich abmelden, werden das Gerät und der Gerätename entfernt. Wenn Sie sich wieder anmelden, erhält das Gerät einen neuen Namen.</string>
     <string name="disconnect">Verbindung trennen</string>
     <string name="disconnecting">Verbindung wird getrennt</string>
     <string name="dismiss">Ausblenden</string>

diff --git a/android/lib/resource/src/main/res/values-es/strings.xml b/android/lib/resource/src/main/res/values-es/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">El dispositivo está inactivo</string>
     <string name="device_inactive_unblock_warning">Al iniciar la sesión, se desbloqueará el acceso a Internet en este dispositivo.</string>
     <string name="device_name">Nombre del dispositivo</string>
+    <string name="device_name_info_part1">Este es el nombre asignado al dispositivo. Cada dispositivo conectado a una cuenta de Mullvad recibe un nombre único que ayuda a identificarlo cuando gestiona sus dispositivos en la aplicación o en el sitio web.</string>
+    <string name="device_name_info_part2">Puede tener hasta 5 dispositivos conectados a una cuenta de Mullvad.</string>
+    <string name="device_name_info_part3">Si cierra sesión, se quita el dispositivo y el nombre del dispositivo. Cuando vuelve a iniciar sesión, el dispositivo recibirá un nombre nuevo.</string>
     <string name="disconnect">Desconectar</string>
     <string name="disconnecting">Desconectando</string>
     <string name="dismiss">Descartar</string>

diff --git a/android/lib/resource/src/main/res/values-fi/strings.xml b/android/lib/resource/src/main/res/values-fi/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">Laite ei ole aktiivinen</string>
     <string name="device_inactive_unblock_warning">Kirjautumiseen siirtyminen purkaa internetin käytön eston tältä laitteelta.</string>
     <string name="device_name">Laitteen nimi</string>
+    <string name="device_name_info_part1">Tämä on laitteelle annettu nimi. Jokainen Mullvad-tilille kirjautunut laite saa yksilöllisen nimen, jonka avulla sen voi tunnistaa laitteiden hallinnassa sovelluksessa tai verkkosivustolla.</string>
+    <string name="device_name_info_part2">Yhdelle Mullvad-tilille voi olla kirjautuneena enintään viisi laitetta.</string>
+    <string name="device_name_info_part3">Jos kirjaudut ulos, laite ja laitteen nimi poistetaan. Kun kirjaudut sisään uudelleen, laitteelle annetaan uusi nimi.</string>
     <string name="disconnect">Katkaise yhteys</string>
     <string name="disconnecting">Katkaistaan yhteyttä</string>
     <string name="dismiss">Jätä huomiotta</string>

diff --git a/android/lib/resource/src/main/res/values-fr/strings.xml b/android/lib/resource/src/main/res/values-fr/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">L\'appareil est inactif</string>
     <string name="device_inactive_unblock_warning">Aller à la connexion débloquera la connexion Internet sur cet appareil.</string>
     <string name="device_name">Nom de l\'appareil</string>
+    <string name="device_name_info_part1">Il s\'agit du nom attribué à l\'appareil. Chaque appareil connecté à un compte Mullvad reçoit un nom unique qui vous aide à l\'identifier lorsque vous gérez vos appareils dans l\'application ou sur le site Web.</string>
+    <string name="device_name_info_part2">Vous pouvez connecter jusqu\'à 5 appareils au même compte Mullvad.</string>
+    <string name="device_name_info_part3">Si vous vous déconnectez, l\'appareil et son nom sont supprimés. Lorsque vous vous reconnectez, l\'appareil reçoit un nouveau nom.</string>
     <string name="disconnect">Déconnexion</string>
     <string name="disconnecting">Déconnexion en cours</string>
     <string name="dismiss">Ignorer</string>

diff --git a/android/lib/resource/src/main/res/values-it/strings.xml b/android/lib/resource/src/main/res/values-it/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">Il dispositivo è inattivo</string>
     <string name="device_inactive_unblock_warning">Andare al login sbloccherà Internet su questo dispositivo.</string>
     <string name="device_name">Nome dispositivo</string>
+    <string name="device_name_info_part1">Questo è il nome assegnato al dispositivo. Ogni dispositivo connesso a un account Mullvad riceve un nome univoco che ti aiuta a identificarlo quando gestisci i tuoi dispositivi nell\'app o sul sito web.</string>
+    <string name="device_name_info_part2">Puoi avere fino a 5 dispositivi registrati su un account Mullvad.</string>
+    <string name="device_name_info_part3">Se ti disconnetti, il dispositivo e il relativo nome verranno rimossi. Quando accedi nuovamente, il dispositivo assumerà un nuovo nome.</string>
     <string name="disconnect">Disconnetti</string>
     <string name="disconnecting">Disconnessione</string>
     <string name="dismiss">Ignora</string>

diff --git a/android/lib/resource/src/main/res/values-ja/strings.xml b/android/lib/resource/src/main/res/values-ja/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">デバイスが無効です</string>
     <string name="device_inactive_unblock_warning">ログインに進むと、このデバイスのインターネットのブロックが解除されます。</string>
     <string name="device_name">デバイス名</string>
+    <string name="device_name_info_part1">これはデバイスに割り当てられる名前です。Mullvadアカウントにログインするデバイスごとに一意の名前が付けられるため、アプリまたはウェブサイトでデバイスを管理する際にデバイスを区別しやすくなります。</string>
+    <string name="device_name_info_part2">1つのMullvadアカウントで最大5台のデバイスにログインできます。</string>
+    <string name="device_name_info_part3">ログアウトすると、デバイスとデバイス名が削除されます。もう一度ログインすると、デバイスに新しい名前が付けられます。</string>
     <string name="disconnect">接続解除</string>
     <string name="disconnecting">接続解除中</string>
     <string name="dismiss">閉じる</string>

diff --git a/android/lib/resource/src/main/res/values-ko/strings.xml b/android/lib/resource/src/main/res/values-ko/strings.xml
@@ -58,6 +58,9 @@
     <string name="device_inactive_title">장치가 비활성 상태입니다.</string>
     <string name="device_inactive_unblock_warning">로그인하면 이 장치에서 인터넷 차단이 해제됩니다.</string>
     <string name="device_name">장치 이름</string>
+    <string name="device_name_info_part1">이것은 장치에 할당된 이름입니다. Mullvad 계정에 로그인된 각 장치에는 앱이나 웹사이트에서 장치를 관리할 때 장치를 보다 쉽게 식별할 수 있는 고유한 이름이 부여됩니다.</string>
+    <string name="device_name_info_part2">최대 5개의 장치에서 하나의 Mullvad 계정에 로그인할 수 있습니다.</string>
+    <string name="device_name_info_part3">로그아웃하면 해당 장치와 장치 이름이 제거됩니다. 다시 로그인하면 장치에 새 이름이 부여됩니다.</string>
     <string name="disconnect">연결 끊기</string>
     <string name="disconnecting">연결 해제 중</string>
     <string name="dismiss">해제</string>