From 9129c4ecedeacac489e6c42f5151115d4de88704 Mon Sep 17 00:00:00 2001 From: ice-ajax <190340101+ice-ajax@users.noreply.github.com> Date: Tue, 24 Dec 2024 14:11:10 +0100 Subject: [PATCH] fix: make delete 2fa pages scrollable to fit the whole content in case of many 2fa options set up --- .../delete_twofa_initial_scaffold.dart | 1 - .../components/delete_twofa_input_step.dart | 103 ++++++++++-------- .../delete_twofa_select_options_step.dart | 56 ++++++---- .../delete_twofa_step_scaffold.dart | 31 ++---- 4 files changed, 102 insertions(+), 89 deletions(-) diff --git a/lib/app/features/protect_account/components/delete_twofa_initial_scaffold.dart b/lib/app/features/protect_account/components/delete_twofa_initial_scaffold.dart index d4d945e6b..a6077de57 100644 --- a/lib/app/features/protect_account/components/delete_twofa_initial_scaffold.dart +++ b/lib/app/features/protect_account/components/delete_twofa_initial_scaffold.dart @@ -36,7 +36,6 @@ class DeleteTwoFaInitialScaffold extends StatelessWidget { children: [ NavigationAppBar.modal(), AuthHeader( - topOffset: 34.0.s, title: headerTitle, titleStyle: context.theme.appTextThemes.headline2, descriptionStyle: context.theme.appTextThemes.body2.copyWith( diff --git a/lib/app/features/protect_account/components/delete_twofa_input_step.dart b/lib/app/features/protect_account/components/delete_twofa_input_step.dart index 1c4734f21..89e3e79cc 100644 --- a/lib/app/features/protect_account/components/delete_twofa_input_step.dart +++ b/lib/app/features/protect_account/components/delete_twofa_input_step.dart @@ -49,54 +49,67 @@ class DeleteTwoFAInputStep extends HookConsumerWidget { return ScreenSideOffset.large( child: Form( key: formKey.value, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Column( - children: [ - for (final twoFaType in twoFaTypes) - Padding( - padding: EdgeInsets.only(bottom: 22.0.s), - child: TwoFaCodeInput( - controller: controllers[twoFaType]!, - twoFaType: twoFaType, - onRequestCode: () async { - await guardPasskeyDialog( - ref.context, - (child) => RiverpodVerifyIdentityRequestBuilder( - provider: requestTwoFaCodeNotifierProvider, - requestWithVerifyIdentity: - (OnVerifyIdentity onVerifyIdentity) { - ref.read(requestTwoFaCodeNotifierProvider.notifier).requestTwoFaCode( - twoFaType, - onVerifyIdentity, - ); - }, - child: child, - ), - ); - }, - isSending: isRequesting, - ), + child: CustomScrollView( + slivers: [ + SliverList.builder( + itemCount: twoFaTypes.length, + itemBuilder: (context, index) { + final twoFaType = twoFaTypes[index]; + return Padding( + padding: EdgeInsets.only(bottom: 22.0.s), + child: TwoFaCodeInput( + controller: controllers[twoFaType]!, + twoFaType: twoFaType, + onRequestCode: () async { + await guardPasskeyDialog( + ref.context, + (child) => RiverpodVerifyIdentityRequestBuilder( + provider: requestTwoFaCodeNotifierProvider, + requestWithVerifyIdentity: + (OnVerifyIdentity onVerifyIdentity) { + ref.read(requestTwoFaCodeNotifierProvider.notifier).requestTwoFaCode( + twoFaType, + onVerifyIdentity, + ); + }, + child: child, + ), + ); + }, + isSending: isRequesting, ), - ], - ), - const Spacer(), - WarningCard( - text: context.i18n.two_fa_warning, - ), - SizedBox( - height: 24.0.s, - ), - Button( - mainAxisSize: MainAxisSize.max, - label: Text(context.i18n.button_confirm), - onPressed: () { - if (formKey.value.currentState!.validate()) { - _onConfirm(ref, controllers); - } + ); }, ), + SliverFillRemaining( + hasScrollBody: false, + child: Align( + alignment: Alignment.bottomCenter, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + WarningCard( + text: context.i18n.two_fa_warning, + ), + SizedBox( + height: 24.0.s, + ), + Button( + mainAxisSize: MainAxisSize.max, + label: Text(context.i18n.button_confirm), + onPressed: () { + if (formKey.value.currentState!.validate()) { + _onConfirm(ref, controllers); + } + }, + ), + SizedBox( + height: 48.0.s, + ), + ], + ), + ), + ), ], ), ), diff --git a/lib/app/features/protect_account/components/delete_twofa_select_options_step.dart b/lib/app/features/protect_account/components/delete_twofa_select_options_step.dart index 8bbe4b2ef..fe7813fca 100644 --- a/lib/app/features/protect_account/components/delete_twofa_select_options_step.dart +++ b/lib/app/features/protect_account/components/delete_twofa_select_options_step.dart @@ -29,12 +29,11 @@ class DeleteTwoFASelectOptionStep extends ConsumerWidget { return ScreenSideOffset.large( child: Form( key: formKey, - child: Column( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - ...List.generate( - optionsState.optionsAmount, - (option) { + child: CustomScrollView( + slivers: [ + SliverList.builder( + itemCount: optionsState.optionsAmount, + itemBuilder: (context, option) { return Padding( padding: EdgeInsets.only(bottom: 22.0.s), child: TwoFaOptionSelector( @@ -49,22 +48,35 @@ class DeleteTwoFASelectOptionStep extends ConsumerWidget { ); }, ), - const Spacer(), - WarningCard( - text: context.i18n.two_fa_warning, - ), - SizedBox( - height: 24.0.s, - ), - Button( - mainAxisSize: MainAxisSize.max, - label: Text(context.i18n.button_confirm), - onPressed: () { - formKey.currentState!.save(); - if (formKey.currentState!.validate()) { - onConfirm(); - } - }, + SliverFillRemaining( + hasScrollBody: false, + child: Align( + alignment: Alignment.bottomCenter, + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + WarningCard( + text: context.i18n.two_fa_warning, + ), + SizedBox( + height: 24.0.s, + ), + Button( + mainAxisSize: MainAxisSize.max, + label: Text(context.i18n.button_confirm), + onPressed: () { + formKey.currentState!.save(); + if (formKey.currentState!.validate()) { + onConfirm(); + } + }, + ), + SizedBox( + height: 48.0.s, + ), + ], + ), + ), ), ], ), diff --git a/lib/app/features/protect_account/components/delete_twofa_step_scaffold.dart b/lib/app/features/protect_account/components/delete_twofa_step_scaffold.dart index 1aabec004..f85e96be8 100644 --- a/lib/app/features/protect_account/components/delete_twofa_step_scaffold.dart +++ b/lib/app/features/protect_account/components/delete_twofa_step_scaffold.dart @@ -26,9 +26,10 @@ class DeleteTwoFAStepScaffold extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { return SheetContent( - body: CustomScrollView( - slivers: [ - SliverAppBar( + bottomPadding: 0, + body: Column( + children: [ + AppBar( primary: false, flexibleSpace: NavigationAppBar.modal( actions: [ @@ -39,26 +40,14 @@ class DeleteTwoFAStepScaffold extends ConsumerWidget { ), toolbarHeight: NavigationAppBar.modalHeaderHeight, automaticallyImplyLeading: false, - pinned: true, ), - SliverToBoxAdapter( - child: AuthHeader( - topOffset: 34.0.s, - title: headerTitle, - description: headerDescription, - icon: AuthHeaderIcon(icon: headerIcon), - ), - ), - SliverFillRemaining( - hasScrollBody: false, - child: Column( - children: [ - SizedBox(height: 64.0.s), - Expanded(child: child), - SizedBox(height: 16.0.s), - ], - ), + AuthHeader( + title: headerTitle, + description: headerDescription, + icon: AuthHeaderIcon(icon: headerIcon), ), + SizedBox(height: 64.0.s), + Expanded(child: child), ], ), );