Change account provider screen.

2023-06-05 17:52:16 +02:00
parent 937e616319
commit 96f9eb8397
15 changed files with 675 additions and 2 deletions
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderEvents.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderEvents.kt
@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider
+
+sealed interface ChangeAccountProviderEvents {
+    data class SetServer(val server: String) : ChangeAccountProviderEvents
+    object Submit : ChangeAccountProviderEvents
+    object ClearError : ChangeAccountProviderEvents
+}
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderNode.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderNode.kt
@@ -0,0 +1,46 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.bumble.appyx.core.modality.BuildContext
+import com.bumble.appyx.core.node.Node
+import com.bumble.appyx.core.plugin.Plugin
+import dagger.assisted.Assisted
+import dagger.assisted.AssistedInject
+import io.element.android.anvilannotations.ContributesNode
+import io.element.android.libraries.di.AppScope
+
+@ContributesNode(AppScope::class)
+class ChangeAccountProviderNode @AssistedInject constructor(
+    @Assisted buildContext: BuildContext,
+    @Assisted plugins: List<Plugin>,
+    private val presenter: ChangeAccountProviderPresenter,
+) : Node(buildContext, plugins = plugins) {
+
+    @Composable
+    override fun View(modifier: Modifier) {
+        val state = presenter.present()
+        ChangeAccountProviderView(
+            state = state,
+            modifier = modifier,
+            // TODO
+            onBackPressed = {}
+        )
+    }
+}
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderPresenter.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderPresenter.kt
@@ -0,0 +1,79 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.saveable.rememberSaveable
+import io.element.android.features.login.impl.changeserver.ChangeServerError
+import io.element.android.features.login.impl.util.LoginConstants
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.architecture.Presenter
+import io.element.android.libraries.architecture.execute
+import io.element.android.libraries.core.data.tryOrNull
+import io.element.android.libraries.matrix.api.auth.MatrixAuthenticationService
+import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.launch
+import java.net.URL
+import javax.inject.Inject
+
+class ChangeAccountProviderPresenter @Inject constructor(
+    private val authenticationService: MatrixAuthenticationService
+) : Presenter<ChangeAccountProviderState> {
+
+    @Composable
+    override fun present(): ChangeAccountProviderState {
+        val localCoroutineScope = rememberCoroutineScope()
+
+        val homeserver = rememberSaveable {
+            mutableStateOf(authenticationService.getHomeserverDetails().value?.url ?: LoginConstants.DEFAULT_HOMESERVER_URL)
+        }
+        val changeServerAction: MutableState<Async<Unit>> = remember {
+            mutableStateOf(Async.Uninitialized)
+        }
+
+        fun handleEvents(event: ChangeAccountProviderEvents) {
+            when (event) {
+                is ChangeAccountProviderEvents.SetServer -> {
+                    homeserver.value = event.server
+                    handleEvents(ChangeAccountProviderEvents.ClearError)
+                }
+                ChangeAccountProviderEvents.Submit -> {
+                    localCoroutineScope.submit(homeserver, changeServerAction)
+                }
+                ChangeAccountProviderEvents.ClearError -> changeServerAction.value = Async.Uninitialized
+            }
+        }
+
+        return ChangeAccountProviderState(
+            homeserver = homeserver.value,
+            changeServerAction = changeServerAction.value,
+            eventSink = ::handleEvents
+        )
+    }
+
+    private fun CoroutineScope.submit(homeserverUrl: MutableState<String>, changeServerAction: MutableState<Async<Unit>>) = launch {
+        suspend {
+            val domain = tryOrNull { URL(homeserverUrl.value) }?.host ?: homeserverUrl.value
+            authenticationService.setHomeserver(domain).getOrThrow()
+            homeserverUrl.value = domain
+        }.execute(changeServerAction, errorMapping = ChangeServerError::from)
+    }
+}
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderState.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderState.kt
@@ -0,0 +1,29 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider
+
+import io.element.android.libraries.architecture.Async
+
+// Do not use default value, so no member get forgotten in the presenters.
+data class ChangeAccountProviderState(
+    val homeserver: String,
+    val changeServerAction: Async<Unit>,
+    val eventSink: (ChangeAccountProviderEvents) -> Unit
+) {
+    // TODO Remove
+    val submitEnabled: Boolean get() = changeServerAction is Async.Uninitialized || changeServerAction is Async.Loading
+}
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderStateProvider.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderStateProvider.kt
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import io.element.android.libraries.architecture.Async
+
+open class ChangeAccountProviderStateProvider : PreviewParameterProvider<ChangeAccountProviderState> {
+    override val values: Sequence<ChangeAccountProviderState>
+        get() = sequenceOf(
+            aChangeAccountProviderState(),
+            // Add other state here
+        )
+}
+
+fun aChangeAccountProviderState() = ChangeAccountProviderState(
+    homeserver = "",
+    changeServerAction = Async.Uninitialized,
+    eventSink = {}
+)
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderView.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/ChangeAccountProviderView.kt
@@ -0,0 +1,178 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@file:OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
+
+package io.element.android.features.login.impl.changeaccountprovider
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ExperimentalLayoutApi
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.consumeWindowInsets
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Home
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.platform.LocalFocusManager
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.features.login.impl.R
+import io.element.android.features.login.impl.changeaccountprovider.item.ChangeAccountProviderItem
+import io.element.android.features.login.impl.changeaccountprovider.item.ChangeAccountProviderItemView
+import io.element.android.features.login.impl.changeserver.ChangeServerError
+import io.element.android.features.login.impl.changeserver.SlidingSyncNotSupportedDialog
+import io.element.android.libraries.architecture.Async
+import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
+import io.element.android.libraries.designsystem.components.button.BackButton
+import io.element.android.libraries.designsystem.components.button.ButtonWithProgress
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Scaffold
+import io.element.android.libraries.designsystem.theme.components.TopAppBar
+import io.element.android.libraries.testtags.TestTags
+import io.element.android.libraries.testtags.testTag
+
+/**
+ * https://www.figma.com/file/o9p34zmiuEpZRyvZXJZAYL/FTUE?type=design&node-id=604-60817
+ */
+@Composable
+fun ChangeAccountProviderView(
+    state: ChangeAccountProviderState,
+    modifier: Modifier = Modifier,
+    onBackPressed: () -> Unit,
+    onOtherProviderClicked: () -> Unit = {},
+    onChangeServerSuccess: () -> Unit = {},
+) {
+    val eventSink = state.eventSink
+    val scrollState = rememberScrollState()
+    val isLoading by remember(state.changeServerAction) {
+        derivedStateOf {
+            state.changeServerAction is Async.Loading
+        }
+    }
+    val invalidHomeserverError = (state.changeServerAction as? Async.Failure)?.error as? ChangeServerError.InlineErrorMessage
+    val slidingSyncNotSupportedError = (state.changeServerAction as? Async.Failure)?.error as? ChangeServerError.SlidingSyncAlert
+    val focusManager = LocalFocusManager.current
+
+    fun submit() {
+        // Clear focus to prevent keyboard issues with textfields
+        focusManager.clearFocus(force = true)
+
+        eventSink(ChangeAccountProviderEvents.Submit)
+    }
+
+    Scaffold(
+        topBar = {
+            TopAppBar(
+                title = {},
+                navigationIcon = { BackButton(onClick = onBackPressed) }
+            )
+        }
+    ) { padding ->
+        Box(
+            modifier = modifier
+                .fillMaxSize()
+                .imePadding()
+                .padding(padding)
+                .consumeWindowInsets(padding)
+        ) {
+            Column(
+                modifier = Modifier
+                    .verticalScroll(
+                        state = scrollState,
+                    )
+            ) {
+                IconTitleSubtitleMolecule(
+                    modifier = Modifier.padding(top = 16.dp, bottom = 32.dp, start = 16.dp, end = 16.dp),
+                    iconImageVector = Icons.Filled.Home,
+                    title = stringResource(id = R.string.screen_change_account_provider_title),
+                    subTitle = stringResource(id = R.string.screen_change_account_provider_subtitle)
+                )
+
+                if (slidingSyncNotSupportedError != null) {
+                    SlidingSyncNotSupportedDialog(onLearnMoreClicked = {
+                        eventSink(ChangeAccountProviderEvents.ClearError)
+                    }, onDismiss = {
+                        eventSink(ChangeAccountProviderEvents.ClearError)
+                    })
+                }
+                ChangeAccountProviderItemView(
+                    item = ChangeAccountProviderItem(
+                        title = "matrix.org",
+                        subtitle = stringResource(id = R.string.screen_change_account_provider_matrix_org_subtitle),
+                        isPublic = true,
+                        isMatrix = true,
+                    ),
+                    onClick = {
+                        TODO()
+                    }
+                )
+                ChangeAccountProviderItemView(
+                    item = ChangeAccountProviderItem(
+                        title = stringResource(id = R.string.screen_change_account_provider_other),
+                    ),
+                    onClick = onOtherProviderClicked
+                )
+
+                Spacer(Modifier.height(32.dp))
+                ButtonWithProgress(
+                    text = stringResource(id = R.string.screen_change_server_submit),
+                    showProgress = isLoading,
+                    onClick = ::submit,
+                    enabled = state.submitEnabled,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .testTag(TestTags.changeServerContinue)
+                )
+                if (state.changeServerAction is Async.Success) {
+                    onChangeServerSuccess()
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun ChangeAccountProviderViewLightPreview(@PreviewParameter(ChangeAccountProviderStateProvider::class) state: ChangeAccountProviderState) =
+    ElementPreviewLight { ContentToPreview(state) }
+
+@Preview
+@Composable
+fun ChangeAccountProviderViewDarkPreview(@PreviewParameter(ChangeAccountProviderStateProvider::class) state: ChangeAccountProviderState) =
+    ElementPreviewDark { ContentToPreview(state) }
+
+@Composable
+private fun ContentToPreview(state: ChangeAccountProviderState) {
+    ChangeAccountProviderView(
+        state = state,
+        onBackPressed = { }
+    )
+}
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/item/ChangeAccountProviderItem.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/item/ChangeAccountProviderItem.kt
@@ -0,0 +1,24 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider.item
+
+data class ChangeAccountProviderItem(
+    val title: String,
+    val subtitle: String? = null,
+    val isPublic: Boolean = false,
+    val isMatrix: Boolean = false,
+)
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/item/ChangeAccountProviderItemProvider.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/item/ChangeAccountProviderItemProvider.kt
@@ -0,0 +1,36 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider.item
+
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+
+open class ChangeAccountProviderItemProvider : PreviewParameterProvider<ChangeAccountProviderItem> {
+    override val values: Sequence<ChangeAccountProviderItem>
+        get() = sequenceOf(
+            aChangeAccountProviderItem(),
+            aChangeAccountProviderItem().copy(subtitle = null),
+            aChangeAccountProviderItem().copy(title = "Other", subtitle = null, isPublic = false, isMatrix = false),
+            // Add other state here
+        )
+}
+
+fun aChangeAccountProviderItem() = ChangeAccountProviderItem(
+    title = "matrix.org",
+    subtitle = "Matrix.org is an open network for secure, decentralized communication.",
+    isPublic = true,
+    isMatrix = true,
+)
--- a/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/item/ChangeAccountProviderItemView.kt
+++ b/features/login/impl/src/main/kotlin/io/element/android/features/login/impl/changeaccountprovider/item/ChangeAccountProviderItemView.kt
@@ -0,0 +1,131 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.features.login.impl.changeaccountprovider.item
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Search
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.dp
+import io.element.android.features.login.impl.R
+import io.element.android.libraries.designsystem.ElementTextStyles
+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.atoms.SeparatorAtom
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Text
+
+/**
+ * https://www.figma.com/file/o9p34zmiuEpZRyvZXJZAYL/FTUE?type=design&node-id=604-60817
+ */
+@Composable
+fun ChangeAccountProviderItemView(
+    item: ChangeAccountProviderItem,
+    modifier: Modifier = Modifier,
+    onClick: () -> Unit,
+) {
+    Column(modifier = modifier
+        .fillMaxWidth()
+        .clickable { onClick() }) {
+        SeparatorAtom()
+        Column(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 4.dp, horizontal = 16.dp)
+        ) {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .heightIn(min = 44.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                if (item.isMatrix) {
+                    RoundedIconAtom(
+                        size = RoundedIconAtomSize.Medium,
+                        resourceId = R.drawable.ic_matrix,
+                        tint = Color.Unspecified,
+                    )
+                } else {
+                    RoundedIconAtom(
+                        size = RoundedIconAtomSize.Medium,
+                        imageVector = Icons.Filled.Search,
+                    )
+                }
+                Text(
+                    modifier = modifier
+                        .padding(start = 16.dp)
+                        .weight(1f),
+                    text = item.title,
+                    style = ElementTextStyles.Regular.headline.copy(textAlign = TextAlign.Start),
+                    color = MaterialTheme.colorScheme.primary,
+                )
+                if (item.isPublic) {
+                    Icon(
+                        modifier = Modifier
+                            .padding(start = 10.dp)
+                            .size(16.dp),
+                        resourceId = R.drawable.ic_public,
+                        contentDescription = null,
+                        tint = Color.Unspecified,
+                    )
+                }
+            }
+            if (item.subtitle != null) {
+                Text(
+                    modifier = modifier
+                        .padding(start = 46.dp, bottom = 12.dp, end = 26.dp),
+                    text = item.subtitle,
+                    style = ElementTextStyles.Regular.subheadline.copy(textAlign = TextAlign.Start),
+                    color = MaterialTheme.colorScheme.secondary,
+                )
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun ChangeAccountProviderViewLightPreview(@PreviewParameter(ChangeAccountProviderItemProvider::class) item: ChangeAccountProviderItem) =
+    ElementPreviewLight { ContentToPreview(item) }
+
+@Preview
+@Composable
+fun ChangeAccountProviderViewDarkPreview(@PreviewParameter(ChangeAccountProviderItemProvider::class) item: ChangeAccountProviderItem) =
+    ElementPreviewDark { ContentToPreview(item) }
+
+@Composable
+private fun ContentToPreview(item: ChangeAccountProviderItem) {
+    ChangeAccountProviderItemView(
+        item = item,
+        onClick = { }
+    )
+}
--- a/features/login/impl/src/main/res/drawable/ic_matrix.xml
+++ b/features/login/impl/src/main/res/drawable/ic_matrix.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M8,0L8,0A8,8 0,0 1,16 8L16,8A8,8 0,0 1,8 16L8,16A8,8 0,0 1,0 8L0,8A8,8 0,0 1,8 0z"
+      android:fillColor="#101317"/>
+  <path
+      android:pathData="M5.355,5.141V5.85H5.375C5.564,5.579 5.793,5.37 6.059,5.223C6.324,5.073 6.632,5 6.976,5C7.307,5 7.609,5.065 7.883,5.192C8.157,5.319 8.363,5.548 8.507,5.87C8.662,5.641 8.874,5.438 9.139,5.263C9.405,5.088 9.721,5 10.085,5C10.362,5 10.619,5.034 10.856,5.102C11.094,5.169 11.294,5.277 11.464,5.426C11.633,5.576 11.763,5.768 11.859,6.008C11.952,6.248 12,6.536 12,6.875V10.38H10.563V7.412C10.563,7.236 10.557,7.07 10.543,6.915C10.529,6.759 10.492,6.624 10.433,6.511C10.371,6.395 10.283,6.305 10.165,6.237C10.046,6.169 9.885,6.135 9.684,6.135C9.481,6.135 9.317,6.175 9.193,6.251C9.069,6.33 8.97,6.429 8.899,6.556C8.829,6.68 8.781,6.821 8.758,6.982C8.736,7.14 8.722,7.301 8.722,7.462V10.38H7.284V7.443C7.284,7.287 7.281,7.135 7.273,6.982C7.267,6.83 7.236,6.691 7.185,6.562C7.134,6.435 7.05,6.33 6.931,6.254C6.813,6.178 6.64,6.138 6.409,6.138C6.341,6.138 6.251,6.152 6.14,6.183C6.03,6.214 5.92,6.271 5.816,6.355C5.711,6.44 5.621,6.562 5.547,6.72C5.474,6.878 5.437,7.087 5.437,7.344V10.382H4V5.141H5.355Z"
+      android:fillColor="#EBEEF2"/>
+</vector>
--- a/features/login/impl/src/main/res/drawable/ic_public.xml
+++ b/features/login/impl/src/main/res/drawable/ic_public.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="16dp"
+    android:height="16dp"
+    android:viewportWidth="16"
+    android:viewportHeight="16">
+  <path
+      android:pathData="M16,8C16,12.418 12.418,16 8,16C3.582,16 0,12.418 0,8C0,3.582 3.582,0 8,0C12.418,0 16,3.582 16,8Z"
+      android:fillColor="#818A95"/>
+  <path
+      android:pathData="M12.473,12.527L13.079,10.656C13.087,10.631 13.091,10.605 13.091,10.579V10.065C13.091,10 13.066,9.938 13.02,9.891L12.483,9.339C12.464,9.319 12.442,9.303 12.418,9.291L11.218,8.674C11.194,8.661 11.172,8.645 11.153,8.625L10.619,8.076C10.572,8.028 10.507,8 10.44,8H8.25C8.112,8 8,7.888 8,7.75V6.941C8,6.803 7.888,6.691 7.75,6.691H6.341C6.203,6.691 6.091,6.579 6.091,6.441V5.689C6.091,5.53 6.236,5.412 6.391,5.444L8.972,5.975C9.128,6.007 9.273,5.888 9.273,5.73V4.829C9.273,4.764 9.298,4.701 9.344,4.655L11.012,2.938C11.107,2.841 11.107,2.687 11.012,2.59L9.948,1.494C9.922,1.468 9.892,1.448 9.857,1.435L9.37,1.249C8.482,0.911 7.507,0.88 6.6,1.161L6.091,1.318C4.776,1.747 3.742,2.774 3.305,4.086L3.081,4.758C3.027,4.919 2.995,5.086 2.986,5.255L2.915,6.582C2.911,6.652 2.937,6.72 2.985,6.77L4.108,7.925C4.155,7.973 4.22,8 4.288,8H5.394C5.434,8 5.473,8.01 5.508,8.028L6.592,8.585C6.675,8.628 6.727,8.714 6.727,8.807V10.561C6.727,10.599 6.736,10.636 6.753,10.67L7.295,11.787C7.337,11.873 7.424,11.927 7.52,11.927H8.531C8.598,11.927 8.663,11.955 8.71,12.003L9.273,12.582L9.881,13.208C9.9,13.227 9.915,13.249 9.927,13.273L10.39,14.225C10.466,14.381 10.673,14.415 10.794,14.29L11.182,13.891L11.818,13.237L12.414,12.624C12.441,12.596 12.461,12.563 12.473,12.527Z"
+      android:fillColor="#ffffff"/>
+</vector>
--- a/features/login/impl/src/main/res/values/localazy.xml
+++ b/features/login/impl/src/main/res/values/localazy.xml
@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
+  <string name="screen_change_account_provider_matrix_org_subtitle">"Matrix.org is an open network for secure, decentralized communication."</string>
+  <string name="screen_change_account_provider_other">"Other"</string>
+  <string name="screen_change_account_provider_subtitle">"Use a different account provider, such as your own private server or a work account."</string>
+  <string name="screen_change_account_provider_title">"Change account provider"</string>
  <string name="screen_change_server_error_invalid_homeserver">"We couldn\'t reach this homeserver. Please check that you have entered the homeserver URL correctly. If the URL is correct, contact your homeserver administrator for further help."</string>
  <string name="screen_change_server_error_no_sliding_sync_message">"This server currently doesn’t support sliding sync."</string>
  <string name="screen_change_server_form_header">"Homeserver URL"</string>
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/RoundedIconAtom.kt
@@ -28,6 +28,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.Dp
@@ -48,6 +49,7 @@ fun RoundedIconAtom(
    size: RoundedIconAtomSize = RoundedIconAtomSize.Large,
    resourceId: Int? = null,
    imageVector: ImageVector? = null,
+    tint: Color = MaterialTheme.colorScheme.secondary
 ) {
    Box(
        modifier = modifier
@@ -61,7 +63,7 @@ fun RoundedIconAtom(
            modifier = Modifier
                .align(Alignment.Center)
                .size(size.toIconSize()),
-            tint = MaterialTheme.colorScheme.secondary,
+            tint = tint,
            resourceId = resourceId,
            imageVector = imageVector,
            contentDescription = "",
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/SeparatorAtom.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/SeparatorAtom.kt
@@ -0,0 +1,62 @@
+/*
+ * Copyright (c) 2023 New Vector Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package io.element.android.libraries.designsystem.atomic.atoms
+
+import androidx.compose.foundation.background
+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.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.preview.ElementPreviewDark
+import io.element.android.libraries.designsystem.preview.ElementPreviewLight
+import io.element.android.libraries.designsystem.theme.LocalColors
+
+@Composable
+fun SeparatorAtom(
+    modifier: Modifier = Modifier,
+    horizontalPadding: Dp = 0.dp,
+) {
+    Spacer(
+        modifier = modifier
+            .height(0.5f.dp)
+            .fillMaxWidth()
+            .padding(horizontal = horizontalPadding)
+            .background(
+                color = LocalColors.current.quinary,
+            )
+    )
+}
+
+@Preview
+@Composable
+internal fun SeparatorAtomLightPreview() =
+    ElementPreviewLight { ContentToPreview() }
+
+@Preview
+@Composable
+internal fun SeparatorAtomDarkPreview() =
+    ElementPreviewDark { ContentToPreview() }
+
+@Composable
+private fun ContentToPreview() {
+    SeparatorAtom(horizontalPadding = 20.dp)
+}
--- a/tools/localazy/config.json
+++ b/tools/localazy/config.json
@@ -73,7 +73,8 @@
      "name": ":features:login:impl",
      "includeRegex": [
        "screen_login_.*",
-        "screen_change_server_.*"
+        "screen_change_server_.*",
+        "screen_change_account_provider_.*"
      ]
    },
    {