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),
           ),

Frontend/patient_manager/lib/pages/register.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/components/myTextField.dart';
+import 'package:patient_manager/components/myPassInput.dart';
+import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
 import 'package:patient_manager/main.dart';
 import 'package:supabase_auth_ui/supabase_auth_ui.dart';
@@ -15,11 +16,12 @@ class Register extends StatefulWidget {
 class _RegisterState extends State<Register> {
   final emailController = TextEditingController();
   final passwordController = TextEditingController();
-
+  final confirmPasswordController = TextEditingController();
+  bool _obscureText = true;
   //sign user in
-  Future<void> signUserIn() async {
+  Future<void> signUserUp() async {
     try {
-      final response = await client.auth.signInWithPassword(
+      final response = await client.auth.signUp(
         email: emailController.text,
         password: passwordController.text,
       );
@@ -44,6 +46,12 @@ class _RegisterState extends State<Register> {
     );
   }
 
+  void toggle() {
+    setState(() {
+      _obscureText = !_obscureText;
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -80,7 +88,6 @@ class _RegisterState extends State<Register> {
                   child: MyTextField(
                     controller: emailController,
                     hintText: 'Email',
-                    obscureText: false,
                   ),
                 ),
                 //spacer
@@ -88,10 +95,19 @@ class _RegisterState extends State<Register> {
                 //password input
                 SizedBox(
                   width: 500.0,
-                  child: MyTextField(
+                  child: MyPassField(
                     controller: passwordController,
                     hintText: 'Password',
-                    obscureText: true,
+                  ),
+                ),
+                //spacer
+                const SizedBox(height: 25),
+                //password input
+                SizedBox(
+                  width: 500.0,
+                  child: MyPassField(
+                    controller: confirmPasswordController,
+                    hintText: 'Confirm Password',
                   ),
                 ),
                 //spacer
@@ -113,11 +129,11 @@ class _RegisterState extends State<Register> {
                 ),
                 //spacer
                 const SizedBox(height: 50),
-                // sign in button
+                // sign up button
                 SizedBox(
                   width: 500.0,
                   child: MyButton(
-                    onTap: signUserIn,
+                    onTap: signUserUp,
                     buttonText: "Sign Up",
                   ),
                 ),

Frontend/patient_manager/lib/pages/signin.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:patient_manager/components/myTextField.dart';
+import 'package:patient_manager/components/myPassInput.dart';
+import 'package:patient_manager/components/myTextInput.dart';
 import 'package:patient_manager/components/mybutton.dart';
 import 'package:patient_manager/main.dart';
 import 'package:supabase_auth_ui/supabase_auth_ui.dart';
@@ -15,6 +16,7 @@ class SignIn extends StatefulWidget {
 class _SignInState extends State<SignIn> {
   final emailController = TextEditingController();
   final passwordController = TextEditingController();
+  //bool _obscureText = true;
 
   //sign user in
   Future<void> signUserIn() async {
@@ -80,7 +82,6 @@ class _SignInState extends State<SignIn> {
                   child: MyTextField(
                     controller: emailController,
                     hintText: 'Email',
-                    obscureText: false,
                   ),
                 ),
                 //spacer
@@ -88,10 +89,9 @@ class _SignInState extends State<SignIn> {
                 //password input
                 SizedBox(
                   width: 500.0,
-                  child: MyTextField(
+                  child: MyPassField(
                     controller: passwordController,
                     hintText: 'Password',
-                    obscureText: true,
                   ),
                 ),
                 //spacer