update passowrd field to have toggle

Frontend/patient_manager/lib/components/myAppBar.dart

@@ -12,15 +12,17 @@ class MyAppBar extends StatelessWidget {
       backgroundColor: Colors.blueAccent,
       elevation: 8,
       shadowColor: Colors.black,
-      leading: IconButton(
-        onPressed: () {
-          client.auth.signOut();
-          Navigator.of(context).pushNamed('/');
-        },
-        icon: const Icon(Icons.logout),
-        iconSize: 35,
-        color: Colors.black,
-      ),
+      actions: [
+        IconButton(
+          onPressed: () {
+            client.auth.signOut();
+            Navigator.of(context).pushNamed('/');
+          },
+          icon: const Icon(Icons.logout),
+          iconSize: 35,
+          color: Colors.black,
+        ),
+      ],
       title: Text(
         barTitle,
         style: const TextStyle(

Frontend/patient_manager/lib/components/myPassInput.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+class MyPassField extends StatefulWidget {
+  final controller;
+  final String hintText;
+
+  const MyPassField({
+    super.key,
+    required this.controller,
+    required this.hintText,
+  });
+
+  @override
+  State<MyPassField> createState() => _MyPassFieldState();
+}
+
+class _MyPassFieldState extends State<MyPassField> {
+  final textFieldFocusNode = FocusNode();
+  bool _obscured = true;
+
+  void _toggleObscured() {
+    setState(() {
+      _obscured = !_obscured;
+      if (textFieldFocusNode.hasPrimaryFocus)
+        return; // If focus is on text field, dont unfocus
+      textFieldFocusNode.canRequestFocus =
+          false; // Prevents focus if tap on eye
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(horizontal: 25.0),
+      child: TextField(
+        controller: widget.controller,
+        obscureText: _obscured,
+        decoration: InputDecoration(
+          fillColor: Colors.white,
+          filled: true,
+          hintText: widget.hintText,
+          hintStyle: TextStyle(color: Colors.blueGrey[400]),
+          enabledBorder: const OutlineInputBorder(
+            borderSide: BorderSide(
+              color: Colors.blueAccent,
+              width: 2.0,
+            ),
+          ),
+          focusedBorder: const OutlineInputBorder(
+            borderSide: BorderSide(color: Colors.blue),
+          ),
+          suffixIcon: Padding(
+            padding: const EdgeInsets.fromLTRB(0, 0, 4, 0),
+            child: GestureDetector(
+              onTap: _toggleObscured,
+              child: Icon(
+                _obscured
+                    ? Icons.visibility_rounded
+                    : Icons.visibility_off_rounded,
+                size: 24,
+                color: Colors.blue,
+              ),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

Frontend/patient_manager/lib/components/myTextInput.dart

@@ -3,13 +3,11 @@ import 'package:flutter/material.dart';
 class MyTextField extends StatelessWidget {
   final controller;
   final String hintText;
-  final bool obscureText;
 
   const MyTextField({
     super.key,
     required this.controller,
     required this.hintText,
-    required this.obscureText,
   });
 
   @override
@@ -18,17 +16,18 @@ class MyTextField extends StatelessWidget {
       padding: const EdgeInsets.symmetric(horizontal: 25.0),
       child: TextField(
         controller: controller,
-        obscureText: obscureText,
+        obscureText: false,
         decoration: InputDecoration(
           fillColor: Colors.white,
           filled: true,
           hintText: hintText,
           hintStyle: TextStyle(color: Colors.blueGrey[400]),
           enabledBorder: const OutlineInputBorder(
-              borderSide: BorderSide(
-            color: Colors.blueAccent,
-            width: 2.0,
-          )),
+            borderSide: BorderSide(
+              color: Colors.blueAccent,
+              width: 2.0,
+            ),
+          ),
           focusedBorder: const OutlineInputBorder(
             borderSide: BorderSide(color: Colors.blue),
           ),