feat(cat-voices): My account, modals

.config/dictionaries/project.dic

@@ -222,6 +222,7 @@ Scripthash
 ScyllaDB
 seckey
 Seedable
+seedphrase
 sendfile
 servernum
 serviceworker

catalyst_voices/lib/pages/account/account_page.dart

@@ -1,6 +1,9 @@
 import 'package:catalyst_voices/common/ext/account_role_ext.dart';
+import 'package:catalyst_voices/pages/account/delete_keychain_dialog.dart';
+import 'package:catalyst_voices/pages/account/keychain_deleted_dialog.dart';
 import 'package:catalyst_voices/widgets/buttons/voices_icon_button.dart';
 import 'package:catalyst_voices/widgets/buttons/voices_text_button.dart';
+import 'package:catalyst_voices/widgets/modals/voices_dialog.dart';
 import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
@@ -35,7 +38,25 @@ final class AccountPage extends StatelessWidget {
                       AccountRole.drep,
                     ],
                     defaultRole: AccountRole.voter,
-                    onRemoveKeychain: () => debugPrint('Keychain removed'),
+                    onRemoveKeychain: () async {
+                      await VoicesDialog.show<void>(
+                        context: context,
+                        builder: (context) {
+                          return DeleteKeychainDialog(
+                            onRemoveKeychainConfirmed: () async {
+                              // TODO(Jakub): remove keychain
+                              Navigator.of(context).pop();
+                              await VoicesDialog.show<void>(
+                                context: context,
+                                builder: (context) {
+                                  return const KeychainDeletedDialog();
+                                },
+                              );
+                            },
+                          );
+                        },
+                      );
+                    },
                   ),
                 ],
               ),

catalyst_voices/lib/pages/account/delete_keychain_dialog.dart

@@ -0,0 +1,148 @@
+import 'package:catalyst_voices/widgets/buttons/voices_filled_button.dart';
+import 'package:catalyst_voices/widgets/buttons/voices_text_button.dart';
+import 'package:catalyst_voices/widgets/modals/voices_desktop_dialog.dart';
+import 'package:catalyst_voices/widgets/text_field/voices_text_field.dart';
+import 'package:catalyst_voices_assets/catalyst_voices_assets.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+class DeleteKeychainDialog extends StatefulWidget {
+  final VoidCallback? onRemoveKeychainConfirmed;
+
+  const DeleteKeychainDialog({
+    super.key,
+    this.onRemoveKeychainConfirmed,
+  });
+
+  @override
+  State<DeleteKeychainDialog> createState() => _DeleteKeychainDialogState();
+}
+
+class _DeleteKeychainDialogState extends State<DeleteKeychainDialog> {
+  final _textEditingController = TextEditingController();
+  String? _errorText;
+
+  @override
+  void initState() {
+    super.initState();
+    _textEditingController.addListener(() {
+      setState(() {
+        _errorText = null;
+      });
+    });
+  }
+
+  @override
+  void dispose() {
+    _textEditingController.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return VoicesSinglePaneDialog(
+      backgroundColor: Theme.of(context).colors.iconsBackground,
+      showBorder: true,
+      constraints: const BoxConstraints(maxHeight: 500, maxWidth: 900),
+      child: SizedBox(
+        width: double.infinity,
+        child: SingleChildScrollView(
+          child: Column(
+            children: [
+              const SizedBox(height: 24),
+              Text(
+                context.l10n.deleteKeychainDialogTitle,
+                style: Theme.of(context).textTheme.titleLarge,
+              ),
+              const SizedBox(height: 48),
+              Text(
+                context.l10n.deleteKeychainDialogSubtitle,
+                style: Theme.of(context).textTheme.titleMedium,
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 32),
+              Wrap(
+                children: [
+                  VoicesAssets.icons.exclamation.buildIcon(
+                    color: Theme.of(context).colors.iconsError,
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.only(top: 2, left: 8),
+                    child: Text(
+                      context.l10n.deleteKeychainDialogWarning,
+                      style: Theme.of(context).textTheme.titleSmall,
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 8),
+              Text(
+                context.l10n.deleteKeychainDialogWarningInfo,
+                style: Theme.of(context).textTheme.bodyMedium,
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 48),
+              Text(
+                context.l10n.deleteKeychainDialogTypingInfo,
+                style: Theme.of(context).textTheme.titleSmall,
+              ),
+              const SizedBox(height: 24),
+              Wrap(
+                direction: Axis.vertical,
+                children: [
+                  Text(
+                    context.l10n.deleteKeychainDialogInputLabel,
+                    style: Theme.of(context).textTheme.titleSmall,
+                  ),
+                  const SizedBox(height: 2),
+                  SizedBox(
+                    width: 300,
+                    child: VoicesTextField(
+                      controller: _textEditingController,
+                      decoration: VoicesTextFieldDecoration(
+                        errorText: _errorText,
+                        errorMaxLines: 2,
+                        filled: true,
+                        fillColor: Theme.of(context)
+                            .colors
+                            .elevationsOnSurfaceNeutralLv1White,
+                      ),
+                    ),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 24),
+              Wrap(
+                children: [
+                  VoicesFilledButton(
+                    backgroundColor: Theme.of(context).colors.iconsError,
+                    onTap: () async => _onRemoveKeychainTap(),
+                    child: Text(context.l10n.delete),
+                  ),
+                  const SizedBox(width: 8),
+                  VoicesTextButton.custom(
+                    color: Theme.of(context).colors.iconsError,
+                    onTap: () => Navigator.of(context).pop(),
+                    child: Text(context.l10n.cancelButtonText),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  Future<void> _onRemoveKeychainTap() async {
+    if (_textEditingController.text ==
+        context.l10n.deleteKeychainDialogRemovingPhrase) {
+      widget.onRemoveKeychainConfirmed?.call();
+    } else {
+      setState(() {
+        _errorText = context.l10n.deleteKeychainDialogErrorText;
+      });
+    }
+  }
+}

catalyst_voices/lib/pages/account/keychain_deleted_dialog.dart

@@ -0,0 +1,49 @@
+import 'package:catalyst_voices/widgets/buttons/voices_filled_button.dart';
+import 'package:catalyst_voices/widgets/modals/voices_desktop_dialog.dart';
+import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+class KeychainDeletedDialog extends StatelessWidget {
+  const KeychainDeletedDialog({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return VoicesSinglePaneDialog(
+      backgroundColor: Theme.of(context).colors.iconsBackground,
+      showBorder: true,
+      constraints: const BoxConstraints(maxHeight: 260, maxWidth: 900),
+      child: SizedBox(
+        width: double.infinity,
+        child: SingleChildScrollView(
+          child: Column(
+            children: [
+              const SizedBox(height: 24),
+              Text(
+                context.l10n.keychainDeletedDialogTitle,
+                style: Theme.of(context).textTheme.titleLarge,
+              ),
+              const SizedBox(height: 48),
+              Text(
+                context.l10n.keychainDeletedDialogSubtitle,
+                style: Theme.of(context).textTheme.titleMedium,
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 32),
+              Text(
+                context.l10n.keychainDeletedDialogInfo,
+                style: Theme.of(context).textTheme.bodyMedium,
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 24),
+              VoicesFilledButton(
+                onTap: () => Navigator.of(context).pop(),
+                child: Text(context.l10n.close),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

catalyst_voices/lib/pages/registration/registration_dialog.dart

@@ -41,7 +41,7 @@ class _RegistrationDialog extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return VoicesDesktopPanelsDialog(
+    return VoicesTwoPaneDialog(
       left: RegistrationInfoPanel(
         state: state,
       ),

catalyst_voices/lib/widgets/buttons/voices_filled_button.dart

@@ -16,6 +16,9 @@ class VoicesFilledButton extends StatelessWidget {
   /// The widget to be displayed after the button's main content.
   final Widget? trailing;
 
+  /// The optional button's background color.
+  final Color? backgroundColor;
+
   /// The main content of the button.
   final Widget child;
 
@@ -24,12 +27,16 @@ class VoicesFilledButton extends StatelessWidget {
     this.onTap,
     this.leading,
     this.trailing,
+    this.backgroundColor,
     required this.child,
   });
 
   @override
   Widget build(BuildContext context) {
     return FilledButton(
+      style: FilledButton.styleFrom(
+        backgroundColor: backgroundColor,
+      ),
       onPressed: onTap,
       child: VoicesButtonAffixDecoration(
         leading: leading,

catalyst_voices/lib/widgets/modals/voices_desktop_dialog.dart

@@ -2,24 +2,35 @@ import 'package:catalyst_voices/widgets/buttons/voices_buttons.dart';
 import 'package:catalyst_voices_brands/catalyst_voices_brands.dart';
 import 'package:flutter/material.dart';
 
-class VoicesDesktopDialog extends StatelessWidget {
+/// Commonly used structure for desktop dialogs.
+///
+/// Keep in mind that this dialog has fixed size of 900x600 and
+/// is always adding close button in top right corner.
+class VoicesSinglePaneDialog extends StatelessWidget {
   final BoxConstraints constraints;
+  final Color? backgroundColor;
+  final bool showBorder;
   final Widget child;
 
-  const VoicesDesktopDialog({
+  const VoicesSinglePaneDialog({
     super.key,
     this.constraints = const BoxConstraints(minWidth: 900, minHeight: 600),
+    this.backgroundColor,
+    this.showBorder = false,
     required this.child,
   });
 
   @override
   Widget build(BuildContext context) {
-    return Dialog(
-      alignment: Alignment.topCenter,
-      insetPadding: const EdgeInsets.symmetric(horizontal: 40, vertical: 90),
-      child: ConstrainedBox(
-        constraints: constraints,
-        child: child,
+    return _VoicesDesktopDialog(
+      backgroundColor: Theme.of(context).colors.iconsBackground,
+      showBorder: true,
+      constraints: constraints,
+      child: Stack(
+        children: [
+          child,
+          const _DialogCloseButton(),
+        ],
       ),
     );
   }
@@ -29,11 +40,11 @@ class VoicesDesktopDialog extends StatelessWidget {
 ///
 /// Keep in mind that this dialog has fixed size of 900x600 and
 /// is always adding close button in top right corner.
-class VoicesDesktopPanelsDialog extends StatelessWidget {
+class VoicesTwoPaneDialog extends StatelessWidget {
   final Widget left;
   final Widget right;
 
-  const VoicesDesktopPanelsDialog({
+  const VoicesTwoPaneDialog({
     super.key,
     required this.left,
     required this.right,
@@ -43,7 +54,7 @@ class VoicesDesktopPanelsDialog extends StatelessWidget {
   Widget build(BuildContext context) {
     final theme = Theme.of(context);
 
-    return VoicesDesktopDialog(
+    return _VoicesDesktopDialog(
       constraints: const BoxConstraints.tightFor(width: 900, height: 600),
       child: Stack(
         children: [
@@ -74,6 +85,41 @@ class VoicesDesktopPanelsDialog extends StatelessWidget {
   }
 }
 
+class _VoicesDesktopDialog extends StatelessWidget {
+  final BoxConstraints constraints;
+  final Color? backgroundColor;
+  final bool showBorder;
+  final Widget child;
+
+  const _VoicesDesktopDialog({
+    this.constraints = const BoxConstraints(minWidth: 900, minHeight: 600),
+    this.backgroundColor,
+    this.showBorder = false,
+    required this.child,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Dialog(
+      shape: showBorder
+          ? RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(12),
+              side: BorderSide(
+                color: Theme.of(context).colors.outlineBorderVariant!,
+              ),
+            )
+          : Theme.of(context).dialogTheme.shape,
+      backgroundColor: backgroundColor,
+      alignment: Alignment.topCenter,
+      insetPadding: const EdgeInsets.symmetric(horizontal: 40, vertical: 90),
+      child: ConstrainedBox(
+        constraints: constraints,
+        child: child,
+      ),
+    );
+  }
+}
+
 class _DialogCloseButton extends StatelessWidget {
   const _DialogCloseButton();