From 794e97d7bb2d32e1a7c06bb28c8afdacf070b564 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Mon, 1 Sep 2025 21:25:21 +0000
Subject: [PATCH] fix: change password button not responding to clicks
 (addresses #396)

- Fixed condition for showing authentication section to include configured state
- Added proper event handling with preventDefault and stopPropagation
- Increased z-index of modal to ensure it appears above other elements
- Added debug logging to help diagnose issues
- Button now works when authentication is configured but not fully loaded
---
 .../components/Settings/ChangePasswordModal.tsx   |  5 ++++-
 .../src/components/Settings/Settings.tsx          | 15 ++++++++++++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
index d62bcda44..b799ea566 100644
--- a/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
+++ b/frontend-modern/src/components/Settings/ChangePasswordModal.tsx
@@ -13,6 +13,9 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
   const [confirmPassword, setConfirmPassword] = createSignal('');
   const [loading, setLoading] = createSignal(false);
   const [error, setError] = createSignal('');
+  
+  // Debug logging
+  console.log('ChangePasswordModal rendered, isOpen:', props.isOpen);
 
   const handleSubmit = async (e: Event) => {
     e.preventDefault();
@@ -110,7 +113,7 @@ export const ChangePasswordModal: Component<ChangePasswordModalProps> = (props)
   return (
     <Show when={props.isOpen}>
       <Portal>
-        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
+        <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style="z-index: 9999">
           <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl max-w-md w-full">
             <div class="flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700">
               <h2 class="text-xl font-semibold text-gray-900 dark:text-white">
diff --git a/frontend-modern/src/components/Settings/Settings.tsx b/frontend-modern/src/components/Settings/Settings.tsx
index 95eb59c1c..8af827fec 100644
--- a/frontend-modern/src/components/Settings/Settings.tsx
+++ b/frontend-modern/src/components/Settings/Settings.tsx
@@ -210,7 +210,10 @@ const Settings: Component = () => {
       const response = await apiFetch('/api/security/status');
       if (response.ok) {
         const status = await response.json();
+        console.log('Security status loaded:', status);
         setSecurityStatus(status);
+      } else {
+        console.error('Failed to fetch security status:', response.status);
       }
     } catch (err) {
       console.error('Failed to fetch security status:', err);
@@ -1739,7 +1742,7 @@ const Settings: Component = () => {
               </Show>
               
               {/* Authentication */}
-              <Show when={securityStatus()?.hasAuthentication}>
+              <Show when={!securityStatusLoading() && (securityStatus()?.hasAuthentication || securityStatus()?.configured)}>
                 <div class="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden">
                   {/* Header */}
                   <div class="bg-gradient-to-r from-gray-50 to-gray-50 dark:from-gray-900/20 dark:to-gray-900/20 px-6 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -1760,8 +1763,14 @@ const Settings: Component = () => {
                   <div class="p-6">
                     <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <button type="button"
-                        onClick={() => setShowPasswordModal(true)}
-                        class="flex items-center gap-3 p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-all group"
+                        onClick={(e) => {
+                          e.preventDefault();
+                          e.stopPropagation();
+                          console.log('Change password button clicked, current modal state:', showPasswordModal());
+                          setShowPasswordModal(true);
+                          console.log('Modal state after setting:', showPasswordModal());
+                        }}
+                        class="flex items-center gap-3 p-4 border border-gray-200 dark:border-gray-700 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-all group cursor-pointer"
                       >
                         <div class="p-2 bg-blue-100 dark:bg-blue-900/30 rounded-lg group-hover:bg-blue-200 dark:group-hover:bg-blue-900/50 transition-colors">
                           <svg class="w-5 h-5 text-blue-600 dark:text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">