Frontend first draft

frontend/pweb/lib/widgets/password/hint/error.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/widgets/password/hint/widget.dart';
+
+
+class PasswordValidationErrorLabel extends StatelessWidget {
+  final String labelText;
+  const PasswordValidationErrorLabel({super.key, required this.labelText});
+
+  @override
+  Widget build(BuildContext context) {
+    return PasswordValidationOutput(
+      children: [
+        Text(
+          labelText, 
+          style: Theme.of(context).textTheme.bodySmall?.copyWith(
+            color: Theme.of(context).colorScheme.error,
+          )
+        ),
+      ], 
+    );
+  }
+}

frontend/pweb/lib/widgets/password/hint/full.dart

@@ -0,0 +1,18 @@
+import 'package:flutter/material.dart';
+
+import 'package:fancy_password_field/fancy_password_field.dart';
+
+import 'package:pweb/widgets/password/hint/validation_result.dart';
+import 'package:pweb/widgets/password/hint/widget.dart';
+
+
+Widget expandedValidation(BuildContext context, Set<ValidationRule> rules, String value) {
+  return PasswordValidationOutput(
+    children: rules.map(
+        (rule) => PasswordValidationResult(
+          ruleName: rule.name, 
+          result: rule.validate(value),
+        ),
+      ).toList()
+    );
+}

frontend/pweb/lib/widgets/password/hint/short.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+
+import 'package:fancy_password_field/fancy_password_field.dart';
+
+import 'package:pweb/widgets/password/hint/error.dart';
+import 'package:pweb/widgets/password/hint/widget.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+Widget shortValidation(BuildContext context, Set<ValidationRule> rules, String value) {
+  if (value.isEmpty) return Container();
+  final failedRules = rules.where((rule) => !rule.validate(value));
+  return (failedRules.isNotEmpty) 
+    ? PasswordValidationOutput(
+        children: [
+          PasswordValidationErrorLabel(
+            labelText: AppLocalizations.of(context)!.passwordValidationError(
+              rules.firstWhere((rule) => !rule.validate(value)).name
+            ),
+          ),
+        ], 
+      )
+    : Container();
+} 

frontend/pweb/lib/widgets/password/hint/validation_result.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+
+class PasswordValidationResult extends StatelessWidget {
+  final String ruleName;
+  final bool result;
+
+  const PasswordValidationResult({
+    super.key, 
+    required this.ruleName, 
+    required this.result
+  });
+
+  Color _selectColor(BuildContext context, bool res) {
+    final scheme = Theme.of(context).colorScheme;
+    return res ? scheme.secondary : scheme.error;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Icon(
+          result ? Icons.check : Icons.close,
+          color: _selectColor(context, result),
+        ),
+        const SizedBox(width: 8),
+        Text(
+          ruleName,
+          style: TextStyle(color: _selectColor(context, result)),
+        ),
+      ],
+    );
+  }
+}

frontend/pweb/lib/widgets/password/hint/widget.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+
+import 'package:pweb/widgets/vspacer.dart';
+
+
+class PasswordValidationOutput extends StatelessWidget {
+  final List<Widget> children;
+  
+  const PasswordValidationOutput({super.key, required this.children});
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        VSpacer(multiplier: 0.25),
+        ListView(
+          shrinkWrap: true,
+          children: children,
+        )
+      ]
+    );
+  }
+}

frontend/pweb/lib/widgets/password/password.dart

@@ -0,0 +1,104 @@
+import 'package:flutter/material.dart';
+
+import 'package:fancy_password_field/fancy_password_field.dart';
+
+import 'package:pweb/config/constants.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PasswordField extends StatefulWidget {
+  final TextEditingController controller;
+  final ValueChanged<bool>? onValid;
+  final bool hasStrengthIndicator;
+  final String? labelText;
+  final Set<ValidationRule> rules;
+  final AutovalidateMode? autovalidateMode;
+  final Widget Function(Set<ValidationRule>, String)? validationRuleBuilder;
+
+  const PasswordField({
+    super.key,
+    required this.controller,
+    this.onValid,
+    this.validationRuleBuilder,
+    this.labelText,
+    this.hasStrengthIndicator = false,
+    this.autovalidateMode,
+    this.rules = const {},
+  });
+
+  @override
+  State<PasswordField> createState() => _PasswordFieldState();
+}
+
+class _PasswordFieldState extends State<PasswordField> {
+  bool _lastValidationResult = false;
+
+  void _onChanged(String value) {
+    bool isValid = widget.rules.every((rule) => rule.validate(value));
+
+    // Only trigger onValid if validation result has changed
+    if (isValid != _lastValidationResult) {
+      _lastValidationResult = isValid;
+      widget.onValid?.call(isValid);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return FancyPasswordField(
+      key: widget.key,
+      controller: widget.controller,
+      decoration: InputDecoration(
+        labelText: widget.labelText ?? AppLocalizations.of(context)!.password,
+      ),
+      validationRules: widget.rules,
+      hasStrengthIndicator: widget.hasStrengthIndicator,
+      validationRuleBuilder: widget.validationRuleBuilder,
+      autovalidateMode: widget.autovalidateMode,
+      onChanged: _onChanged,
+    );
+  }
+}
+
+Widget defaulRulesPasswordField(
+  BuildContext context, {
+  required TextEditingController controller,
+  Key? key,
+  ValueChanged<bool>? onValid,
+  Widget Function(Set<ValidationRule>, String)? validationRuleBuilder,
+  String? labelText,
+  FocusNode? focusNode,
+  AutovalidateMode? autovalidateMode,
+  bool hasStrengthIndicator = false,
+  Set<ValidationRule> additionalRules = const {},
+}) {
+  Set<ValidationRule> rules = {
+    DigitValidationRule(
+      customText: AppLocalizations.of(context)!.passwordValidationRuleDigit,
+    ),
+    UppercaseValidationRule(
+      customText: AppLocalizations.of(context)!.passwordValidationRuleUpperCase,
+    ),
+    LowercaseValidationRule(
+      customText: AppLocalizations.of(context)!.passwordValidationRuleLowerCase,
+    ),
+    MinCharactersValidationRule(
+      Constants.minPasswordCharacters,
+      customText: AppLocalizations.of(context)!
+          .passwordValidationRuleMinCharacters(Constants.minPasswordCharacters),
+    ),
+    ...additionalRules,
+  };
+
+  return PasswordField(
+    key: key,
+    controller: controller,
+    onValid: onValid,
+    validationRuleBuilder: validationRuleBuilder,
+    hasStrengthIndicator: hasStrengthIndicator,
+    labelText: labelText,
+    autovalidateMode: autovalidateMode,
+    rules: rules,
+  );
+}

frontend/pweb/lib/widgets/password/verify.dart

@@ -0,0 +1,95 @@
+import 'package:flutter/widgets.dart';
+
+import 'package:fancy_password_field/fancy_password_field.dart';
+
+import 'package:pweb/widgets/password/hint/error.dart';
+import 'package:pweb/widgets/password/hint/short.dart';
+import 'package:pweb/widgets/password/password.dart';
+
+import 'package:pweb/generated/i18n/app_localizations.dart';
+
+
+class PasswordVeirificationRule extends ValidationRule {
+  final String ruleName;
+  final TextEditingController externalPasswordController;
+  
+  PasswordVeirificationRule({
+    required this.ruleName,
+    required this.externalPasswordController,
+  });
+
+  @override
+  String get name => ruleName;
+
+  @override
+  bool get showName => true;
+
+  @override
+  bool validate(String value) => value == externalPasswordController.text;
+}
+
+class VerifyPasswordField extends StatefulWidget {
+  final ValueChanged<bool>? onValid;
+  final TextEditingController controller;
+  final TextEditingController externalPasswordController;
+
+  const VerifyPasswordField({
+    super.key, 
+    this.onValid,
+    required this.controller,
+    required this.externalPasswordController,
+  });
+
+  @override
+  State<VerifyPasswordField> createState() => _VerifyPasswordFieldState();
+}
+
+class _VerifyPasswordFieldState extends State<VerifyPasswordField> {
+  bool _isCurrentlyValid = false;
+
+  @override
+  void initState() {
+    super.initState();
+    widget.controller.addListener(_validatePassword);
+    widget.externalPasswordController.addListener(_validatePassword);
+  }
+
+  void _validatePassword() {
+    final isValid = widget.controller.text == widget.externalPasswordController.text;
+
+    // Only call onValid if the validity state has changed to prevent infinite loops
+    if (isValid != _isCurrentlyValid) {
+      setState(() {
+        _isCurrentlyValid = isValid;
+      });
+      widget.onValid?.call(isValid);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final rule = PasswordVeirificationRule(
+      ruleName: AppLocalizations.of(context)!.passwordsDoNotMatch,
+      externalPasswordController: widget.externalPasswordController,
+    );
+
+    return defaulRulesPasswordField(
+      context,
+      controller: widget.controller,
+      key: widget.key,
+      labelText: AppLocalizations.of(context)!.confirmPassword,
+      additionalRules: { rule },
+      validationRuleBuilder: (rules, value) => rule.validate(value) 
+        ? shortValidation(context, rules, value)
+        : PasswordValidationErrorLabel(labelText: AppLocalizations.of(context)!.passwordsDoNotMatch),
+      onValid: widget.onValid,
+    );
+  }
+
+  @override
+  void dispose() {
+    widget.controller.removeListener(_validatePassword);
+    widget.externalPasswordController.removeListener(_validatePassword);
+    super.dispose();
+  }
+}