Let SecureBackupEnterRecoveryKeyView use UserStoryFlowPage.

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/enter/SecureBackupEnterRecoveryKeyView.kt

@@ -16,9 +16,9 @@
 
 package io.element.android.features.securebackup.impl.enter
 
+import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -26,19 +26,14 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.features.securebackup.impl.R
 import io.element.android.features.securebackup.impl.setup.views.RecoveryKeyView
-import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
+import io.element.android.libraries.designsystem.atomic.pages.UserStoryFlowPage
-import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
-import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.components.async.AsyncView
-import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
-import io.element.android.libraries.designsystem.theme.components.TopAppBar
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.ui.strings.CommonStrings
 
-@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SecureBackupEnterRecoveryKeyView(
     state: SecureBackupEnterRecoveryKeyState,
@@ -53,79 +48,47 @@ fun SecureBackupEnterRecoveryKeyView(
         onErrorDismiss = { state.eventSink(SecureBackupEnterRecoveryKeyEvents.ClearDialog) },
     )
 
-    HeaderFooterPage(
+    UserStoryFlowPage(
         modifier = modifier,
-        topBar = {
+        canGoBack = true,
-            TopAppBar(
+        onBackClicked = onBackClicked,
-                navigationIcon = { BackButton(onClick = onBackClicked) },
+        iconResourceId = CommonDrawables.ic_key,
-                title = {},
+        title = stringResource(id = R.string.screen_recovery_key_confirm_title),
-            )
+        subTitle = stringResource(id = R.string.screen_recovery_key_confirm_description),
-        },
+        content = { Content(state = state) },
-        header = {
+        buttons = { Buttons(state = state) }
-            HeaderContent()
-        },
-        footer = {
-            BottomMenu(
-                state = state,
-                onSubmit = {
-                    state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.Submit)
-                },
     )
 }
+
+@Composable
+private fun Content(
+    state: SecureBackupEnterRecoveryKeyState,
 ) {
-        Content(
+    RecoveryKeyView(
-            state = state,
+        modifier = Modifier.padding(top = 52.dp),
+        state = state.recoveryKeyViewState,
+        onClick = null,
         onChange = {
             state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.OnRecoveryKeyChange(it))
         },
         onSubmit = {
             state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.Submit)
-            })
+        },
-    }
-}
-
-@Composable
-private fun HeaderContent(
-    modifier: Modifier = Modifier,
-) {
-    IconTitleSubtitleMolecule(
-        modifier = modifier.padding(top = 0.dp),
-        iconResourceId = CommonDrawables.ic_key,
-        title = stringResource(id = R.string.screen_recovery_key_confirm_title),
-        subTitle = stringResource(id = R.string.screen_recovery_key_confirm_description),
     )
 }
 
 @Composable
-private fun BottomMenu(
+private fun ColumnScope.Buttons(
     state: SecureBackupEnterRecoveryKeyState,
-    onSubmit: () -> Unit,
-) {
-    ButtonColumnMolecule(
-        modifier = Modifier.padding(bottom = 20.dp)
 ) {
     Button(
         text = stringResource(id = CommonStrings.action_confirm),
         enabled = state.isSubmitEnabled,
         showProgress = state.submitAction.isLoading(),
         modifier = Modifier.fillMaxWidth(),
-            onClick = onSubmit
+        onClick = {
-        )
+            state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.Submit)
         }
-}
-
-@Composable
-private fun Content(
-    state: SecureBackupEnterRecoveryKeyState,
-    onChange: (String) -> Unit,
-    onSubmit: () -> Unit,
-) {
-    RecoveryKeyView(
-        modifier = Modifier.padding(top = 52.dp),
-        state = state.recoveryKeyViewState,
-        onClick = null,
-        onChange = onChange,
-        onSubmit = onSubmit,
     )
 }