gsadmin/pulse
1
0
Fork 0
mirror of https://github.com/rcourtman/Pulse.git synced 2026-09-22 19:23:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: change password button not responding to clicks (addresses #396)

Browse Source 
- 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
This commit is contained in:
Pulse Monitor
2025-09-01 21:25:21 +00:00
parent effa640fda
commit 794e97d7bb
2 changed files with 16 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Settings/ChangePasswordModal.tsx
+4 -1
View File
@@ -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">
frontend-modern/src/components/Settings/Settings.tsx
+12 -3
View File
@@ -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">