From 441cfcc8e34a3872584ceb56982edfc62ba9c97e Mon Sep 17 00:00:00 2001
From: Gitead <summitdentalcareframingham@gmail.com>
Date: Wed, 29 Apr 2026 22:54:51 -0400
Subject: [PATCH] feat: add password visibility toggle in Admin Settings and
 Add New Users

---
 apps/Frontend/src/pages/settings-page.tsx | 51 ++++++++++++++++-------
 1 file changed, 37 insertions(+), 14 deletions(-)

diff --git a/apps/Frontend/src/pages/settings-page.tsx b/apps/Frontend/src/pages/settings-page.tsx
index fb0c006b..2ab490f1 100755
--- a/apps/Frontend/src/pages/settings-page.tsx
+++ b/apps/Frontend/src/pages/settings-page.tsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { Eye, EyeOff } from "lucide-react";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { StaffTable } from "@/components/staffs/staff-table";
 import { useToast } from "@/hooks/use-toast";
@@ -219,6 +220,8 @@ export default function SettingsPage() {
   // MANAGE USERS (admin only)
   const [newUsername, setNewUsername] = useState("");
   const [newPassword, setNewPassword] = useState("");
+  const [showNewUserPassword, setShowNewUserPassword] = useState(false);
+  const [showAdminPassword, setShowAdminPassword] = useState(false);
 
   const {
     data: allUsers = [],
@@ -410,14 +413,24 @@ export default function SettingsPage() {
               </div>
               <div>
                 <label className="block text-sm font-medium">Password</label>
-                <input
-                  type="password"
-                  value={newPassword}
-                  onChange={(e) => setNewPassword(e.target.value)}
-                  className="mt-1 p-2 border rounded w-full"
-                  placeholder="••••••••"
-                  required
-                />
+                <div className="relative mt-1">
+                  <input
+                    type={showNewUserPassword ? "text" : "password"}
+                    value={newPassword}
+                    onChange={(e) => setNewPassword(e.target.value)}
+                    className="p-2 border rounded w-full pr-10"
+                    placeholder="••••••••"
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowNewUserPassword((v) => !v)}
+                    className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
+                    tabIndex={-1}
+                  >
+                    {showNewUserPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                  </button>
+                </div>
               </div>
               <button
                 type="submit"
@@ -466,12 +479,22 @@ export default function SettingsPage() {
 
             <div>
               <label className="block text-sm font-medium">New Password</label>
-              <input
-                type="password"
-                name="password"
-                className="mt-1 p-2 border rounded w-full"
-                placeholder="••••••••"
-              />
+              <div className="relative mt-1">
+                <input
+                  type={showAdminPassword ? "text" : "password"}
+                  name="password"
+                  className="p-2 border rounded w-full pr-10"
+                  placeholder="••••••••"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowAdminPassword((v) => !v)}
+                  className="absolute inset-y-0 right-2 flex items-center text-gray-500 hover:text-gray-700"
+                  tabIndex={-1}
+                >
+                  {showAdminPassword ? <EyeOff size={16} /> : <Eye size={16} />}
+                </button>
+              </div>
               <p className="text-xs text-gray-500 mt-1">
                 Leave blank to keep current password.
               </p>