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..464e973e5a2a 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,13 +38,15 @@ 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.AccountViewModel +import net.mullvad.mullvadvpn.viewmodel.AccountViewModelState @OptIn(ExperimentalMaterial3Api::class) @Preview @@ -48,10 +54,11 @@ import net.mullvad.mullvadvpn.viewmodel.AccountViewModel private fun PreviewAccountScreen() { AccountScreen( uiState = - AccountUiState( + AccountViewModelState( deviceName = "Test Name", accountNumber = "1234123412341234", - accountExpiry = null + accountExpiry = null, + dialogState = AccountScreenDialogState.NoDialog ), viewActions = MutableSharedFlow().asSharedFlow(), ) @@ -60,8 +67,10 @@ private fun PreviewAccountScreen() { @ExperimentalMaterial3Api @Composable fun AccountScreen( - uiState: AccountUiState, + uiState: AccountViewModelState, 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/AccountViewModel.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModel.kt index 4f6a2d52ca58..8a2b919834b2 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,26 +25,31 @@ class AccountViewModel( private val _viewActions = MutableSharedFlow(extraBufferCapacity = 1) val viewActions = _viewActions.asSharedFlow() - private val vmState: StateFlow = - combine(deviceRepository.deviceState, accountRepository.accountExpiryState) { + private val dialogState = + MutableStateFlow(AccountScreenDialogState.NoDialog) + + private val vmState: StateFlow = + combine(deviceRepository.deviceState, accountRepository.accountExpiryState, dialogState) { deviceState, - accountExpiry -> - AccountUiState( - deviceName = deviceState.deviceName() ?: "", - accountNumber = deviceState.token() ?: "", - accountExpiry = accountExpiry.date() + accountExpiry, + dialogState -> + AccountViewModelState( + deviceName = deviceState.deviceName(), + accountNumber = deviceState.token(), + accountExpiry = accountExpiry.date(), + dialogState = dialogState ) } .stateIn( viewModelScope, SharingStarted.WhileSubscribed(), - AccountUiState(deviceName = "", accountNumber = "", accountExpiry = null) + AccountViewModelState.default() ) val uiState = vmState.stateIn( viewModelScope, SharingStarted.WhileSubscribed(), - AccountUiState(deviceName = "", accountNumber = "", accountExpiry = null) + AccountViewModelState.default() ) fun onManageAccountClick() { @@ -60,6 +66,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/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModelState.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModelState.kt new file mode 100644 index 000000000000..e6547b05e194 --- /dev/null +++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/AccountViewModelState.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 AccountViewModelState( + val deviceName: String?, + val accountNumber: String?, + val accountExpiry: DateTime?, + val dialogState: AccountScreenDialogState = AccountScreenDialogState.NoDialog +) { + companion object { + fun default() = + AccountViewModelState( + 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/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.