fix: add missing auth footer to recovery pages (#590)

## Description This PR adds a missing AuthFooter widget to Restore identity key pages. It also slightly alters a restore button position. ## Type of Change - [x] Bug fix - [ ] New feature - [ ] Breaking change - [x] Refactoring - [ ] Documentation - [ ] Chore ## Screenshots (if applicable) ![ScreenShot 2025-01-22 at 11 18 53@2x](https://github.com/user-attachments/assets/a67cbafe-5f37-4451-bf1b-1728580478cf)
ice-blockchain · Jan 22, 2025 · 3f96e45 · 3f96e45
1 parent 56b1e7d
commit 3f96e45
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 31 deletions.
diff --git a/...es/auth/views/components/recovery_keys_input_container/recovery_keys_input_container.dart b/...es/auth/views/components/recovery_keys_input_container/recovery_keys_input_container.dart
@@ -20,16 +20,12 @@ class RecoveryKeysInputContainer extends HookConsumerWidget {
     required this.validator,
     required this.onContinuePressed,
     this.isLoading = false,
-    this.title,
-    this.buttonName,
     super.key,
   });
 
   final bool isLoading;
   final String? Function(String?, RecoveryKeyProperty) validator;
   final void Function(String name, String id, String code) onContinuePressed;
-  final String? title;
-  final String? buttonName;
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -41,7 +37,7 @@ class RecoveryKeysInputContainer extends HookConsumerWidget {
     return SheetContent(
       topPadding: 0,
       body: AuthScrollContainer(
-        title: title ?? context.i18n.backup_option_with_recovery_keys_title,
+        title: context.i18n.backup_option_with_recovery_keys_title,
         description: context.i18n.restore_identity_creds_description,
         icon: Assets.svg.iconLoginRestorekey.icon(size: 36.0.s),
         titleStyle: context.theme.appTextThemes.headline2,
@@ -86,7 +82,7 @@ class RecoveryKeysInputContainer extends HookConsumerWidget {
             margin: 36.0.s,
             child: ScreenSideOffset.large(
               child: Button(
-                label: Text(buttonName ?? context.i18n.button_continue),
+                label: Text(context.i18n.button_continue),
                 mainAxisSize: MainAxisSize.max,
                 disabled: isLoading,
                 onPressed: () {

diff --git a/lib/app/features/auth/views/pages/recover_user_page/components/recovery_creds_step.dart b/lib/app/features/auth/views/pages/recover_user_page/components/recovery_creds_step.dart
@@ -1,12 +1,23 @@
 // SPDX-License-Identifier: ice License 1.0
 
 import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:ion/app/extensions/build_context.dart';
-import 'package:ion/app/features/auth/views/components/recovery_keys_input_container/recovery_keys_input_container.dart';
+import 'package:ion/app/components/button/button.dart';
+import 'package:ion/app/components/screen_offset/screen_bottom_offset.dart';
+import 'package:ion/app/components/screen_offset/screen_side_offset.dart';
+import 'package:ion/app/extensions/extensions.dart';
+import 'package:ion/app/features/auth/views/components/auth_footer/auth_footer.dart';
+import 'package:ion/app/features/auth/views/components/auth_scrolled_body/auth_scrolled_body.dart';
+import 'package:ion/app/features/protect_account/backup/data/models/recovery_key_property.dart';
 import 'package:ion/app/features/protect_account/backup/providers/recover_user_action_notifier.c.dart';
+import 'package:ion/app/features/protect_account/backup/views/components/errors/recovery_keys_error_alert.dart';
+import 'package:ion/app/features/protect_account/backup/views/components/recovery_key_input.dart';
+import 'package:ion/app/router/components/sheet_content/sheet_content.dart';
+import 'package:ion/app/router/utils/show_simple_bottom_sheet.dart';
+import 'package:ion/generated/assets.gen.dart';
 
-class RecoveryCredsStep extends ConsumerWidget {
+class RecoveryCredsStep extends HookConsumerWidget {
   const RecoveryCredsStep({
     required this.onContinuePressed,
     super.key,
@@ -22,13 +33,76 @@ class RecoveryCredsStep extends ConsumerWidget {
     final isCompleteLoading = ref.watch(
       completeUserRecoveryActionNotifierProvider.select((it) => it.isLoading),
     );
+    final formKey = useRef(GlobalKey<FormState>());
+    final controllers = {
+      for (final key in RecoveryKeyProperty.values) key: useTextEditingController(),
+    };
 
-    return RecoveryKeysInputContainer(
-      isLoading: isInitLoading || isCompleteLoading,
-      validator: (value, property) => value == null || value.isEmpty ? '' : null,
-      onContinuePressed: onContinuePressed,
-      title: context.i18n.restore_identity_title,
-      buttonName: context.i18n.button_restore,
+    return SheetContent(
+      topPadding: 0,
+      body: AuthScrollContainer(
+        title: context.i18n.restore_identity_title,
+        description: context.i18n.restore_identity_creds_description,
+        icon: Assets.svg.iconLoginRestorekey.icon(size: 36.0.s),
+        titleStyle: context.theme.appTextThemes.headline2,
+        descriptionStyle: context.theme.appTextThemes.body2.copyWith(
+          color: context.theme.appColors.tertararyText,
+        ),
+        children: [
+          Expanded(
+            child: ScreenSideOffset.large(
+              child: Form(
+                key: formKey.value,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    SizedBox(height: 16.0.s),
+                    ...RecoveryKeyProperty.values.map(
+                      (key) => Padding(
+                        padding: EdgeInsets.only(bottom: 16.0.s),
+                        child: RecoveryKeyInput(
+                          controller: controllers[key]!,
+                          labelText: key.getDisplayName(context),
+                          prefixIcon:
+                              key.iconAsset.icon(color: context.theme.appColors.secondaryText),
+                          validator: (value) => value == null || value.isEmpty ? '' : null,
+                          textInputAction: key == RecoveryKeyProperty.recoveryCode
+                              ? TextInputAction.done
+                              : TextInputAction.next,
+                        ),
+                      ),
+                    ),
+                    SizedBox(height: 16.0.s),
+                    Button(
+                      label: Text(context.i18n.button_restore),
+                      mainAxisSize: MainAxisSize.max,
+                      disabled: isInitLoading || isCompleteLoading,
+                      onPressed: () {
+                        if (formKey.value.currentState!.validate()) {
+                          onContinuePressed(
+                            controllers[RecoveryKeyProperty.identityKeyName]!.text,
+                            controllers[RecoveryKeyProperty.recoveryKeyId]!.text,
+                            controllers[RecoveryKeyProperty.recoveryCode]!.text,
+                          );
+                        } else {
+                          showSimpleBottomSheet<void>(
+                            context: context,
+                            child: const RecoveryKeysErrorAlert(),
+                          );
+                        }
+                      },
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+          ScreenBottomOffset(
+            margin: 28.0.s,
+            child: const AuthFooter(),
+          ),
+        ],
+      ),
     );
   }
 }
diff --git a/lib/app/features/auth/views/pages/recover_user_page/recover_user_success_page.dart b/lib/app/features/auth/views/pages/recover_user_page/recover_user_success_page.dart
@@ -25,23 +25,19 @@ class RecoverUserSuccessPage extends StatelessWidget {
       body: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
-          Column(
-            children: [
-              SizedBox(height: 24.0.s),
-              ScreenSideOffset.medium(
-                child: InfoCard(
-                  iconAsset: Assets.svg.actionWalletSuccess2Fa,
-                  title: context.i18n.common_congratulations,
-                  description: context.i18n.two_fa_success_desc,
-                ),
-              ),
-              SizedBox(height: 16.0.s),
-              ScreenSideOffset.small(
-                child: WarningCard(text: context.i18n.two_fa_success_warning_desc),
-              ),
-              SizedBox(height: 16.0.s),
-            ],
+          SizedBox(height: 24.0.s),
+          ScreenSideOffset.medium(
+            child: InfoCard(
+              iconAsset: Assets.svg.actionWalletSuccess2Fa,
+              title: context.i18n.common_congratulations,
+              description: context.i18n.two_fa_success_desc,
+            ),
+          ),
+          SizedBox(height: 16.0.s),
+          ScreenSideOffset.small(
+            child: WarningCard(text: context.i18n.two_fa_success_warning_desc),
           ),
+          SizedBox(height: 20.0.s),
           ScreenBottomOffset(
             margin: 36.0.s,
             child: ScreenSideOffset.small(

diff --git a/lib/app/features/auth/views/pages/restore_menu/restore_menu.dart b/lib/app/features/auth/views/pages/restore_menu/restore_menu.dart
@@ -52,6 +52,7 @@ class RestoreMenuPage extends StatelessWidget {
             ),
           ),
           ScreenBottomOffset(
+            margin: 28.0.s,
             child: const AuthFooter(),
           ),
         ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,6 +52,7 @@ class RestoreMenuPage extends StatelessWidget { @@
                 ),
               ),
               ScreenBottomOffset(
+                margin: 28.0.s,
                 child: const AuthFooter(),
               ),
             ],
@@ Expand Down @@