diff --git a/features/logout/impl/build.gradle.kts b/features/logout/impl/build.gradle.kts index d5356ced63..bc6646a68f 100644 --- a/features/logout/impl/build.gradle.kts +++ b/features/logout/impl/build.gradle.kts @@ -31,6 +31,7 @@ dependencies { implementation(projects.libraries.architecture) implementation(projects.libraries.featureflag.api) implementation(projects.libraries.matrix.api) + implementation(projects.libraries.matrixui) implementation(projects.libraries.designsystem) implementation(projects.libraries.testtags) implementation(projects.libraries.uiStrings) diff --git a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutPresenter.kt b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutPresenter.kt index 4ad8a6c78e..a3cd2f6429 100644 --- a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutPresenter.kt +++ b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutPresenter.kt @@ -41,6 +41,7 @@ class LogoutPresenter( @Composable override fun present(): LogoutState { val localCoroutineScope = rememberCoroutineScope() + val currentUser by matrixClient.userProfile.collectAsState() val logoutAction: MutableState> = remember { mutableStateOf(AsyncAction.Uninitialized) } @@ -90,6 +91,7 @@ class LogoutPresenter( } return LogoutState( + currentUser = currentUser, isLastDevice = isLastDevice, backupState = backupState, doesBackupExistOnServer = doesBackupExistOnServerAction.value.dataOrNull().orTrue(), diff --git a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutState.kt b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutState.kt index 6233c1cb23..dfab1906fb 100644 --- a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutState.kt +++ b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutState.kt @@ -12,8 +12,10 @@ import io.element.android.libraries.architecture.AsyncAction import io.element.android.libraries.matrix.api.encryption.BackupState import io.element.android.libraries.matrix.api.encryption.BackupUploadState import io.element.android.libraries.matrix.api.encryption.RecoveryState +import io.element.android.libraries.matrix.api.user.MatrixUser data class LogoutState( + val currentUser: MatrixUser, val isLastDevice: Boolean, val backupState: BackupState, val doesBackupExistOnServer: Boolean, diff --git a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutStatePreviewParam.kt b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutStatePreviewParam.kt index e2d948a7f3..f30a9e7d77 100644 --- a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutStatePreviewParam.kt +++ b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutStatePreviewParam.kt @@ -14,11 +14,14 @@ import io.element.android.libraries.matrix.api.encryption.BackupState import io.element.android.libraries.matrix.api.encryption.BackupUploadState import io.element.android.libraries.matrix.api.encryption.RecoveryState import io.element.android.libraries.matrix.api.encryption.SteadyStateException +import io.element.android.libraries.matrix.api.user.MatrixUser +import io.element.android.libraries.matrix.ui.components.aMatrixUser open class LogoutStatePreviewParam : PreviewParameterProvider { override val values: Sequence get() = sequenceOf( aLogoutState(), + aLogoutState(currentUser = aMatrixUser(id = "@alice:server.org", displayName = null)), aLogoutState(isLastDevice = true), aLogoutState(isLastDevice = false, backupUploadState = BackupUploadState.Uploading(66, 200)), aLogoutState(isLastDevice = true, backupUploadState = BackupUploadState.Done), @@ -43,6 +46,7 @@ open class LogoutStatePreviewParam : PreviewParameterProvider { } fun aLogoutState( + currentUser: MatrixUser = aMatrixUser(), isLastDevice: Boolean = false, backupState: BackupState = BackupState.ENABLED, doesBackupExistOnServer: Boolean = true, @@ -52,6 +56,7 @@ fun aLogoutState( logoutAction: AsyncAction = AsyncAction.Uninitialized, eventSink: (LogoutEvent) -> Unit = {}, ) = LogoutState( + currentUser = currentUser, isLastDevice = isLastDevice, backupState = backupState, doesBackupExistOnServer = doesBackupExistOnServer, diff --git a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutView.kt b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutView.kt index cdfca04036..2e604af7ca 100644 --- a/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutView.kt +++ b/features/logout/impl/src/main/kotlin/io/element/android/features/logout/impl/LogoutView.kt @@ -11,7 +11,9 @@ package io.element.android.features.logout.impl import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.ColumnScope +import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -38,6 +40,9 @@ import io.element.android.libraries.matrix.api.encryption.BackupState import io.element.android.libraries.matrix.api.encryption.BackupUploadState import io.element.android.libraries.matrix.api.encryption.RecoveryState import io.element.android.libraries.matrix.api.encryption.SteadyStateException +import io.element.android.libraries.matrix.ui.components.accountinfo.AccountInfoCard +import io.element.android.libraries.matrix.ui.components.accountinfo.AccountInfoCardMode +import io.element.android.libraries.matrix.ui.components.accountinfo.AccountInfoCardState import io.element.android.libraries.testtags.TestTags import io.element.android.libraries.testtags.testTag import io.element.android.libraries.ui.strings.CommonStrings @@ -157,9 +162,16 @@ private fun Content( Column( modifier = modifier .fillMaxWidth() - .padding(top = 60.dp, start = 20.dp, end = 20.dp), + .padding(top = 8.dp, start = 16.dp, end = 16.dp), verticalArrangement = Arrangement.spacedBy(8.dp) ) { + AccountInfoCard( + AccountInfoCardState( + matrixUser = state.currentUser, + mode = AccountInfoCardMode.Simple, + ) + ) + Spacer(modifier = Modifier.height(16.dp)) when (state.backupUploadState) { is BackupUploadState.Uploading -> { LinearProgressIndicator( diff --git a/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutPresenterTest.kt b/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutPresenterTest.kt index 5b14bc5cc3..f22eef1bc3 100644 --- a/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutPresenterTest.kt +++ b/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutPresenterTest.kt @@ -20,7 +20,9 @@ import io.element.android.libraries.matrix.api.encryption.BackupState import io.element.android.libraries.matrix.api.encryption.BackupUploadState import io.element.android.libraries.matrix.api.encryption.EncryptionService import io.element.android.libraries.matrix.api.encryption.RecoveryState +import io.element.android.libraries.matrix.api.user.MatrixUser import io.element.android.libraries.matrix.test.AN_EXCEPTION +import io.element.android.libraries.matrix.test.A_SESSION_ID import io.element.android.libraries.matrix.test.FakeMatrixClient import io.element.android.libraries.matrix.test.encryption.FakeEncryptionService import io.element.android.libraries.workmanager.api.WorkManagerRequestType @@ -39,11 +41,18 @@ class LogoutPresenterTest { @Test fun `present - initial state`() = runTest { - val presenter = createLogoutPresenter() + val presenter = createLogoutPresenter( + matrixClient = FakeMatrixClient( + sessionId = A_SESSION_ID, + userDisplayName = "Alice", + userAvatarUrl = "mxc://avatar", + ), + ) moleculeFlow(RecompositionMode.Immediate) { presenter.present() }.test { val initialState = awaitFirstItem() + assertThat(initialState.currentUser).isEqualTo(MatrixUser(A_SESSION_ID, "Alice", "mxc://avatar")) assertThat(initialState.isLastDevice).isFalse() assertThat(initialState.backupState).isEqualTo(BackupState.UNKNOWN) assertThat(initialState.doesBackupExistOnServer).isTrue() diff --git a/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutViewTest.kt b/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutViewTest.kt index c1a480b0ed..4ec9bb4811 100644 --- a/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutViewTest.kt +++ b/features/logout/impl/src/test/kotlin/io/element/android/features/logout/impl/LogoutViewTest.kt @@ -13,8 +13,11 @@ package io.element.android.features.logout.impl import androidx.activity.ComponentActivity import androidx.compose.ui.test.AndroidComposeUiTest import androidx.compose.ui.test.ExperimentalTestApi +import androidx.compose.ui.test.assertIsDisplayed +import androidx.compose.ui.test.onNodeWithText import androidx.compose.ui.test.v2.runAndroidComposeUiTest import io.element.android.libraries.architecture.AsyncAction +import io.element.android.libraries.matrix.ui.components.aMatrixUser import io.element.android.libraries.testtags.TestTags import io.element.android.libraries.ui.strings.CommonStrings import io.element.android.tests.testutils.EnsureNeverCalled @@ -25,8 +28,22 @@ import io.element.android.tests.testutils.pressBack import io.element.android.tests.testutils.pressTag import io.element.android.tests.testutils.robolectric.RobolectricTest import org.junit.Test +import org.robolectric.annotation.Config class LogoutViewTest : RobolectricTest() { + @Test + @Config(qualifiers = "h1024dp") + fun `the current user is displayed`() = runAndroidComposeUiTest { + setLogoutView( + aLogoutState( + currentUser = aMatrixUser(id = "@alice:server.org", displayName = "Alice"), + eventSink = EventsRecorder(expectEvents = false), + ), + ) + onNodeWithText("Alice").assertIsDisplayed() + onNodeWithText("@alice:server.org").assertIsDisplayed() + } + @Test fun `clicking on logout sends a LogoutEvent`() = runAndroidComposeUiTest { val eventsRecorder = EventsRecorder() diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt index e4c8ebc641..bbf6d94d9b 100644 --- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt +++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt @@ -31,6 +31,7 @@ enum class AvatarSize(val dp: Dp) { UserHeader(96.dp), UserListItem(36.dp), + AccountInfoUser(36.dp), SelectedUser(52.dp), SelectedRoom(56.dp), diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCard.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCard.kt new file mode 100644 index 0000000000..6931598190 --- /dev/null +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCard.kt @@ -0,0 +1,193 @@ +/* + * Copyright (c) 2026 Element Creations Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial. + * Please see LICENSE files in the repository root for full details. + */ + +package io.element.android.libraries.matrix.ui.components.accountinfo + +import androidx.compose.foundation.border +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.fillMaxWidth +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.width +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clipToBounds +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.semantics.semantics +import androidx.compose.ui.text.style.TextOverflow +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.unit.dp +import io.element.android.compound.theme.ElementTheme +import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtom +import io.element.android.libraries.designsystem.atomic.atoms.RoundedIconAtomSize +import io.element.android.libraries.designsystem.atomic.molecules.TextWithLabelMolecule +import io.element.android.libraries.designsystem.components.avatar.Avatar +import io.element.android.libraries.designsystem.components.avatar.AvatarSize +import io.element.android.libraries.designsystem.components.avatar.AvatarType +import io.element.android.libraries.designsystem.icons.CompoundDrawables +import io.element.android.libraries.designsystem.preview.ElementPreview +import io.element.android.libraries.designsystem.preview.PreviewsDayNight +import io.element.android.libraries.designsystem.theme.components.HorizontalDivider +import io.element.android.libraries.designsystem.theme.components.Text +import io.element.android.libraries.matrix.api.user.MatrixUser +import io.element.android.libraries.matrix.ui.model.getAvatarData +import io.element.android.libraries.matrix.ui.model.getBestName +import io.element.android.libraries.ui.strings.CommonStrings + +/** + * Ref: https://www.figma.com/design/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components?node-id=5873-996 + */ +@Composable +fun AccountInfoCard( + state: AccountInfoCardState, + modifier: Modifier = Modifier, +) { + Column( + modifier = modifier + .fillMaxWidth() + .border(1.dp, ElementTheme.colors.borderDisabled, RoundedCornerShape(8.dp)) + .padding(20.dp), + ) { + when (state.mode) { + AccountInfoCardMode.Simple -> Unit + is AccountInfoCardMode.DeviceVerification -> Unit + is AccountInfoCardMode.UserVerification -> { + Text( + // TODO + text = "User requesting verification:", + style = ElementTheme.typography.fontBodySmRegular, + color = ElementTheme.colors.textSecondary, + ) + Spacer(modifier = Modifier.height(8.dp)) + } + } + AccountInfoCardUser( + matrixUser = state.matrixUser, + ) + when (state.mode) { + AccountInfoCardMode.Simple -> Unit + is AccountInfoCardMode.DeviceVerification -> { + AccountInfoSeparator() + DeviceInfoRow(state.mode) + } + is AccountInfoCardMode.UserVerification -> { + AccountInfoSeparator() + AccountInfoCardUser( + matrixUser = state.mode.otherUser, + ) + } + } + } +} + +@Composable +private fun AccountInfoSeparator() { + HorizontalDivider( + modifier = Modifier.padding(vertical = 20.dp), + color = ElementTheme.colors.separatorPrimary, + ) +} + +@Composable +private fun DeviceInfoRow( + mode: AccountInfoCardMode.DeviceVerification, +) { + Column( + modifier = Modifier + .fillMaxWidth() + .semantics(mergeDescendants = true) {}, + verticalArrangement = Arrangement.spacedBy(12.dp), + ) { + Row( + horizontalArrangement = Arrangement.spacedBy(16.dp), + verticalAlignment = Alignment.CenterVertically, + ) { + RoundedIconAtom( + modifier = Modifier, + size = RoundedIconAtomSize.Big, + resourceId = CompoundDrawables.ic_compound_devices + ) + Text( + text = mode.deviceName ?: mode.deviceId.value, + style = ElementTheme.typography.fontBodyMdMedium, + color = ElementTheme.colors.textPrimary, + ) + } + Row( + horizontalArrangement = Arrangement.spacedBy(8.dp), + ) { + TextWithLabelMolecule( + // TODO i18n + label = "Signed in", + text = mode.signInFormattedTimestamp, + modifier = Modifier.weight(1f), + ) + TextWithLabelMolecule( + label = stringResource(CommonStrings.common_device_id), + text = mode.deviceId.value, + modifier = Modifier.weight(1f), + spellText = true, + ) + } + } +} + +@Composable +private fun AccountInfoCardUser(matrixUser: MatrixUser) { + val subtext = if (matrixUser.displayName.isNullOrEmpty()) null else matrixUser.userId.value + Row( + modifier = Modifier.fillMaxWidth(), + verticalAlignment = Alignment.CenterVertically, + ) { + Avatar( + avatarData = matrixUser.getAvatarData(AvatarSize.AccountInfoUser), + avatarType = AvatarType.User, + ) + Spacer(modifier = Modifier.width(12.dp)) + Column( + modifier = Modifier.weight(1f), + ) { + // Name + Text( + modifier = Modifier.clipToBounds(), + text = matrixUser.getBestName(), + maxLines = 1, + overflow = TextOverflow.Ellipsis, + color = ElementTheme.colors.textPrimary, + style = ElementTheme.typography.fontBodyLgMedium, + ) + // Id + subtext?.let { + Text( + text = subtext, + color = ElementTheme.colors.textSecondary, + maxLines = 1, + overflow = TextOverflow.Ellipsis, + style = ElementTheme.typography.fontBodyMdRegular, + ) + } + } + + } +} + +@PreviewsDayNight +@Composable +internal fun AccountInfoCardPreview( + @PreviewParameter(AccountInfoCardStatePreviewParam::class) state: AccountInfoCardState +) = ElementPreview { + // Add some padding to view the border + Box(modifier = Modifier.padding(16.dp)) { + AccountInfoCard(state) + } +} diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCardState.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCardState.kt new file mode 100644 index 0000000000..68b66d72ee --- /dev/null +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCardState.kt @@ -0,0 +1,33 @@ +/* + * Copyright (c) 2026 Element Creations Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial. + * Please see LICENSE files in the repository root for full details. + */ + +package io.element.android.libraries.matrix.ui.components.accountinfo + +import androidx.compose.runtime.Immutable +import io.element.android.libraries.matrix.api.core.DeviceId +import io.element.android.libraries.matrix.api.user.MatrixUser + +data class AccountInfoCardState( + val matrixUser: MatrixUser, + val mode: AccountInfoCardMode, +) + +@Immutable +sealed interface AccountInfoCardMode { + data object Simple : AccountInfoCardMode + + data class UserVerification( + val otherUser: MatrixUser, + ) : AccountInfoCardMode + + // TODO Replace SessionDetailsView with this component + data class DeviceVerification( + val deviceName: String?, + val deviceId: DeviceId, + val signInFormattedTimestamp: String, + ) : AccountInfoCardMode +} diff --git a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCardStatePreviewParam.kt b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCardStatePreviewParam.kt new file mode 100644 index 0000000000..d383648154 --- /dev/null +++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/accountinfo/AccountInfoCardStatePreviewParam.kt @@ -0,0 +1,41 @@ +/* + * Copyright (c) 2026 Element Creations Ltd. + * + * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial. + * Please see LICENSE files in the repository root for full details. + */ + +package io.element.android.libraries.matrix.ui.components.accountinfo + +import androidx.compose.ui.tooling.preview.PreviewParameterProvider +import io.element.android.libraries.matrix.api.core.DeviceId +import io.element.android.libraries.matrix.api.user.MatrixUser +import io.element.android.libraries.matrix.ui.components.aMatrixUser + +open class AccountInfoCardStatePreviewParam : PreviewParameterProvider { + override val values: Sequence + get() = sequenceOf( + anAccountInfoCardState(), + anAccountInfoCardState(aMatrixUser(displayName = null)), + anAccountInfoCardState( + mode = AccountInfoCardMode.UserVerification( + otherUser = aMatrixUser(displayName = "Other User"), + ) + ), + anAccountInfoCardState( + mode = AccountInfoCardMode.DeviceVerification( + deviceName = "My Device", + deviceId = DeviceId("DEVICEID"), + signInFormattedTimestamp = "2024-06-01 12:00:00", + ) + ), + ) +} + +private fun anAccountInfoCardState( + matrixUser: MatrixUser = aMatrixUser(), + mode: AccountInfoCardMode = AccountInfoCardMode.Simple, +) = AccountInfoCardState( + matrixUser = matrixUser, + mode = mode, +)