redesign for settings page

frontend/pweb/lib/pages/settings/profile/account/password/content.dart

@@ -12,7 +12,6 @@ import 'package:pweb/generated/i18n/app_localizations.dart';
 
 class AccountPasswordContent extends StatelessWidget {
   const AccountPasswordContent({
-    required this.title,
     required this.successText,
     required this.errorText,
     required this.oldPasswordLabel,
@@ -22,7 +21,6 @@ class AccountPasswordContent extends StatelessWidget {
     required this.loc,
   });
 
-  final String title;
   final String successText;
   final String errorText;
   final String oldPasswordLabel;
@@ -33,34 +31,19 @@ class AccountPasswordContent extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-
     return Consumer2<AccountProvider, PasswordFormController>(
       builder: (context, accountProvider, formProvider, _) {
-        final isBusy = accountProvider.isLoading || formProvider.isSaving;
-
-        return Column(
-          crossAxisAlignment: CrossAxisAlignment.center,
-          children: [
-            TextButton.icon(
-              onPressed: isBusy ? null : formProvider.toggleExpanded,
-              icon: Icon(Icons.lock_outline, color: theme.colorScheme.primary),
-              label: Text(title, style: theme.textTheme.bodyMedium),
-            ),
-            if (formProvider.isExpanded)
-              PasswordForm(
-                formProvider: formProvider,
-                accountProvider: accountProvider,
-                isBusy: accountProvider.isLoading,
-                oldPasswordLabel: oldPasswordLabel,
-                newPasswordLabel: newPasswordLabel,
-                confirmPasswordLabel: confirmPasswordLabel,
-                savePassword: savePassword,
-                successText: successText,
-                errorText: errorText,
-                loc: loc,
-              ),
-          ],
+        return PasswordForm(
+          formProvider: formProvider,
+          accountProvider: accountProvider,
+          isBusy: accountProvider.isLoading,
+          oldPasswordLabel: oldPasswordLabel,
+          newPasswordLabel: newPasswordLabel,
+          confirmPasswordLabel: confirmPasswordLabel,
+          savePassword: savePassword,
+          successText: successText,
+          errorText: errorText,
+          loc: loc,
         );
       },
     );

frontend/pweb/lib/pages/settings/profile/account/password/form/form.dart

@@ -1,14 +1,17 @@
 import 'package:flutter/material.dart';
 
 import 'package:pshared/provider/account.dart';
-import 'package:pshared/widgets/password/fields.dart';
+import 'package:pshared/widgets/password/field.dart';
 import 'package:pshared/utils/snackbar.dart';
 
-import 'package:pweb/models/auth/password_field_type.dart';
 import 'package:pweb/controllers/auth/password_form.dart';
+import 'package:pweb/models/state/control_state.dart';
+import 'package:pweb/models/state/visibility.dart';
 import 'package:pweb/pages/settings/profile/account/password/form/error_text.dart';
 import 'package:pweb/pages/settings/profile/account/password/form/submit_button.dart';
 import 'package:pweb/utils/error/snackbar.dart';
+import 'package:pweb/widgets/password/ui_controller.dart';
+import 'package:pweb/widgets/password/verify.dart';
 
 import 'package:pweb/generated/i18n/app_localizations.dart';
 
@@ -46,6 +49,9 @@ class PasswordForm extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final isFormBusy = isBusy || formProvider.isSaving;
+    final controlState = isFormBusy
+        ? ControlState.disabled
+        : ControlState.enabled;
 
     return Column(
       children: [
@@ -54,30 +60,38 @@ class PasswordForm extends StatelessWidget {
           key: formProvider.formKey,
           child: Column(
             children: [
-              PasswordFields(
-                oldPasswordController: formProvider.oldPasswordController,
-                newPasswordController: formProvider.newPasswordController,
-                confirmPasswordController: formProvider.confirmPasswordController,
-                oldPasswordLabel: oldPasswordLabel,
-                newPasswordLabel: newPasswordLabel,
-                confirmPasswordLabel: confirmPasswordLabel,
-                missingPasswordError: loc.errorPasswordMissing,
-                passwordsDoNotMatchError: loc.passwordsDoNotMatch,
+              PasswordField(
+                controller: formProvider.oldPasswordController,
+                labelText: oldPasswordLabel,
                 fieldWidth: _fieldWidth,
-                gapSmall: _gapSmall,
-                isEnabled: !isFormBusy,
-                showOldPassword:
-                    formProvider.isPasswordVisible(PasswordFieldType.old),
-                showNewPassword:
-                    formProvider.isPasswordVisible(PasswordFieldType.newPassword),
-                showConfirmPassword: formProvider
-                    .isPasswordVisible(PasswordFieldType.confirmPassword),
-                onToggleOldPassword: () =>
-                    formProvider.togglePasswordVisibility(PasswordFieldType.old),
-                onToggleNewPassword: () => formProvider
-                    .togglePasswordVisibility(PasswordFieldType.newPassword),
-                onToggleConfirmPassword: () => formProvider
-                    .togglePasswordVisibility(PasswordFieldType.confirmPassword),
+                isEnabled: controlState == ControlState.enabled,
+                obscureText:
+                    formProvider.oldPasswordVisibility !=
+                    VisibilityState.visible,
+                onToggleVisibility: formProvider.toggleOldPasswordVisibility,
+                validator: (value) => (value == null || value.isEmpty)
+                    ? loc.errorPasswordMissing
+                    : null,
+              ),
+              const SizedBox(height: _gapSmall),
+              SizedBox(
+                width: _fieldWidth,
+                child: PasswordUiController(
+                  controller: formProvider.newPasswordController,
+                  labelText: newPasswordLabel,
+                  state: controlState,
+                ),
+              ),
+              const SizedBox(height: _gapSmall),
+              SizedBox(
+                width: _fieldWidth,
+                child: VerifyPasswordField(
+                  controller: formProvider.confirmPasswordController,
+                  externalPasswordController:
+                      formProvider.newPasswordController,
+                  labelText: confirmPasswordLabel,
+                  state: controlState,
+                ),
               ),
               const SizedBox(height: _gapMedium),
               PasswordSubmitButton(

frontend/pweb/lib/pages/settings/profile/account/password/password.dart

@@ -9,7 +9,6 @@ import 'package:pweb/generated/i18n/app_localizations.dart';
 
 
 class AccountPassword extends StatelessWidget {
-  final String title;
   final String successText;
   final String errorText;
   final String oldPasswordLabel;
@@ -19,7 +18,6 @@ class AccountPassword extends StatelessWidget {
 
   const AccountPassword({
     super.key,
-    required this.title,
     required this.successText,
     required this.errorText,
     required this.oldPasswordLabel,
@@ -35,7 +33,6 @@ class AccountPassword extends StatelessWidget {
     return ChangeNotifierProvider(
       create: (_) => PasswordFormController(),
       child: AccountPasswordContent(
-        title: title,
         successText: successText,
         errorText: errorText,
         oldPasswordLabel: oldPasswordLabel,