Skip to content

Commit

Permalink
Add device name to Welcome Screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rawa
Rawa committed Sep 21, 2023
1 parent 455de91 commit ef95782
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 4 deletions.
60 changes: 59 additions & 1 deletion 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 @@ -6,6 +6,7 @@ import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
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
Expand All @@ -14,17 +15,24 @@ import androidx.compose.foundation.layout.wrapContentHeight
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ButtonDefaults
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.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.flow.MutableSharedFlow
Expand All @@ -34,13 +42,15 @@ import net.mullvad.mullvadvpn.R
import net.mullvad.mullvadvpn.compose.button.ActionButton
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 @@ -50,7 +60,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 @@ -163,6 +173,54 @@ 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
)

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
)
6 changes: 5 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 @@ -57,7 +57,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()
)
}
}
.stateIn(viewModelScope, SharingStarted.WhileSubscribed(), WelcomeUiState())
Expand Down
5 changes: 4 additions & 1 deletion 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 @@ -135,7 +138,7 @@ class WelcomeViewModelTest {
accountAndDevice =
AccountAndDevice(
account_token = expectedAccountNumber,
device = mockk()
device = device
)
)
val result = awaitItem()
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 ef95782

Please sign in to comment.