From ce8f05fee7c9338d1bcb06bf2281cd5006d0f61b Mon Sep 17 00:00:00 2001 From: Damian Molinski Date: Tue, 24 Sep 2024 13:12:12 +0200 Subject: [PATCH] wip --- .../account_get_started_dialog.dart | 132 ++++++++++++++++++ .../lib/pages/spaces/spaces_shell_page.dart | 45 ++++-- .../session/session_action_header.dart | 19 ++- .../lib/src/session/session_bloc.dart | 7 +- 4 files changed, 186 insertions(+), 17 deletions(-) create mode 100644 catalyst_voices/lib/pages/account/creation/get_started/account_get_started_dialog.dart diff --git a/catalyst_voices/lib/pages/account/creation/get_started/account_get_started_dialog.dart b/catalyst_voices/lib/pages/account/creation/get_started/account_get_started_dialog.dart new file mode 100644 index 0000000000..fdf98c5979 --- /dev/null +++ b/catalyst_voices/lib/pages/account/creation/get_started/account_get_started_dialog.dart @@ -0,0 +1,132 @@ +import 'package:catalyst_voices/widgets/modals/voices_desktop_dialog.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:flutter/material.dart'; + +enum AccountGetStartedType { create, recover } + +class AccountGetStartedDialog extends StatelessWidget { + const AccountGetStartedDialog._(); + + static Future show(BuildContext context) { + return VoicesDialog.show( + context: context, + builder: (context) => const AccountGetStartedDialog._(), + ); + } + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + + return VoicesDesktopPanelsDialog( + left: Column( + children: [ + Text( + 'Get started', + style: theme.textTheme.titleLarge?.copyWith( + color: theme.colors.textOnPrimaryLevel0, + ), + ), + Placeholder(), + ], + ), + right: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + SizedBox(height: 24), + Text( + 'Welcome to Catalyst!', + style: theme.textTheme.titleMedium?.copyWith( + color: theme.colors.textOnPrimaryLevel1, + ), + ), + SizedBox(height: 12), + Text( + 'If you already have a Catalyst keychain you can restore it on this device, or you can create a new Catalyst Keychain.', + style: theme.textTheme.bodyMedium?.copyWith( + color: theme.colors.textOnPrimaryLevel1, + ), + ), + SizedBox(height: 32), + Text( + 'What do you want to do?', + style: theme.textTheme.titleSmall?.copyWith( + color: theme.colors.textOnPrimaryLevel0, + ), + ), + SizedBox(height: 24), + Column( + mainAxisSize: MainAxisSize.min, + children: [ + _GetStartedTypeTile( + key: ValueKey(AccountGetStartedType.create), + type: AccountGetStartedType.create, + ), + SizedBox(height: 12), + _GetStartedTypeTile( + key: ValueKey(AccountGetStartedType.recover), + type: AccountGetStartedType.create, + ), + ], + ) + ], + ), + ); + } +} + +class _GetStartedTypeTile extends StatelessWidget { + final AccountGetStartedType type; + + const _GetStartedTypeTile({ + super.key, + required this.type, + }); + + @override + Widget build(BuildContext context) { + final theme = Theme.of(context); + + return Container( + constraints: BoxConstraints.tightFor(height: 80), + padding: EdgeInsets.symmetric(horizontal: 20), + decoration: BoxDecoration( + color: theme.colorScheme.primary, + borderRadius: BorderRadius.circular(12), + ), + child: Row( + children: [ + VoicesAssets.icons.colorSwatch.buildIcon( + size: 48, + color: theme.colors.iconsBackground, + ), + const SizedBox(width: 10), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'Create a new 
Catalyst Keychain', + maxLines: 2, + overflow: TextOverflow.ellipsis, + style: theme.textTheme.titleSmall?.copyWith( + color: theme.colorScheme.onPrimary, + ), + ), + Text( + 'On this device', + style: theme.textTheme.bodySmall?.copyWith( + color: theme.colorScheme.onPrimary, + ), + ), + ], + ), + ), + ], + ), + ); + } +} diff --git a/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart b/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart index 26b10d01de..b4ec23f604 100644 --- a/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart +++ b/catalyst_voices/lib/pages/spaces/spaces_shell_page.dart @@ -1,4 +1,5 @@ import 'package:catalyst_voices/common/ext/ext.dart'; +import 'package:catalyst_voices/pages/account/creation/get_started/account_get_started_dialog.dart'; import 'package:catalyst_voices/pages/spaces/drawer/spaces_drawer.dart'; import 'package:catalyst_voices/widgets/widgets.dart'; import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart'; @@ -7,7 +8,7 @@ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_bloc/flutter_bloc.dart'; -class SpacesShellPage extends StatelessWidget { +class SpacesShellPage extends StatefulWidget { final Space space; final Widget child; @@ -40,6 +41,11 @@ class SpacesShellPage extends StatelessWidget { required this.child, }); + @override + State createState() => _SpacesShellPageState(); +} + +class _SpacesShellPageState extends State { @override Widget build(BuildContext context) { final sessionBloc = context.watch(); @@ -48,27 +54,50 @@ class SpacesShellPage extends StatelessWidget { return CallbackShortcuts( bindings: { - for (final entry in _spacesShortcutsActivators.entries) + for (final entry in SpacesShellPage._spacesShortcutsActivators.entries) entry.value: () => entry.key.go(context), }, child: Scaffold( appBar: VoicesAppBar( leading: isVisitor ? null : const DrawerToggleButton(), automaticallyImplyLeading: false, - actions: const [ - SessionActionHeader(), - SessionStateHeader(), + actions: [ + SessionActionHeader( + onGetStartedTap: _showAccountGetStarted, + ), + const SessionStateHeader(), ], ), drawer: isVisitor ? null : SpacesDrawer( - space: space, - spacesShortcutsActivators: _spacesShortcutsActivators, + space: widget.space, + spacesShortcutsActivators: + SpacesShellPage._spacesShortcutsActivators, isUnlocked: isUnlocked, ), - body: child, + body: widget.child, ), ); } + + Future _showAccountGetStarted() async { + final getStartedType = await AccountGetStartedDialog.show(context); + if (getStartedType == null) { + return; + } + + if (mounted) { + switch (getStartedType) { + case AccountGetStartedType.create: + _showCreateAccountFlow().ignore(); + case AccountGetStartedType.recover: + _showRecoverAccountFlow().ignore(); + } + } + } + + Future _showCreateAccountFlow() async {} + + Future _showRecoverAccountFlow() async {} } diff --git a/catalyst_voices/lib/widgets/app_bar/session/session_action_header.dart b/catalyst_voices/lib/widgets/app_bar/session/session_action_header.dart index 7d52d730a2..d354771106 100644 --- a/catalyst_voices/lib/widgets/app_bar/session/session_action_header.dart +++ b/catalyst_voices/lib/widgets/app_bar/session/session_action_header.dart @@ -8,14 +8,19 @@ import 'package:flutter_bloc/flutter_bloc.dart'; /// Displays current session action and toggling to next when clicked. class SessionActionHeader extends StatelessWidget { - const SessionActionHeader({super.key}); + final VoidCallback? onGetStartedTap; + + const SessionActionHeader({ + super.key, + this.onGetStartedTap, + }); @override Widget build(BuildContext context) { return BlocBuilder( builder: (context, state) { return switch (state) { - VisitorSessionState() => const _GetStartedButton(), + VisitorSessionState() => _GetStartedButton(onTap: onGetStartedTap), GuestSessionState() => const _UnlockButton(), ActiveUserSessionState() => const _LockButton(), }; @@ -25,14 +30,16 @@ class SessionActionHeader extends StatelessWidget { } class _GetStartedButton extends StatelessWidget { - const _GetStartedButton(); + final VoidCallback? onTap; + + const _GetStartedButton({ + this.onTap, + }); @override Widget build(BuildContext context) { return VoicesFilledButton( - onTap: () { - context.read().add(const ActiveUserSessionEvent()); - }, + onTap: onTap, child: Text(context.l10n.getStarted), ); } diff --git a/catalyst_voices/packages/catalyst_voices_blocs/lib/src/session/session_bloc.dart b/catalyst_voices/packages/catalyst_voices_blocs/lib/src/session/session_bloc.dart index 949518e234..8efbf20b52 100644 --- a/catalyst_voices/packages/catalyst_voices_blocs/lib/src/session/session_bloc.dart +++ b/catalyst_voices/packages/catalyst_voices_blocs/lib/src/session/session_bloc.dart @@ -7,9 +7,10 @@ import 'package:flutter_bloc/flutter_bloc.dart'; final class SessionBloc extends Bloc { SessionBloc() : super( - const ActiveUserSessionState( - user: User(name: 'Account'), - ), + const VisitorSessionState(), + // const ActiveUserSessionState( + // user: User(name: 'Account'), + // ), ) { on(_handleSessionEvent); }