Skip to content

Commit

Permalink
Add device name to Welcome Screen
Browse files Browse the repository at this point in the history 
Fix TitleCase
  • Loading branch information
@Rawa
Rawa committed Sep 27, 2023
1 parent 0377ffd commit 77df1ad
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 9 deletions.
65 changes: 62 additions & 3 deletions android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/WelcomeScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,30 @@ 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
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
Expand All @@ -28,13 +37,15 @@ 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
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

Expand All @@ -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 = {},
Expand Down Expand Up @@ -150,13 +161,61 @@ fun WelcomeScreen(
context.getString(R.string.copied_mullvad_account_number)
)
}
}
?: Modifier
} ?: Modifier
)
.padding(vertical = Dimens.smallPadding, horizontal = Dimens.sideMargin),
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 {
Expand Down
3 changes: 2 additions & 1 deletion android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/state/WelcomeUiState.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
)
7 changes: 6 additions & 1 deletion android/app/src/main/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModel.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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())
Expand Down
8 changes: 4 additions & 4 deletions android/app/src/test/kotlin/net/mullvad/mullvadvpn/viewmodel/WelcomeViewModelTest.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 {
Expand All @@ -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)
Expand Down
3 changes: 3 additions & 0 deletions android/lib/resource/src/main/res/values/strings.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,9 @@
<string name="privacy_policy_label">Privacy policy</string>
<string name="account_number">Account number</string>
<string name="device_name">Device name</string>
<string name="device_name_info_first_paragraph">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.</string>
<string name="device_name_info_second_paragraph">You can have up to 5 devices logged in on one Mullvad account.</string>
<string name="device_name_info_third_paragraph">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.</string>
<string name="mullvad_account_number">Mullvad account number</string>
<string name="copied_mullvad_account_number">Copied Mullvad account number to clipboard</string>
<string name="paid_until">Paid until</string>
Expand Down

0 comments on commit 77df1ad

Please sign in to comment.