feat(cat-voices): restore unlock password

catalyst_voices/lib/pages/registration/create_keychain/bloc_unlock_password_builder.dart → catalyst_voices/lib/pages/registration/bloc_unlock_password_builder.dart

@@ -5,12 +5,14 @@ class BlocUnlockPasswordBuilder<T>
     extends BlocSelector<RegistrationCubit, RegistrationState, T> {
   BlocUnlockPasswordBuilder({
     super.key,
+    required BlocWidgetSelector<RegistrationState, UnlockPasswordState>
+        stateSelector,
     required BlocWidgetSelector<UnlockPasswordState, T> selector,
     required super.builder,
     super.bloc,
   }) : super(
           selector: (state) {
-            return selector(state.keychainStateData.unlockPasswordState);
+            return selector(stateSelector(state));
           },
         );
 }

catalyst_voices/lib/pages/registration/create_keychain/stage/unlock_password_instructions_panel.dart

@@ -20,8 +20,9 @@ class UnlockPasswordInstructionsPanel extends StatelessWidget {
           child: SingleChildScrollView(
             child: RegistrationStageMessage(
               title: Text(l10n.createKeychainUnlockPasswordInstructionsTitle),
-              subtitle:
-                  Text(l10n.createKeychainUnlockPasswordInstructionsSubtitle),
+              subtitle: Text(
+                l10n.createKeychainUnlockPasswordInstructionsSubtitle,
+              ),
             ),
           ),
         ),

catalyst_voices/lib/pages/registration/create_keychain/stage/unlock_password_panel.dart

@@ -1,10 +1,7 @@
-import 'package:catalyst_voices/pages/registration/create_keychain/bloc_unlock_password_builder.dart';
+import 'package:catalyst_voices/pages/registration/bloc_unlock_password_builder.dart';
 import 'package:catalyst_voices/pages/registration/widgets/registration_stage_navigation.dart';
-import 'package:catalyst_voices/widgets/indicators/voices_password_strength_indicator.dart';
-import 'package:catalyst_voices/widgets/text_field/voices_password_text_field.dart';
-import 'package:catalyst_voices/widgets/text_field/voices_text_field.dart';
+import 'package:catalyst_voices/pages/registration/widgets/unlock_password_form.dart';
 import 'package:catalyst_voices_blocs/catalyst_voices_blocs.dart';
-import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
 import 'package:catalyst_voices_models/catalyst_voices_models.dart';
 import 'package:flutter/material.dart';
 
@@ -30,8 +27,8 @@ class _UnlockPasswordPanelState extends State<UnlockPasswordPanel> {
         .keychainStateData
         .unlockPasswordState;
 
-    final password = unlockPasswordState.password;
-    final confirmPassword = unlockPasswordState.confirmPassword;
+    final password = unlockPasswordState.password.value;
+    final confirmPassword = unlockPasswordState.confirmPassword.value;
 
     _passwordController = TextEditingController(text: password)
       ..addListener(_onPasswordChanged);
@@ -53,16 +50,12 @@ class _UnlockPasswordPanelState extends State<UnlockPasswordPanel> {
       children: [
         const SizedBox(height: 24),
         const SizedBox(height: 12),
-        _EnterPasswordTextField(
-          controller: _passwordController,
-        ),
-        const SizedBox(height: 12),
-        _BlocConfirmPasswordTextField(
-          controller: _confirmPasswordController,
+        Expanded(
+          child: _BlocUnlockPasswordForm(
+            passwordController: _passwordController,
+            confirmPasswordController: _confirmPasswordController,
+          ),
         ),
-        const Spacer(),
-        const SizedBox(height: 22),
-        const _BlocPasswordStrength(),
         const SizedBox(height: 22),
         _BlocNavigation(
           onNextTap: _createKeychain,
@@ -107,90 +100,38 @@ class _UnlockPasswordPanelState extends State<UnlockPasswordPanel> {
   }
 }
 
-class _EnterPasswordTextField extends StatelessWidget {
-  final TextEditingController controller;
+class _BlocUnlockPasswordForm extends StatelessWidget {
+  final TextEditingController passwordController;
+  final TextEditingController confirmPasswordController;
 
-  const _EnterPasswordTextField({
-    required this.controller,
+  const _BlocUnlockPasswordForm({
+    required this.passwordController,
+    required this.confirmPasswordController,
   });
 
   @override
   Widget build(BuildContext context) {
-    return VoicesPasswordTextField(
-      controller: controller,
-      textInputAction: TextInputAction.next,
-      decoration: VoicesTextFieldDecoration(
-        labelText: context.l10n.enterPassword,
-      ),
-    );
-  }
-}
-
-class _BlocConfirmPasswordTextField extends StatelessWidget {
-  final TextEditingController controller;
-
-  const _BlocConfirmPasswordTextField({
-    required this.controller,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocUnlockPasswordBuilder<({bool showError, int minimumLength})>(
-      selector: (state) => (
-        showError: state.showPasswordMisMatch,
-        minimumLength: state.minPasswordLength,
-      ),
-      builder: (context, state) {
-        return _ConfirmPasswordTextField(
-          controller: controller,
-          showError: state.showError,
-          minimumLength: state.minimumLength,
+    return BlocUnlockPasswordBuilder<
+        ({
+          bool showError,
+          PasswordStrength passwordStrength,
+          bool showPasswordStrength,
+        })>(
+      stateSelector: (state) => state.keychainStateData.unlockPasswordState,
+      selector: (state) {
+        return (
+          showError: state.showPasswordMisMatch,
+          passwordStrength: state.passwordStrength,
+          showPasswordStrength: state.showPasswordStrength,
         );
       },
-    );
-  }
-}
-
-class _ConfirmPasswordTextField extends StatelessWidget {
-  final TextEditingController controller;
-  final bool showError;
-  final int minimumLength;
-
-  const _ConfirmPasswordTextField({
-    required this.controller,
-    this.showError = false,
-    required this.minimumLength,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    return VoicesPasswordTextField(
-      controller: controller,
-      decoration: VoicesTextFieldDecoration(
-        labelText: context.l10n.confirmPassword,
-        helperText: context.l10n.xCharactersMinimum(minimumLength),
-        errorText: showError ? context.l10n.passwordDoNotMatch : null,
-      ),
-    );
-  }
-}
-
-class _BlocPasswordStrength extends StatelessWidget {
-  const _BlocPasswordStrength();
-
-  @override
-  Widget build(BuildContext context) {
-    return BlocUnlockPasswordBuilder<({bool show, PasswordStrength strength})>(
-      selector: (state) => (
-        show: state.showPasswordStrength,
-        strength: state.passwordStrength,
-      ),
       builder: (context, state) {
-        return Offstage(
-          offstage: !state.show,
-          child: VoicesPasswordStrengthIndicator(
-            passwordStrength: state.strength,
-          ),
+        return UnlockPasswordForm(
+          passwordController: passwordController,
+          confirmPasswordController: confirmPasswordController,
+          showError: state.showError,
+          passwordStrength: state.passwordStrength,
+          showPasswordStrength: state.showPasswordStrength,
         );
       },
     );
@@ -209,6 +150,7 @@ class _BlocNavigation extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocUnlockPasswordBuilder<bool>(
+      stateSelector: (state) => state.keychainStateData.unlockPasswordState,
       selector: (state) => state.isNextEnabled,
       builder: (context, state) {
         return RegistrationBackNextNavigation(

catalyst_voices/lib/pages/registration/recover/recover_seed_phrase_panel.dart

@@ -1,6 +1,8 @@
 import 'package:catalyst_voices/pages/registration/recover/seed_phrase/account_details_panel.dart';
 import 'package:catalyst_voices/pages/registration/recover/seed_phrase/seed_phrase_input_panel.dart';
 import 'package:catalyst_voices/pages/registration/recover/seed_phrase/seed_phrase_instructions_panel.dart';
+import 'package:catalyst_voices/pages/registration/recover/seed_phrase/unlock_password_instructions_panel.dart';
+import 'package:catalyst_voices/pages/registration/recover/seed_phrase/unlock_password_panel.dart';
 import 'package:catalyst_voices/pages/registration/widgets/placeholder_panel.dart';
 import 'package:catalyst_voices_models/catalyst_voices_models.dart';
 import 'package:flutter/material.dart';
@@ -21,8 +23,8 @@ class RecoverSeedPhrasePanel extends StatelessWidget {
       RecoverSeedPhraseStage.seedPhrase => const SeedPhraseInputPanel(),
       RecoverSeedPhraseStage.accountDetails => const AccountDetailsPanel(),
       RecoverSeedPhraseStage.unlockPasswordInstructions =>
-        const PlaceholderPanel(),
-      RecoverSeedPhraseStage.unlockPassword => const PlaceholderPanel(),
+        const UnlockPasswordInstructionsPanel(),
+      RecoverSeedPhraseStage.unlockPassword => const UnlockPasswordPanel(),
       RecoverSeedPhraseStage.success => const PlaceholderPanel(),
     };
   }

catalyst_voices/lib/pages/registration/recover/seed_phrase/unlock_password_instructions_panel.dart

@@ -0,0 +1,34 @@
+import 'package:catalyst_voices/pages/registration/widgets/registration_stage_message.dart';
+import 'package:catalyst_voices/pages/registration/widgets/registration_stage_navigation.dart';
+import 'package:catalyst_voices_localization/catalyst_voices_localization.dart';
+import 'package:flutter/material.dart';
+
+class UnlockPasswordInstructionsPanel extends StatelessWidget {
+  const UnlockPasswordInstructionsPanel({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final l10n = context.l10n;
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        const SizedBox(height: 24),
+        Expanded(
+          child: SingleChildScrollView(
+            child: RegistrationStageMessage(
+              title: Text(l10n.recoveryUnlockPasswordInstructionsTitle),
+              subtitle: Text(
+                l10n.recoveryUnlockPasswordInstructionsSubtitle,
+              ),
+            ),
+          ),
+        ),
+        const SizedBox(height: 10),
+        const RegistrationBackNextNavigation(),
+      ],
+    );
+  }
+}