diff --git a/android/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreenTest.kt b/android/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreenTest.kt index e616f67449b1..a81de4a86d41 100644 --- a/android/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreenTest.kt +++ b/android/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 new file mode 100644 index 000000000000..179d14116053 --- /dev/null +++ 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 index 863d938506f1..b99c9ba6fd49 100644 --- 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,8 +2,10 @@ 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 @@ -11,6 +13,7 @@ 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 @@ -18,6 +21,7 @@ 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 kotlinx.coroutines.flow.MutableSharedFlow @@ -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.lib.common.constant.BuildTypes 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().asSharedFlow(), ) @@ -62,6 +69,8 @@ private fun PreviewAccountScreen() { fun AccountScreen( uiState: AccountUiState, viewActions: SharedFlow, + onDeviceNameInfoClick: () -> Unit = {}, + onDismissInfoClick: () -> Unit = {}, onRedeemVoucherClick: () -> Unit = {}, onManageAccountClick: () -> Unit = {}, onLogoutClick: () -> Unit = {}, @@ -71,6 +80,10 @@ fun AccountScreen( val state = rememberCollapsingToolbarScaffoldState() val progress = state.toolbarState.progress + if (uiState.dialogState == AccountScreenDialogState.DeviceNameInfoDialog) { + DeviceNameInfoDialog(onDismissInfoClick) + } + CollapsingToolbarScaffold( backgroundColor = MaterialTheme.colorScheme.background, modifier = Modifier.fillMaxSize(), @@ -118,12 +131,23 @@ fun AccountScreen( text = stringResource(id = R.string.device_name), modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin) ) - - InformationView( - content = uiState.deviceName.capitalizeFirstCharOfEachWord(), - whenMissing = MissingPolicy.SHOW_SPINNER - ) - + uiState.deviceName?.let { + Row { + InformationView( + content = it.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, text = stringResource(id = R.string.account_number), @@ -134,9 +158,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 deleted file mode 100644 index a9527955711f..000000000000 --- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/AccountUiState.kt +++ /dev/null @@ -1,9 +0,0 @@ -package net.mullvad.mullvadvpn.compose.state - -import org.joda.time.DateTime - -data class AccountUiState( - val deviceName: String, - val accountNumber: String, - val accountExpiry: DateTime? -) 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 52e131ed7985..75385f3ef841 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 @@ -35,10 +35,11 @@ class AccountFragment : BaseFragment(), StatusBarPainter, NavigationBarPainter { viewActions = vm.viewActions, 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 new file mode 100644 index 000000000000..2b3d90540466 --- /dev/null +++ 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 index 4f6a2d52ca58..a1b19dbf2483 100644 --- 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 @@ -24,27 +25,24 @@ class AccountViewModel( private val _viewActions = MutableSharedFlow(extraBufferCapacity = 1) val viewActions = _viewActions.asSharedFlow() + private val dialogState = + MutableStateFlow(AccountScreenDialogState.NoDialog) + private val vmState: StateFlow = - 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() + deviceName = deviceState.deviceName(), + 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()) fun onManageAccountClick() { viewModelScope.launch { @@ -60,6 +58,18 @@ class AccountViewModel( accountRepository.logout() } + fun onDeviceNameInfoClick() { + dialogState.update { AccountScreenDialogState.DeviceNameInfoDialog } + } + + fun onDismissInfoClick() { + hideDialog() + } + + private fun hideDialog() { + dialogState.update { AccountScreenDialogState.NoDialog } + } + sealed class ViewAction { data class OpenAccountManagementPageInBrowser(val token: String) : ViewAction() } diff --git a/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModelTest.kt b/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModelTest.kt index 82048b5fd145..fc1fd5e99b04 100644 --- a/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModelTest.kt +++ b/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModelTest.kt @@ -73,7 +73,7 @@ class AccountViewModelTest { // Act, Assert viewModel.uiState.test { var result = awaitItem() - assertEquals("", result.deviceName) + assertEquals(null, result.deviceName) deviceState.value = DeviceState.LoggedIn(accountAndDevice = dummyAccountAndDevice) result = awaitItem() assertEquals(DUMMY_DEVICE_NAME, result.accountNumber) diff --git a/android/lib/resource/src/main/res/values/strings.xml b/android/lib/resource/src/main/res/values/strings.xml index ac979ed2106c..62be0eefa56d 100644 --- a/android/lib/resource/src/main/res/values/strings.xml +++ b/android/lib/resource/src/main/res/values/strings.xml @@ -216,4 +216,7 @@ Remove custom port Valid ranges: %s Enter port + This is the name assigned to the device. Each device logged in on a Mullvad account gets a unique name that helps you identify it when you manage your devices in the app or on the website. + You can have up to 5 devices logged in on one Mullvad account. + If you log out, the device and the device name is removed. When you log back in again, the device will get a new name.