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

fix: use proper Show components for reactive rendering in Login

Browse Source 
Refactored Login component to use nested Show components for proper reactivity in SolidJS. This ensures the component re-renders correctly when auth status changes, fixing the issue where UI stayed stuck on "Checking authentication...".
This commit is contained in:
Pulse Monitor
2025-08-16 18:51:05 +00:00
parent c636268569
commit ecf6000f6b
1 changed files with 37 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend-modern/src/components/Login.tsx
+37 -26
View File
@@ -78,38 +78,49 @@ export const Login: Component<LoginProps> = (props) => {
// Debug logging
console.log('[Login] Render - loadingAuth:', loadingAuth(), 'authStatus:', authStatus());
// Show loading state while checking auth status
if (loadingAuth()) {
return (
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900">
<div class="text-center">
<div class="animate-spin h-12 w-12 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
<p class="text-gray-600 dark:text-gray-400">Checking authentication...</p>
</div>
</div>
);
}
// Show FirstRunSetup if no authentication is configured
const status = authStatus();
if (status && status.hasAuthentication === false) {
console.log('[Login] Showing FirstRunSetup because hasAuthentication is false');
return (
<Suspense fallback={
return (
<Show
when={!loadingAuth()}
fallback={
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900">
<div class="text-center">
<div class="animate-spin h-12 w-12 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
<p class="text-gray-600 dark:text-gray-400">Loading setup...</p>
<p class="text-gray-600 dark:text-gray-400">Checking authentication...</p>
</div>
</div>
}>
<FirstRunSetup />
</Suspense>
);
}
}
>
<Show
when={authStatus()?.hasAuthentication === false}
fallback={<LoginForm {...{ username, setUsername, password, setPassword, error, loading, handleSubmit }} />}
>
<Suspense fallback={
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900">
<div class="text-center">
<div class="animate-spin h-12 w-12 border-4 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"></div>
<p class="text-gray-600 dark:text-gray-400">Loading setup...</p>
</div>
</div>
}>
<FirstRunSetup />
</Suspense>
</Show>
</Show>
);
};
// Extract login form to separate component for cleaner code
const LoginForm: Component<{
username: () => string;
setUsername: (v: string) => void;
password: () => string;
setPassword: (v: string) => void;
error: () => string;
loading: () => boolean;
handleSubmit: (e: Event) => void;
}> = (props) => {
const { username, setUsername, password, setPassword, error, loading, handleSubmit } = props;
// Show login form if authentication is configured
return (
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-white to-cyan-50 dark:from-gray-900 dark:via-gray-800 dark:to-blue-900 py-12 px-4 sm:px-6 lg:px-8">
<div class="max-w-md w-full space-y-8">