Migrate login screen to compose

Convert login screen to compose Fixes theme colors Adds AccountToken to Model Adds visual transformation
mullvad · Sep 19, 2023 · 8c67592 · 8c67592
1 parent 34874c9
commit 8c67592
Show file tree

Hide file tree

Showing 14 changed files with 783 additions and 548 deletions.
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
@@ -12,6 +12,7 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
@@ -111,57 +112,74 @@ fun AccountScreen(
 
         val scrollState = rememberScrollState()
 
-        Column(
-            verticalArrangement = Arrangement.Bottom,
-            horizontalAlignment = Alignment.Start,
-            modifier =
-                Modifier.background(MaterialTheme.colorScheme.background)
-                    .fillMaxSize()
-                    .drawVerticalScrollbar(scrollState)
-                    .verticalScroll(scrollState)
-                    .animateContentSize()
-        ) {
-            Text(
-                style = MaterialTheme.typography.labelMedium,
-                text = stringResource(id = R.string.device_name),
-                modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin)
-            )
+        Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
+            Column(
+                verticalArrangement = Arrangement.Bottom,
+                horizontalAlignment = Alignment.Start,
+                modifier =
+                    Modifier.fillMaxSize()
+                        .drawVerticalScrollbar(scrollState)
+                        .verticalScroll(scrollState)
+                        .animateContentSize()
+            ) {
+                Text(
+                    style = MaterialTheme.typography.labelMedium,
+                    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
-            )
+                InformationView(
+                    content = uiState.deviceName.capitalizeFirstCharOfEachWord(),
+                    whenMissing = MissingPolicy.SHOW_SPINNER
+                )
 
-            Text(
-                style = MaterialTheme.typography.labelMedium,
-                text = stringResource(id = R.string.account_number),
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        top = Dimens.smallPadding
-                    )
-            )
+                Text(
+                    style = MaterialTheme.typography.labelMedium,
+                    text = stringResource(id = R.string.account_number),
+                    modifier =
+                        Modifier.padding(
+                            start = Dimens.sideMargin,
+                            end = Dimens.sideMargin,
+                            top = Dimens.smallPadding
+                        )
+                )
 
-            CopyableObfuscationView(content = uiState.accountNumber)
+                CopyableObfuscationView(content = uiState.accountNumber)
 
-            Text(
-                style = MaterialTheme.typography.labelMedium,
-                text = stringResource(id = R.string.paid_until),
-                modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin)
-            )
+                Text(
+                    style = MaterialTheme.typography.labelMedium,
+                    text = stringResource(id = R.string.paid_until),
+                    modifier = Modifier.padding(start = Dimens.sideMargin, end = Dimens.sideMargin)
+                )
 
-            InformationView(
-                content = uiState.accountExpiry?.toExpiryDateString() ?: "",
-                whenMissing = MissingPolicy.SHOW_SPINNER
-            )
+                InformationView(
+                    content = uiState.accountExpiry?.toExpiryDateString() ?: "",
+                    whenMissing = MissingPolicy.SHOW_SPINNER
+                )
+
+                Spacer(modifier = Modifier.weight(1f))
 
-            Spacer(modifier = Modifier.weight(1f))
+                if (BuildConfig.BUILD_TYPE != BuildTypes.RELEASE) {
+                    ActionButton(
+                        text = stringResource(id = R.string.manage_account),
+                        onClick = onManageAccountClick,
+                        modifier =
+                            Modifier.padding(
+                                start = Dimens.sideMargin,
+                                end = Dimens.sideMargin,
+                                bottom = Dimens.screenVerticalMargin
+                            ),
+                        colors =
+                            ButtonDefaults.buttonColors(
+                                contentColor = MaterialTheme.colorScheme.onPrimary,
+                                containerColor = MaterialTheme.colorScheme.surface
+                            )
+                    )
+                }
 
-            if (BuildConfig.BUILD_TYPE != BuildTypes.RELEASE) {
                 ActionButton(
-                    text = stringResource(id = R.string.manage_account),
-                    onClick = onManageAccountClick,
+                    text = stringResource(id = R.string.redeem_voucher),
+                    onClick = onRedeemVoucherClick,
                     modifier =
                         Modifier.padding(
                             start = Dimens.sideMargin,
@@ -174,39 +192,23 @@ fun AccountScreen(
                             containerColor = MaterialTheme.colorScheme.surface
                         )
                 )
-            }
-
-            ActionButton(
-                text = stringResource(id = R.string.redeem_voucher),
-                onClick = onRedeemVoucherClick,
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        bottom = Dimens.screenVerticalMargin
-                    ),
-                colors =
-                    ButtonDefaults.buttonColors(
-                        contentColor = MaterialTheme.colorScheme.onPrimary,
-                        containerColor = MaterialTheme.colorScheme.surface
-                    )
-            )
 
-            ActionButton(
-                text = stringResource(id = R.string.log_out),
-                onClick = onLogoutClick,
-                modifier =
-                    Modifier.padding(
-                        start = Dimens.sideMargin,
-                        end = Dimens.sideMargin,
-                        bottom = Dimens.screenVerticalMargin
-                    ),
-                colors =
-                    ButtonDefaults.buttonColors(
-                        contentColor = MaterialTheme.colorScheme.onPrimary,
-                        containerColor = MaterialTheme.colorScheme.error
-                    )
-            )
+                ActionButton(
+                    text = stringResource(id = R.string.log_out),
+                    onClick = onLogoutClick,
+                    modifier =
+                        Modifier.padding(
+                            start = Dimens.sideMargin,
+                            end = Dimens.sideMargin,
+                            bottom = Dimens.screenVerticalMargin
+                        ),
+                    colors =
+                        ButtonDefaults.buttonColors(
+                            contentColor = MaterialTheme.colorScheme.onPrimary,
+                            containerColor = MaterialTheme.colorScheme.error
+                        )
+                )
+            }
         }
     }
 }
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
@@ -22,6 +22,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
@@ -161,12 +162,10 @@ fun ConnectScreen(
                                 end = Dimens.sideMargin,
                                 top = Dimens.mediumPadding
                             )
-                            .size(
-                                width = Dimens.progressIndicatorSize,
-                                height = Dimens.progressIndicatorSize
-                            )
+                            .size(Dimens.progressIndicatorSize)
                             .align(Alignment.CenterHorizontally)
-                            .testTag(CIRCULAR_PROGRESS_INDICATOR)
+                            .testTag(CIRCULAR_PROGRESS_INDICATOR),
+                    strokeCap = StrokeCap.Round
                 )
             }
             Spacer(modifier = Modifier.height(Dimens.mediumPadding))