From 771889ab4f376ecf7bd3cdfbcc3227830987f824 Mon Sep 17 00:00:00 2001
From: Michael Chihlas <michael@chihlas.com>
Date: Sat, 14 Feb 2026 23:22:19 -0500
Subject: [PATCH] feat: add reusable PasswordInput with show/hide toggle

Replaces all type="password" inputs site-wide with a PasswordInput
component that includes an eye icon toggle for visibility.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/common/PasswordInput.tsx   | 32 +++++++++++++++++++
 .../components/procedural/IntakeFormModal.tsx |  4 +--
 frontend/src/pages/ChangePasswordPage.tsx     | 10 +++---
 frontend/src/pages/LoginPage.tsx              |  4 +--
 frontend/src/pages/RegisterPage.tsx           |  7 ++--
 frontend/src/pages/ResetPasswordPage.tsx      |  7 ++--
 6 files changed, 46 insertions(+), 18 deletions(-)
 create mode 100644 frontend/src/components/common/PasswordInput.tsx

diff --git a/frontend/src/components/common/PasswordInput.tsx b/frontend/src/components/common/PasswordInput.tsx
new file mode 100644
index 00000000..d061f291
--- /dev/null
+++ b/frontend/src/components/common/PasswordInput.tsx
@@ -0,0 +1,32 @@
+import { useState } from 'react'
+import { Eye, EyeOff } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  className?: string
+}
+
+export function PasswordInput({ className, ...props }: PasswordInputProps) {
+  const [visible, setVisible] = useState(false)
+
+  return (
+    <div className="relative">
+      <input
+        {...props}
+        type={visible ? 'text' : 'password'}
+        className={cn(className, 'pr-10')}
+      />
+      <button
+        type="button"
+        onClick={() => setVisible((v) => !v)}
+        className="absolute right-2 top-1/2 -translate-y-1/2 rounded p-1 text-white/40 hover:bg-white/10 hover:text-white"
+        tabIndex={-1}
+        title={visible ? 'Hide password' : 'Show password'}
+      >
+        {visible ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+      </button>
+    </div>
+  )
+}
+
+export default PasswordInput
diff --git a/frontend/src/components/procedural/IntakeFormModal.tsx b/frontend/src/components/procedural/IntakeFormModal.tsx
index 148e895e..b295624b 100644
--- a/frontend/src/components/procedural/IntakeFormModal.tsx
+++ b/frontend/src/components/procedural/IntakeFormModal.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react'
 import type { IntakeFormField } from '@/types'
+import { PasswordInput } from '@/components/common/PasswordInput'
 import { cn } from '@/lib/utils'
 
 interface IntakeFormModalProps {
@@ -119,8 +120,7 @@ export function IntakeFormModal({ isOpen, fields, treeName, onSubmit, onCancel }
 
       case 'password':
         input = (
-          <input
-            type="password"
+          <PasswordInput
             value={value}
             onChange={(e) => setValue(field.variable_name, e.target.value)}
             placeholder={field.placeholder}
diff --git a/frontend/src/pages/ChangePasswordPage.tsx b/frontend/src/pages/ChangePasswordPage.tsx
index 34b1e1d0..9dda8f43 100644
--- a/frontend/src/pages/ChangePasswordPage.tsx
+++ b/frontend/src/pages/ChangePasswordPage.tsx
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { authApi } from '@/api/auth'
 import { toast } from '@/lib/toast'
+import { PasswordInput } from '@/components/common/PasswordInput'
 import { BrandLogo } from '@/components/common/BrandLogo'
 import { cn } from '@/lib/utils'
 
@@ -87,9 +88,8 @@ export function ChangePasswordPage() {
               <label htmlFor="current-password" className="mb-1 block text-sm font-medium text-white">
                 Current Password
               </label>
-              <input
+              <PasswordInput
                 id="current-password"
-                type="password"
                 autoComplete="current-password"
                 required
                 value={currentPassword}
@@ -107,9 +107,8 @@ export function ChangePasswordPage() {
               <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
                 New Password
               </label>
-              <input
+              <PasswordInput
                 id="new-password"
-                type="password"
                 autoComplete="new-password"
                 required
                 value={newPassword}
@@ -131,9 +130,8 @@ export function ChangePasswordPage() {
               <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
                 Confirm New Password
               </label>
-              <input
+              <PasswordInput
                 id="confirm-password"
-                type="password"
                 autoComplete="new-password"
                 required
                 value={confirmPassword}
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index cafba292..ed182d9f 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { Link, useNavigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { PasswordInput } from '@/components/common/PasswordInput'
 import { cn } from '@/lib/utils'
 
 export function LoginPage() {
@@ -95,10 +96,9 @@ export function LoginPage() {
               <label htmlFor="password" className="mb-1 block text-sm font-medium text-white">
                 Password
               </label>
-              <input
+              <PasswordInput
                 id="password"
                 name="password"
-                type="password"
                 autoComplete="current-password"
                 required
                 value={password}
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 9c89142f..179bc0e0 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -3,6 +3,7 @@ import { Link, useNavigate } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
 import { inviteApi } from '@/api/invite'
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { PasswordInput } from '@/components/common/PasswordInput'
 import { cn } from '@/lib/utils'
 
 export function RegisterPage() {
@@ -187,10 +188,9 @@ export function RegisterPage() {
               <label htmlFor="password" className="block text-sm font-medium text-white">
                 Password
               </label>
-              <input
+              <PasswordInput
                 id="password"
                 name="password"
-                type="password"
                 autoComplete="new-password"
                 required
                 value={password}
@@ -211,10 +211,9 @@ export function RegisterPage() {
               <label htmlFor="confirmPassword" className="block text-sm font-medium text-white">
                 Confirm password
               </label>
-              <input
+              <PasswordInput
                 id="confirmPassword"
                 name="confirmPassword"
-                type="password"
                 autoComplete="new-password"
                 required
                 value={confirmPassword}
diff --git a/frontend/src/pages/ResetPasswordPage.tsx b/frontend/src/pages/ResetPasswordPage.tsx
index 4d003b8b..248e90c3 100644
--- a/frontend/src/pages/ResetPasswordPage.tsx
+++ b/frontend/src/pages/ResetPasswordPage.tsx
@@ -3,6 +3,7 @@ import { Link, useSearchParams, useNavigate } from 'react-router-dom'
 import { authApi } from '@/api/auth'
 import { toast } from '@/lib/toast'
 import { BrandLogo } from '@/components/common/BrandLogo'
+import { PasswordInput } from '@/components/common/PasswordInput'
 import { cn } from '@/lib/utils'
 
 export function ResetPasswordPage() {
@@ -123,9 +124,8 @@ export function ResetPasswordPage() {
                 <label htmlFor="new-password" className="mb-1 block text-sm font-medium text-white">
                   New Password
                 </label>
-                <input
+                <PasswordInput
                   id="new-password"
-                  type="password"
                   autoComplete="new-password"
                   required
                   value={newPassword}
@@ -147,9 +147,8 @@ export function ResetPasswordPage() {
                 <label htmlFor="confirm-password" className="mb-1 block text-sm font-medium text-white">
                   Confirm New Password
                 </label>
-                <input
+                <PasswordInput
                   id="confirm-password"
-                  type="password"
                   autoComplete="new-password"
                   required
                   value={confirmPassword}