Password field checks for match with old password from db and check so that new password feild matches with the confirm password field

frontend/pshared/lib/widgets/password/confirm_field.dart

@@ -10,6 +10,8 @@ class ConfirmPasswordField extends StatelessWidget {
     required this.newPasswordController,
     required this.missingPasswordError,
     required this.passwordsDoNotMatchError,
+    required this.obscureText,
+    required this.onToggleVisibility,
   });
 
   final TextEditingController controller;
@@ -19,6 +21,8 @@ class ConfirmPasswordField extends StatelessWidget {
   final TextEditingController newPasswordController;
   final String missingPasswordError;
   final String passwordsDoNotMatchError;
+  final bool obscureText;
+  final VoidCallback onToggleVisibility;
 
   @override
   Widget build(BuildContext context) {
@@ -26,11 +30,18 @@ class ConfirmPasswordField extends StatelessWidget {
       width: fieldWidth,
       child: TextFormField(
         controller: controller,
-        obscureText: true,
+        obscureText: obscureText,
         enabled: isEnabled,
+        autovalidateMode: AutovalidateMode.onUserInteraction,
         decoration: InputDecoration(
           labelText: confirmPasswordLabel,
           border: const OutlineInputBorder(),
+          suffixIcon: IconButton(
+            onPressed: onToggleVisibility,
+            icon: Icon(
+              obscureText ? Icons.visibility_off : Icons.visibility,
+            ),
+          ),
         ),
         validator: (value) {
           if (value == null || value.isEmpty) return missingPasswordError;

frontend/pshared/lib/widgets/password/field.dart

@@ -7,6 +7,8 @@ class PasswordField extends StatelessWidget {
     required this.labelText,
     required this.fieldWidth,
     required this.isEnabled,
+    required this.obscureText,
+    required this.onToggleVisibility,
     required this.validator,
   });
 
@@ -14,6 +16,8 @@ class PasswordField extends StatelessWidget {
   final String labelText;
   final double fieldWidth;
   final bool isEnabled;
+  final bool obscureText;
+  final VoidCallback onToggleVisibility;
   final String? Function(String?) validator;
 
   @override
@@ -22,14 +26,21 @@ class PasswordField extends StatelessWidget {
       width: fieldWidth,
       child: TextFormField(
         controller: controller,
-        obscureText: true,
+        obscureText: obscureText,
         enabled: isEnabled,
+        autovalidateMode: AutovalidateMode.onUserInteraction,
         decoration: InputDecoration(
           labelText: labelText,
           border: const OutlineInputBorder(),
+          suffixIcon: IconButton(
+            onPressed: onToggleVisibility,
+            icon: Icon(
+              obscureText ? Icons.visibility_off : Icons.visibility,
+            ),
+          ),
         ),
         validator: validator,
       ),
     );
   }
-}
+}

frontend/pshared/lib/widgets/password/fields.dart

@@ -18,6 +18,12 @@ class PasswordFields extends StatelessWidget {
     required this.fieldWidth,
     required this.gapSmall,
     required this.isEnabled,
+    required this.showOldPassword,
+    required this.showNewPassword,
+    required this.showConfirmPassword,
+    required this.onToggleOldPassword,
+    required this.onToggleNewPassword,
+    required this.onToggleConfirmPassword,
   });
 
   final TextEditingController oldPasswordController;
@@ -31,6 +37,12 @@ class PasswordFields extends StatelessWidget {
   final double fieldWidth;
   final double gapSmall;
   final bool isEnabled;
+  final bool showOldPassword;
+  final bool showNewPassword;
+  final bool showConfirmPassword;
+  final VoidCallback onToggleOldPassword;
+  final VoidCallback onToggleNewPassword;
+  final VoidCallback onToggleConfirmPassword;
 
   @override
   Widget build(BuildContext context) {
@@ -41,6 +53,8 @@ class PasswordFields extends StatelessWidget {
           labelText: oldPasswordLabel,
           fieldWidth: fieldWidth,
           isEnabled: isEnabled,
+          obscureText: !showOldPassword,
+          onToggleVisibility: onToggleOldPassword,
           validator: (value) =>
               (value == null || value.isEmpty) ? missingPasswordError : null,
         ),
@@ -50,6 +64,8 @@ class PasswordFields extends StatelessWidget {
           labelText: newPasswordLabel,
           fieldWidth: fieldWidth,
           isEnabled: isEnabled,
+          obscureText: !showNewPassword,
+          onToggleVisibility: onToggleNewPassword,
           validator: (value) =>
               (value == null || value.isEmpty) ? missingPasswordError : null,
         ),
@@ -62,8 +78,10 @@ class PasswordFields extends StatelessWidget {
           newPasswordController: newPasswordController,
           missingPasswordError: missingPasswordError,
           passwordsDoNotMatchError: passwordsDoNotMatchError,
+          obscureText: !showConfirmPassword,
+          onToggleVisibility: onToggleConfirmPassword,
         ),
       ],
     );
   }
-}
+}