feat: 2fa recovery screens

lib/app/components/button/button.dart

@@ -93,8 +93,10 @@ class Button extends StatelessWidget {
     ButtonStyle style,
     Color? borderColor,
     Color? backgroundColor,
-    double? leadingButtonOffset,
+    double? leadingIconOffset,
     double? trailingIconOffset,
+    bool? useDefaultBorderRadius,
+    bool? useDefaultPaddings,
     bool disabled,
     bool opened,
   }) = _ButtonDropdown;
@@ -236,10 +238,12 @@ class ButtonIconFrame extends StatelessWidget {
     required this.icon,
     super.key,
     this.color,
+    this.border,
   });
 
   final Color? color;
   final Widget icon;
+  final Border? border;
 
   @override
   Widget build(BuildContext context) {
@@ -250,6 +254,7 @@ class ButtonIconFrame extends StatelessWidget {
       decoration: BoxDecoration(
         color: color,
         borderRadius: BorderRadius.circular(9.0.s),
+        border: border,
       ),
       child: icon,
     );

lib/app/components/button/variants/button_dropdown.dart

@@ -9,27 +9,33 @@ class _ButtonDropdown extends Button {
     super.disabled,
     super.backgroundColor,
     super.borderColor,
-    double? leadingButtonOffset,
+    double? leadingIconOffset,
     double? trailingIconOffset,
     bool opened = false,
     ButtonStyle style = const ButtonStyle(),
+    bool? useDefaultBorderRadius = false,
+    bool? useDefaultPaddings,
   }) : super(
           type: ButtonType.dropdown,
           style: style.merge(
             OutlinedButton.styleFrom(
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.all(Radius.circular(12.0.s)),
-              ),
+              shape: useDefaultBorderRadius == false
+                  ? null
+                  : RoundedRectangleBorder(
+                      borderRadius: BorderRadius.all(Radius.circular(12.0.s)),
+                    ),
               minimumSize: Size.square(40.0.s),
-              padding: leadingIcon != null
-                  ? EdgeInsets.only(
-                      left: 4.0.s,
-                      right: 10.0.s,
-                    )
-                  : EdgeInsets.symmetric(horizontal: 14.0.s),
+              padding: useDefaultPaddings != null
+                  ? null
+                  : leadingIcon != null
+                      ? EdgeInsets.only(
+                          left: 4.0.s,
+                          right: 10.0.s,
+                        )
+                      : EdgeInsets.symmetric(horizontal: 14.0.s),
             ),
           ),
-          leadingIconOffset: leadingButtonOffset ?? 10.0.s,
+          leadingIconOffset: leadingIconOffset ?? 10.0.s,
           trailingIcon:
               (opened ? Assets.images.icons.iconArrowUp : Assets.images.icons.iconArrowDown).icon(),
           trailingIconOffset: trailingIconOffset ?? 8.0.s,

lib/app/components/button/widgetbook.dart

@@ -261,7 +261,7 @@ Widget dropdownButtonUseCase(BuildContext context) {
           leadingIcon: ButtonIconFrame(
             icon: Assets.images.icons.iconBadgeIcelogo.icon(size: 26.0.s),
           ),
-          leadingButtonOffset: 4.0.s,
+          leadingIconOffset: 4.0.s,
           backgroundColor: context.theme.appColors.tertararyBackground,
           label: Text(
             'ice.wallet',

lib/app/features/auth/data/models/twofa_type.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+enum TwoFaType {
+  auth,
+  email,
+  sms;
+
+  String getDisplayName(BuildContext context) {
+    return switch (this) {
+      TwoFaType.auth => context.i18n.two_fa_auth,
+      TwoFaType.email => context.i18n.two_fa_email,
+      TwoFaType.sms => context.i18n.two_fa_sms,
+    };
+  }
+
+  AssetGenImage get iconAsset {
+    return switch (this) {
+      TwoFaType.auth => Assets.images.icons.iconLoginAuthcode,
+      TwoFaType.email => Assets.images.icons.iconFieldEmail,
+      TwoFaType.sms => Assets.images.icons.iconLoginSmscode,
+    };
+  }
+}

lib/app/features/auth/views/pages/restore_menu/restore_menu.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:ice/app/components/screen_offset/screen_bottom_offset.dart';
@@ -17,6 +19,7 @@ class RestoreMenuPage extends HookWidget {
 
   @override
   Widget build(BuildContext context) {
+    final count = useState(Random().nextInt(3) + 1);
     final hideKeyboardAndCallOnce = useHideKeyboardAndCallOnce();
     return SheetContent(
       body: AuthScrollContainer(
@@ -42,7 +45,7 @@ class RestoreMenuPage extends HookWidget {
                   description: context.i18n.restore_identity_type_credentials_description,
                   onPressed: () {
                     hideKeyboardAndCallOnce(
-                      callback: () => RestoreCredsRoute().push<void>(context),
+                      callback: () => TwoFaOptionsRoute($extra: count.value).push<void>(context),
                     );
                   },
                 ),

lib/app/features/auth/views/pages/twofa_codes/twofa_code_input.dart

@@ -0,0 +1,56 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:ice/app/components/inputs/text_input/components/text_input_icons.dart';
+import 'package:ice/app/components/inputs/text_input/components/text_input_text_button.dart';
+import 'package:ice/app/components/inputs/text_input/text_input.dart';
+import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/app/features/auth/data/models/twofa_type.dart';
+import 'package:ice/app/hooks/use_countdown.dart';
+import 'package:ice/app/utils/validators.dart';
+
+class TwoFaCodeInput extends HookWidget {
+  const TwoFaCodeInput({required this.controller, required this.twoFaType, super.key});
+
+  final TextEditingController controller;
+  final TwoFaType twoFaType;
+
+  @override
+  Widget build(BuildContext context) {
+    final isSent = useState(false);
+    final countdownState = useCountdown(60);
+    final countdown = countdownState.countdown;
+    final startCountdown = countdownState.startCountdown;
+
+    return TextInput(
+      prefixIcon: TextInputIcons(
+        hasRightDivider: true,
+        icons: [twoFaType.iconAsset.icon()],
+      ),
+      labelText: twoFaType.getDisplayName(context),
+      controller: controller,
+      validator: (String? value) {
+        if (Validators.isEmpty(value)) return '';
+        return null;
+      },
+      textInputAction: TextInputAction.next,
+      scrollPadding: EdgeInsets.only(bottom: 200.0.s),
+      suffixIcon: countdown.value > 0
+          ? Padding(
+              padding: EdgeInsets.all(14.0.s),
+              child: Text(
+                context.i18n.common_seconds(countdown.value),
+                style: context.theme.appTextThemes.caption.copyWith(
+                  color: context.theme.appColors.tertararyText,
+                ),
+              ),
+            )
+          : TextInputTextButton(
+              onPressed: () {
+                isSent.value = true;
+                startCountdown();
+              },
+              label: isSent.value ? context.i18n.button_retry : context.i18n.button_send,
+            ),
+    );
+  }
+}

lib/app/features/auth/views/pages/twofa_codes/twofa_codes.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:ice/app/components/button/button.dart';
+import 'package:ice/app/components/screen_offset/screen_bottom_offset.dart';
+import 'package:ice/app/components/screen_offset/screen_side_offset.dart';
+import 'package:ice/app/extensions/asset_gen_image.dart';
+import 'package:ice/app/extensions/build_context.dart';
+import 'package:ice/app/extensions/num.dart';
+import 'package:ice/app/features/auth/data/models/twofa_type.dart';
+import 'package:ice/app/features/auth/views/components/auth_footer/auth_footer.dart';
+import 'package:ice/app/features/auth/views/components/auth_scrolled_body/auth_scrolled_body.dart';
+import 'package:ice/app/features/auth/views/pages/twofa_codes/twofa_code_input.dart';
+import 'package:ice/app/router/components/sheet_content/sheet_content.dart';
+import 'package:ice/generated/assets.gen.dart';
+
+class TwoFaCodesPage extends HookWidget {
+  const TwoFaCodesPage({
+    super.key,
+    required this.twoFaTypes,
+  });
+
+  final Set<TwoFaType> twoFaTypes;
+
+  @override
+  Widget build(BuildContext context) {
+    final formKey = useRef(GlobalKey<FormState>());
+    final controllers = {
+      for (final type in twoFaTypes) type: useTextEditingController(),
+    };
+
+    return SheetContent(
+      body: AuthScrollContainer(
+        title: context.i18n.two_fa_title,
+        description: context.i18n.two_fa_desc,
+        icon: Assets.images.icons.iconWalletProtectVar1.icon(size: 36.0.s),
+        children: [
+          Column(
+            children: [
+              ScreenSideOffset.large(
+                child: Form(
+                  key: formKey.value,
+                  child: Column(
+                    children: [
+                      SizedBox(height: 16.0.s),
+                      ...twoFaTypes.map((twoFaType) {
+                        return Padding(
+                          padding: EdgeInsets.only(bottom: 16.0.s),
+                          child: TwoFaCodeInput(
+                            controller: controllers[twoFaType]!,
+                            twoFaType: twoFaType,
+                          ),
+                        );
+                      }).toList(),
+                      Button(
+                        onPressed: () {
+                          if (!formKey.value.currentState!.validate()) {}
+                        },
+                        label: Text(context.i18n.button_confirm),
+                        mainAxisSize: MainAxisSize.max,
+                      ),
+                      SizedBox(height: 16.0.s),
+                    ],
+                  ),
+                ),
+              )
+            ],
+          ),
+          ScreenBottomOffset(
+            child: const AuthFooter(),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/app/features/auth/views/pages/twofa_options/twofa_option_selector.dart

@@ -0,0 +1,94 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:ice/app/components/button/button.dart';
+import 'package:ice/app/components/drop_down_menu/drop_down_menu.dart';
+import 'package:ice/app/components/screen_offset/screen_side_offset.dart';
+import 'package:ice/app/extensions/extensions.dart';
+import 'package:ice/app/features/auth/data/models/twofa_type.dart';
+import 'package:ice/app/features/auth/views/pages/twofa_options/twofa_options_selector_button.dart';
+
+class TwoFaOptionSelector extends HookWidget {
+  const TwoFaOptionSelector({
+    required this.availableOptions,
+    required this.optionIndex,
+    required this.onSaved,
+    super.key,
+  });
+
+  final Set<TwoFaType> availableOptions;
+  final int optionIndex;
+  final FormFieldSetter<TwoFaType?> onSaved;
+
+  static double get height => 58.0.s;
+
+  @override
+  Widget build(BuildContext context) {
+    final isOpened = useState(false);
+    final iconBorderSize = Border.fromBorderSide(
+      BorderSide(color: context.theme.appColors.onTerararyFill, width: 1.0.s),
+    );
+
+    return FormField<TwoFaType?>(
+      validator: (option) => option == null ? '' : null,
+      onSaved: onSaved,
+      builder: (state) {
+        return SizedBox(
+          width: double.infinity,
+          height: height,
+          child: DropDownMenu(
+            style: MenuStyle(
+              elevation: WidgetStateProperty.all(0),
+              side: WidgetStateProperty.all(
+                BorderSide(
+                  color: context.theme.appColors.strokeElements,
+                  width: 1.0.s,
+                ),
+              ),
+              minimumSize: WidgetStateProperty.all(
+                Size(
+                  MediaQuery.of(context).size.width - ScreenSideOffset.defaultLargeMargin * 2,
+                  height,
+                ),
+              ),
+            ),
+            crossAxisUnconstrained: false,
+            builder: (
+              BuildContext context,
+              MenuController controller,
+              Widget? child,
+            ) {
+              return TwoFaOptionsSelectorButton(
+                state: state,
+                controller: controller,
+                isOpened: isOpened,
+                optionIndex: optionIndex,
+              );
+            },
+            menuChildren: <MenuItemButton>[
+              for (final TwoFaType option in availableOptions)
+                MenuItemButton(
+                  onPressed: () {
+                    state.didChange(option);
+                    state.save();
+                    state.validate();
+                    isOpened.value = false;
+                  },
+                  leadingIcon: ButtonIconFrame(
+                    color: context.theme.appColors.secondaryBackground,
+                    icon: option.iconAsset.icon(
+                      size: 20.0.s,
+                      color: context.theme.appColors.secondaryText,
+                    ),
+                    border: iconBorderSize,
+                  ),
+                  child: Text(
+                    option.getDisplayName(context),
+                  ),
+                ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}