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) },
-                title = {},
-            )
-        },
-        header = {
-            HeaderContent()
-        },
-        footer = {
-            BottomMenu(
-                state = state,
-                onSubmit = {
-                    state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.Submit)
-                },
-            )
-        }
-    ) {
-        Content(
-            state = state,
-            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),
+        content = { Content(state = state) },
+        buttons = { Buttons(state = state) }
     )
 }
 
-@Composable
-private fun BottomMenu(
-    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
-        )
-    }
-}
-
 @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,
+        onChange = {
-        onSubmit = onSubmit,
+            state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.OnRecoveryKeyChange(it))
+        },
+        onSubmit = {
+            state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.Submit)
+        },
+    )
+}
+
+@Composable
+private fun ColumnScope.Buttons(
+    state: SecureBackupEnterRecoveryKeyState,
+) {
+    Button(
+        text = stringResource(id = CommonStrings.action_confirm),
+        enabled = state.isSubmitEnabled,
+        showProgress = state.submitAction.isLoading(),
+        modifier = Modifier.fillMaxWidth(),
+        onClick = {
+            state.eventSink.invoke(SecureBackupEnterRecoveryKeyEvents.Submit)
+        }
     )
 }