From 031ad474172b1c23273f471860bb35124de3f865 Mon Sep 17 00:00:00 2001 From: Inex Code Date: Fri, 8 Sep 2023 15:41:12 +0300 Subject: [PATCH] refactor(ui): Domain selection refresh --- assets/translations/en.json | 2 + .../setup/initializing/domain_picker.dart | 163 ++++++++++++++++++ .../setup/initializing/initializing.dart | 125 +------------- 3 files changed, 167 insertions(+), 123 deletions(-) create mode 100644 lib/ui/pages/setup/initializing/domain_picker.dart diff --git a/assets/translations/en.json b/assets/translations/en.json index cb2ccc3b..99c8d209 100644 --- a/assets/translations/en.json +++ b/assets/translations/en.json @@ -370,6 +370,8 @@ "manage_domain_dns": "To manage your domain's DNS", "use_this_domain": "Use this domain?", "use_this_domain_text": "The token you provided gives access to the following domain", + "multiple_domains_found": "Multiple domains found", + "multiple_domains_found_text": "The token you provided gives access to the following domains. Please select the one you want to use. For the security of your other domains, you should restrict this token's access to only the domain you want to use with SelfPrivacy.", "connect_backblaze_storage": "Connect Backblaze storage", "no_connected_domains": "No connected domains at the moment", "loading_domain_list": "Loading domain list", diff --git a/lib/ui/pages/setup/initializing/domain_picker.dart b/lib/ui/pages/setup/initializing/domain_picker.dart new file mode 100644 index 00000000..1d64349c --- /dev/null +++ b/lib/ui/pages/setup/initializing/domain_picker.dart @@ -0,0 +1,163 @@ +import 'package:cubit_form/cubit_form.dart'; +import 'package:easy_localization/easy_localization.dart'; +import 'package:flutter/material.dart'; +import 'package:selfprivacy/logic/cubit/server_installation/server_installation_cubit.dart'; +import 'package:selfprivacy/logic/cubit/forms/setup/initializing/domain_setup_cubit.dart'; +import 'package:selfprivacy/ui/components/buttons/brand_button.dart'; +import 'package:selfprivacy/ui/components/cards/outlined_card.dart'; +import 'package:selfprivacy/ui/layouts/responsive_layout_with_infobox.dart'; + +class DomainPicker extends StatefulWidget { + const DomainPicker({ + super.key, + }); + + @override + State createState() => _DomainPickerState(); +} + +class _DomainPickerState extends State { + String? selectedDomain; + + @override + Widget build(final BuildContext context) { + final DomainSetupState state = context.watch().state; + + return ResponsiveLayoutWithInfobox( + topChild: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + (state is MoreThenOne) + ? 'initializing.multiple_domains_found'.tr() + : 'initializing.use_this_domain'.tr(), + style: Theme.of(context).textTheme.headlineSmall, + ), + const SizedBox(height: 16), + Text( + (state is MoreThenOne) + ? 'initializing.multiple_domains_found_text'.tr() + : 'initializing.use_this_domain_text'.tr(), + style: Theme.of(context).textTheme.bodyMedium, + ), + ], + ), + primaryColumn: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (state is Empty) + Text( + 'initializing.no_connected_domains'.tr(), + style: Theme.of(context).textTheme.bodyMedium, + ), + if (state is Loading) + Text( + state.type == LoadingTypes.loadingDomain + ? 'initializing.loading_domain_list'.tr() + : 'basis.saving'.tr(), + style: Theme.of(context).textTheme.bodyMedium, + ), + if (state is MoreThenOne) + ...state.domains.map( + (final domain) => Column( + children: [ + SizedBox( + width: double.infinity, + child: OutlinedCard( + borderColor: domain == selectedDomain + ? Theme.of(context).colorScheme.primary + : null, + borderWidth: domain == selectedDomain ? 3 : 1, + child: InkResponse( + highlightShape: BoxShape.rectangle, + onTap: () => setState(() { + selectedDomain = domain; + }), + child: Padding( + padding: const EdgeInsets.all(8.0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Radio( + value: domain, + groupValue: selectedDomain, + onChanged: (final String? value) { + setState(() { + selectedDomain = value; + }); + }, + ), + Text( + domain, + style: Theme.of(context).textTheme.bodyLarge, + ), + ], + ), + ), + ), + ), + ), + const SizedBox(height: 8), + // Button to select and save domain + ], + ), + ), + if (state is MoreThenOne) + BrandButton.filled( + onPressed: (selectedDomain != null && + state.domains.contains(selectedDomain)) + ? () => context + .read() + .saveDomain(selectedDomain!) + : null, + child: Text('initializing.use_this_domain'.tr()), + ), + if (state is Loaded) ...[ + Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + state.domain, + style: Theme.of(context).textTheme.headlineMedium?.copyWith( + color: Theme.of(context).colorScheme.onBackground, + ), + textAlign: TextAlign.center, + ), + ], + ), + ], + if (state is Empty) ...[ + const SizedBox(height: 30), + BrandButton.filled( + onPressed: () => context.read().load(), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Icon( + Icons.refresh, + color: Colors.white, + ), + const SizedBox(width: 10), + Text( + 'domain.update_list'.tr(), + style: Theme.of(context).textTheme.bodyLarge, + ), + ], + ), + ), + ], + if (state is Loaded) ...[ + const SizedBox(height: 32), + BrandButton.filled( + onPressed: () => + context.read().saveDomain(state.domain), + text: 'initializing.save_domain'.tr(), + ), + ], + ], + ), + ); + } +} diff --git a/lib/ui/pages/setup/initializing/initializing.dart b/lib/ui/pages/setup/initializing/initializing.dart index db6f9af2..60088ea3 100644 --- a/lib/ui/pages/setup/initializing/initializing.dart +++ b/lib/ui/pages/setup/initializing/initializing.dart @@ -18,6 +18,7 @@ import 'package:selfprivacy/ui/components/progress_bar/progress_bar.dart'; import 'package:selfprivacy/ui/components/drawers/support_drawer.dart'; import 'package:selfprivacy/ui/layouts/responsive_layout_with_infobox.dart'; import 'package:selfprivacy/ui/pages/setup/initializing/dns_provider_picker.dart'; +import 'package:selfprivacy/ui/pages/setup/initializing/domain_picker.dart'; import 'package:selfprivacy/ui/pages/setup/initializing/server_provider_picker.dart'; import 'package:selfprivacy/ui/pages/setup/initializing/server_type_picker.dart'; import 'package:selfprivacy/ui/pages/setup/recovering/recovery_routing.dart'; @@ -319,129 +320,7 @@ class InitializingPage extends StatelessWidget { Widget _stepDomain(final ServerInstallationCubit initializingCubit) => BlocProvider( create: (final context) => DomainSetupCubit(initializingCubit)..load(), - child: Builder( - builder: (final context) { - final DomainSetupState state = - context.watch().state; - return ResponsiveLayoutWithInfobox( - topChild: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - 'initializing.use_this_domain'.tr(), - style: Theme.of(context).textTheme.headlineSmall, - ), - const SizedBox(height: 16), - Text( - 'initializing.use_this_domain_text'.tr(), - style: Theme.of(context).textTheme.bodyMedium, - ), - ], - ), - primaryColumn: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - if (state is Empty) - Text( - 'initializing.no_connected_domains'.tr(), - style: Theme.of(context).textTheme.bodyMedium, - ), - if (state is Loading) - Text( - state.type == LoadingTypes.loadingDomain - ? 'initializing.loading_domain_list'.tr() - : 'basis.saving'.tr(), - style: Theme.of(context).textTheme.bodyMedium, - ), - if (state is MoreThenOne) - ...state.domains.map( - (final domain) => Column( - children: [ - SizedBox( - width: double.infinity, - child: Card( - clipBehavior: Clip.antiAlias, - child: InkResponse( - highlightShape: BoxShape.rectangle, - onTap: () => context - .read() - .saveDomain(domain), - child: Padding( - padding: const EdgeInsets.all(16.0), - child: Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Text( - domain, - style: Theme.of(context) - .textTheme - .headlineMedium, - ), - ], - ), - ), - ), - ), - ), - const SizedBox(height: 8), - ], - ), - ), - if (state is Loaded) ...[ - Row( - mainAxisSize: MainAxisSize.max, - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Text( - state.domain, - style: Theme.of(context) - .textTheme - .headlineMedium - ?.copyWith( - color: - Theme.of(context).colorScheme.onBackground, - ), - textAlign: TextAlign.center, - ), - ], - ), - ], - if (state is Empty) ...[ - const SizedBox(height: 30), - BrandButton.filled( - onPressed: () => context.read().load(), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Icon( - Icons.refresh, - color: Colors.white, - ), - const SizedBox(width: 10), - Text( - 'domain.update_list'.tr(), - style: Theme.of(context).textTheme.bodyLarge, - ), - ], - ), - ), - ], - if (state is Loaded) ...[ - const SizedBox(height: 32), - BrandButton.filled( - onPressed: () => context - .read() - .saveDomain(state.domain), - text: 'initializing.save_domain'.tr(), - ), - ], - ], - ), - ); - }, - ), + child: DomainPicker(), ); Widget _stepUser(final ServerInstallationCubit initializingCubit) =>