Add device name to Welcome Screen

Fix TitleCase

4 files changed, 73 insertions, 7 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
index b7dc83ac48..8bcfc7ab49 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
@@ -4,6 +4,7 @@ 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.fillMaxWidth
@@ -11,14 +12,22 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 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.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharedFlow
@@ -28,6 +37,7 @@ import net.mullvad.mullvadvpn.compose.button.RedeemVoucherButton
 import net.mullvad.mullvadvpn.compose.button.SitePaymentButton
 import net.mullvad.mullvadvpn.compose.component.ScaffoldWithTopBar
 import net.mullvad.mullvadvpn.compose.component.drawVerticalScrollbar
+import net.mullvad.mullvadvpn.compose.dialog.InfoDialog
 import net.mullvad.mullvadvpn.compose.state.WelcomeUiState
 import net.mullvad.mullvadvpn.lib.common.util.SdkUtils
 import net.mullvad.mullvadvpn.lib.common.util.groupWithSpaces
@@ -35,6 +45,7 @@ import net.mullvad.mullvadvpn.lib.common.util.openAccountPageInBrowser
 import net.mullvad.mullvadvpn.lib.theme.AlphaTopBar
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
 import net.mullvad.mullvadvpn.lib.theme.Dimens
+import net.mullvad.mullvadvpn.lib.theme.MullvadWhite
 import net.mullvad.mullvadvpn.ui.extension.copyToClipboard
 import net.mullvad.mullvadvpn.viewmodel.WelcomeViewModel
 
@@ -44,7 +55,7 @@ private fun PreviewWelcomeScreen() {
     AppTheme {
         WelcomeScreen(
             showSitePayment = true,
-            uiState = WelcomeUiState(accountNumber = "4444555566667777"),
+            uiState = WelcomeUiState(accountNumber = "4444555566667777", deviceName = "Happy Mole"),
             viewActions = MutableSharedFlow<WelcomeViewModel.ViewAction>().asSharedFlow(),
             onSitePaymentClick = {},
             onRedeemVoucherClick = {},
@@ -157,6 +168,55 @@ fun WelcomeScreen(
                 style = MaterialTheme.typography.headlineSmall,
                 color = MaterialTheme.colorScheme.onPrimary
             )
+            Row(
+                modifier = Modifier.padding(horizontal = Dimens.sideMargin),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Text(
+                    modifier = Modifier.weight(1f, fill = false),
+                    text =
+                        buildString {
+                            append(stringResource(id = R.string.device_name))
+                            append(": ")
+                            append(uiState.deviceName)
+                        },
+                    style = MaterialTheme.typography.bodySmall,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    color = MaterialTheme.colorScheme.onPrimary
+                )
+
+                var showDeviceNameDialog by remember { mutableStateOf(false) }
+                IconButton(
+                    modifier = Modifier.align(Alignment.CenterVertically),
+                    onClick = { showDeviceNameDialog = true }
+                ) {
+                    Icon(
+                        painter = painterResource(id = R.drawable.icon_info),
+                        contentDescription = null,
+                        tint = MullvadWhite
+                    )
+                }
+                if (showDeviceNameDialog) {
+                    InfoDialog(
+                        message =
+                            buildString {
+                                appendLine(
+                                    stringResource(id = R.string.device_name_info_first_paragraph)
+                                )
+                                appendLine()
+                                appendLine(
+                                    stringResource(id = R.string.device_name_info_second_paragraph)
+                                )
+                                appendLine()
+                                appendLine(
+                                    stringResource(id = R.string.device_name_info_third_paragraph)
+                                )
+                            },
+                        onDismiss = { showDeviceNameDialog = false }
+                    )
+                }
+            }
             Text(
                 text =
                     buildString {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/WelcomeUiState.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/WelcomeUiState.kt
index b8a12ce4ae..c6959f23e0 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/WelcomeUiState.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/WelcomeUiState.kt
@@ -4,5 +4,6 @@ import net.mullvad.mullvadvpn.model.TunnelState
 
 data class WelcomeUiState(
     val tunnelState: TunnelState = TunnelState.Disconnected,
-    val accountNumber: String? = null
+    val accountNumber: String? = null,
+    val deviceName: String? = null
 )
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModel.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModel.kt
index eaba6ad784..eb25ad1268 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModel.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModel.kt
@@ -18,6 +18,7 @@ import kotlinx.coroutines.flow.stateIn
 import kotlinx.coroutines.launch
 import net.mullvad.mullvadvpn.compose.state.WelcomeUiState
 import net.mullvad.mullvadvpn.constant.ACCOUNT_EXPIRY_POLL_INTERVAL
+import net.mullvad.mullvadvpn.lib.common.util.capitalizeFirstCharOfEachWord
 import net.mullvad.mullvadvpn.model.TunnelState
 import net.mullvad.mullvadvpn.repository.AccountRepository
 import net.mullvad.mullvadvpn.repository.DeviceRepository
@@ -57,7 +58,11 @@ class WelcomeViewModel(
                         it.addDebounceForUnknownState(UNKNOWN_STATE_DEBOUNCE_DELAY_MILLISECONDS)
                     }
                 ) { tunnelState, deviceState ->
-                    WelcomeUiState(tunnelState = tunnelState, accountNumber = deviceState.token())
+                    WelcomeUiState(
+                        tunnelState = tunnelState,
+                        accountNumber = deviceState.token(),
+                        deviceName = deviceState.deviceName()?.capitalizeFirstCharOfEachWord()
+                    )
                 }
             }
             .stateIn(viewModelScope, SharingStarted.WhileSubscribed(), WelcomeUiState())
diff --git a/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModelTest.kt b/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModelTest.kt
index 88f6f0c9cb..1c61b11505 100644
--- a/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModelTest.kt
+++ b/android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModelTest.kt
@@ -16,6 +16,7 @@ import net.mullvad.mullvadvpn.compose.state.WelcomeUiState
 import net.mullvad.mullvadvpn.lib.common.test.TestCoroutineRule
 import net.mullvad.mullvadvpn.model.AccountAndDevice
 import net.mullvad.mullvadvpn.model.AccountExpiry
+import net.mullvad.mullvadvpn.model.Device
 import net.mullvad.mullvadvpn.model.DeviceState
 import net.mullvad.mullvadvpn.model.TunnelState
 import net.mullvad.mullvadvpn.repository.AccountRepository
@@ -124,6 +125,8 @@ class WelcomeViewModelTest {
         runTest(testCoroutineRule.testDispatcher) {
             // Arrange
             val expectedAccountNumber = "4444555566667777"
+            val device: Device = mockk()
+            every { device.name } returns ""
 
             // Act, Assert
             viewModel.uiState.test {
@@ -133,10 +136,7 @@ class WelcomeViewModelTest {
                 deviceState.value =
                     DeviceState.LoggedIn(
                         accountAndDevice =
-                            AccountAndDevice(
-                                account_token = expectedAccountNumber,
-                                device = mockk()
-                            )
+                            AccountAndDevice(account_token = expectedAccountNumber, device = device)
                     )
                 val result = awaitItem()
                 assertEquals(expectedAccountNumber, result.accountNumber)