arsvendg/Stirling-PDF
1
0
Fork 0
mirror of https://github.com/arsvendg/Stirling-PDF.git synced 2026-07-16 19:33:11 +02:00
Code Issues Actions 4 Packages Projects Releases 1 Wiki Activity

Detect backend down (#5010)

Browse Source 
# Description of Changes

<!--
Please provide a summary of the changes, including:

- What was changed
- Why the change was made
- Any challenges encountered

Closes #(issue_number)
-->

---

## Checklist

### General

- [ ] I have read the [Contribution
Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md)
- [ ] I have read the [Stirling-PDF Developer
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md)
(if applicable)
- [ ] I have read the [How to add new languages to
Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md)
(if applicable)
- [ ] I have performed a self-review of my own code
- [ ] My changes generate no new warnings

### Documentation

- [ ] I have updated relevant docs on [Stirling-PDF's doc
repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/)
(if functionality has heavily changed)
- [ ] I have read the section [Add New Translation
Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags)
(for new translation tags only)

### Translations (if applicable)

- [ ] I ran
[`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md)

### UI Changes (if applicable)

- [ ] Screenshots or videos demonstrating the UI changes are attached
(e.g., as comments or direct attachments in the PR)

### Testing (if applicable)

- [ ] I have tested my changes locally. Refer to the [Testing
Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing)
for more details.
This commit is contained in:
Reece Browne
2025-11-25 22:10:38 +00:00
committed by GitHub
parent d8a99fcb07
commit 31b3219169
8 changed files with 315 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/proprietary/routes/Landing.tsx
+80 -6
View File
@@ -1,11 +1,15 @@
import { useState, useEffect } from 'react'
import { Navigate, useLocation } from 'react-router-dom'
import { Navigate, useLocation, useNavigate } from 'react-router-dom'
import { useAuth } from '@app/auth/UseSession'
import { useAppConfig } from '@app/contexts/AppConfigContext'
import HomePage from '@app/pages/HomePage'
// Login component is used via routing, not directly imported
import FirstLoginModal from '@app/components/shared/FirstLoginModal'
import { accountService } from '@app/services/accountService'
import { useBackendProbe } from '@app/hooks/useBackendProbe'
import AuthLayout from '@app/routes/authShared/AuthLayout'
import LoginHeader from '@app/routes/login/LoginHeader'
import { useTranslation } from 'react-i18next'
/**
* Landing component - Smart router based on authentication status
@@ -16,13 +20,36 @@ import { accountService } from '@app/services/accountService'
*/
export default function Landing() {
const { session, loading: authLoading, refreshSession } = useAuth();
const { config, loading: configLoading } = useAppConfig();
const { config, loading: configLoading, refetch } = useAppConfig();
const backendProbe = useBackendProbe();
const location = useLocation();
const navigate = useNavigate();
const { t } = useTranslation();
const [isFirstLogin, setIsFirstLogin] = useState(false);
const [checkingFirstLogin, setCheckingFirstLogin] = useState(false);
const [username, setUsername] = useState('');
const loading = authLoading || configLoading;
const loading = authLoading || configLoading || backendProbe.loading;
// Periodically probe while backend isn't up so the screen can auto-advance when it comes online
useEffect(() => {
if (backendProbe.status === 'up' || backendProbe.loginDisabled) {
return;
}
const tick = async () => {
const result = await backendProbe.probe();
if (result.status === 'up') {
await refetch();
if (result.loginDisabled) {
navigate('/', { replace: true });
}
}
};
const intervalId = window.setInterval(() => {
void tick();
}, 5000);
return () => window.clearInterval(intervalId);
}, [backendProbe.status, backendProbe.loginDisabled, backendProbe.probe, navigate, refetch]);
// Check if user needs to change password on first login
useEffect(() => {
@@ -46,6 +73,12 @@ export default function Landing() {
checkFirstLogin()
}, [session, config])
useEffect(() => {
if (backendProbe.status === 'up') {
void refetch();
}
}, [backendProbe.status, refetch]);
const handlePasswordChanged = async () => {
// After password change, backend logs out the user
// Refresh session to detect logout and redirect to login
@@ -58,7 +91,7 @@ export default function Landing() {
pathname: location.pathname,
loading,
hasSession: !!session,
loginEnabled: config?.enableLogin,
loginEnabled: config?.enableLogin === true && !backendProbe.loginDisabled,
});
// Show loading while checking auth and config
@@ -76,11 +109,50 @@ export default function Landing() {
}
// If login is disabled, show app directly (anonymous mode)
if (config?.enableLogin === false) {
if (config?.enableLogin === false || backendProbe.loginDisabled) {
console.debug('[Landing] Login disabled - showing app in anonymous mode');
return <HomePage />;
}
// If backend is not up yet and user is not authenticated, show a branded status screen
if (!session && backendProbe.status !== 'up') {
const backendTitle = t('backendStartup.notFoundTitle', 'Backend not found');
const handleRetry = async () => {
const result = await backendProbe.probe();
if (result.status === 'up') {
await refetch();
navigate('/', { replace: true });
}
};
return (
<AuthLayout>
<LoginHeader title={backendTitle} />
<div
className="auth-section"
style={{
padding: '1.5rem',
marginTop: '1rem',
borderRadius: '0.75rem',
backgroundColor: 'rgba(37, 99, 235, 0.08)',
border: '1px solid rgba(37, 99, 235, 0.2)',
}}
>
<p style={{ margin: '0 0 0.75rem 0', color: 'rgba(15, 23, 42, 0.8)' }}>
{t('backendStartup.unreachable')}
</p>
<button
type="button"
onClick={handleRetry}
className="auth-cta-button px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mt-5 border-0 cursor-pointer"
style={{ width: 'fit-content' }}
>
{t('backendStartup.retry', 'Retry')}
</button>
</div>
</AuthLayout>
);
}
// If we have a session, show the main app
if (session) {
return (
@@ -97,5 +169,7 @@ export default function Landing() {
// No session - redirect to login page
// This ensures the URL always shows /login when not authenticated
return <Navigate to="/login" replace state={{ from: location }} />;
return (config?.enableLogin === true && !backendProbe.loginDisabled)
? <Navigate to="/login" replace state={{ from: location }} />
: <HomePage />;
}
frontend/src/proprietary/routes/Login.test.tsx
+22 -2
View File
@@ -40,6 +40,20 @@ vi.mock('@app/hooks/useDocumentMeta', () => ({
global.fetch = vi.fn();
const mockNavigate = vi.fn();
const mockBackendProbeState = {
status: 'up' as const,
loginDisabled: false,
loading: false,
};
const mockProbe = vi.fn().mockResolvedValue(mockBackendProbeState);
vi.mock('@app/hooks/useBackendProbe', () => ({
useBackendProbe: () => ({
...mockBackendProbeState,
probe: mockProbe,
}),
}));
vi.mock('react-router-dom', async () => {
const actual = await vi.importActual('react-router-dom');
return {
@@ -58,6 +72,10 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
describe('Login', () => {
beforeEach(() => {
vi.clearAllMocks();
mockBackendProbeState.status = 'up';
mockBackendProbeState.loginDisabled = false;
mockBackendProbeState.loading = false;
mockProbe.mockResolvedValue(mockBackendProbeState);
// Default auth state - not logged in
vi.mocked(useAuth).mockReturnValue({
@@ -330,13 +348,15 @@ describe('Login', () => {
</TestWrapper>
);
waitFor(() => {
return waitFor(() => {
const emailInput = document.getElementById('email') as HTMLInputElement;
expect(emailInput.value).toBe(email);
});
});
it('should redirect to home when login disabled', async () => {
mockBackendProbeState.loginDisabled = true;
mockProbe.mockResolvedValueOnce({ status: 'up', loginDisabled: true, loading: false });
vi.mocked(fetch).mockResolvedValueOnce({
ok: true,
json: async () => ({
@@ -354,7 +374,7 @@ describe('Login', () => {
);
await waitFor(() => {
expect(mockNavigate).toHaveBeenCalledWith('/');
expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });
});
});
frontend/src/proprietary/routes/Login.tsx
+91 -4
View File
@@ -1,11 +1,13 @@
import { useEffect, useState } from 'react';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
import { Text, Stack, Alert } from '@mantine/core';
import { springAuth } from '@app/auth/springAuthClient';
import { useAuth } from '@app/auth/UseSession';
import { useAppConfig } from '@app/contexts/AppConfigContext';
import { useTranslation } from 'react-i18next';
import { useDocumentMeta } from '@app/hooks/useDocumentMeta';
import AuthLayout from '@app/routes/authShared/AuthLayout';
import { useBackendProbe } from '@app/hooks/useBackendProbe';
// Import login components
import LoginHeader from '@app/routes/login/LoginHeader';
@@ -20,18 +22,41 @@ export default function Login() {
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { session, loading } = useAuth();
const { refetch } = useAppConfig();
const { t } = useTranslation();
const [isSigningIn, setIsSigningIn] = useState(false);
const [error, setError] = useState<string | null>(null);
const [successMessage, setSuccessMessage] = useState<string | null>(null);
const [showEmailForm, setShowEmailForm] = useState(false);
const [email, setEmail] = useState('');
const [email, setEmail] = useState(() => searchParams.get('email') ?? '');
const [password, setPassword] = useState('');
const [enabledProviders, setEnabledProviders] = useState<string[]>([]);
const [hasSSOProviders, setHasSSOProviders] = useState(false);
const [_enableLogin, setEnableLogin] = useState<boolean | null>(null);
const backendProbe = useBackendProbe();
const [isFirstTimeSetup, setIsFirstTimeSetup] = useState(false);
const [showDefaultCredentials, setShowDefaultCredentials] = useState(false);
const loginDisabled = backendProbe.loginDisabled === true || _enableLogin === false;
// Periodically probe while backend isn't up so the screen can auto-advance when it comes online
useEffect(() => {
if (backendProbe.status === 'up' || backendProbe.loginDisabled) {
return;
}
const tick = async () => {
const result = await backendProbe.probe();
if (result.status === 'up') {
await refetch();
if (loginDisabled) {
navigate('/', { replace: true });
}
}
};
const intervalId = window.setInterval(() => {
void tick();
}, 5000);
return () => window.clearInterval(intervalId);
}, [backendProbe.status, backendProbe.loginDisabled, backendProbe.probe, refetch, navigate, loginDisabled]);
// Redirect immediately if user has valid session (JWT already validated by AuthProvider)
useEffect(() => {
@@ -41,6 +66,21 @@ export default function Login() {
}
}, [session, loading, navigate]);
// If backend reports login is disabled, redirect to home (anonymous mode)
useEffect(() => {
if (backendProbe.loginDisabled) {
// Slight delay to allow state updates before redirecting
const id = setTimeout(() => navigate('/', { replace: true }), 0);
return () => clearTimeout(id);
}
}, [backendProbe.loginDisabled, navigate]);
useEffect(() => {
if (backendProbe.status === 'up') {
void refetch();
}
}, [backendProbe.status, refetch]);
// Fetch enabled SSO providers and login config from backend
useEffect(() => {
const fetchProviders = async () => {
@@ -73,8 +113,11 @@ export default function Login() {
console.error('[Login] Failed to fetch enabled providers:', err);
}
};
fetchProviders();
}, [navigate]);
if (backendProbe.status === 'up' || backendProbe.loginDisabled) {
fetchProviders();
}
}, [navigate, backendProbe.status, backendProbe.loginDisabled]);
// Update hasSSOProviders and showEmailForm when enabledProviders changes
useEffect(() => {
@@ -134,11 +177,55 @@ export default function Login() {
ogUrl: `${window.location.origin}${window.location.pathname}`
});
// If login is disabled, short-circuit to home (avoids rendering the form after retry)
if (loginDisabled) {
return <Navigate to="/" replace />;
}
// Show logged in state if authenticated
if (session && !loading) {
return <LoggedInState />;
}
// If backend isn't ready yet, show a lightweight status screen instead of the form
if (backendProbe.status !== 'up' && !loginDisabled) {
const backendTitle = t('backendStartup.notFoundTitle', 'Backend not found');
const handleRetry = async () => {
const result = await backendProbe.probe();
if (result.status === 'up') {
await refetch();
navigate('/', { replace: true });
}
};
return (
<AuthLayout>
<LoginHeader title={backendTitle} />
<div
className="auth-section"
style={{
padding: '1.5rem',
marginTop: '1rem',
borderRadius: '0.75rem',
backgroundColor: 'rgba(37, 99, 235, 0.08)',
border: '1px solid rgba(37, 99, 235, 0.2)',
}}
>
<p style={{ margin: '0 0 0.75rem 0', color: 'rgba(15, 23, 42, 0.8)' }}>
{t('backendStartup.unreachable')}
</p>
<button
type="button"
onClick={handleRetry}
className="auth-cta-button px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mt-5 border-0 cursor-pointer"
style={{ width: 'fit-content' }}
>
{t('backendStartup.retry', 'Retry')}
</button>
</div>
</AuthLayout>
);
}
const signInWithProvider = async (provider: 'github' | 'google' | 'apple' | 'azure' | 'keycloak' | 'oidc') => {
try {
setIsSigningIn(true);