Desktop Self-hosted guidance improvements (#5060)

Removed timeout when waiting for backend port to allow for slow backend
spinups



<img width="1185" height="951" alt="image"
src="https://github.com/user-attachments/assets/badaf8e5-611d-44aa-aca2-7c1c906c2019"
/>
<img width="1213" height="1533" alt="image"
src="https://github.com/user-attachments/assets/ce78b67a-07e0-4c23-9087-5de0c5f203c6"
/>
<img width="1207" height="1202" alt="image"
src="https://github.com/user-attachments/assets/c6e5b4c5-9cc3-4973-a634-3b7aa1e1dd34"
/>
This commit is contained in:
ConnorYoh
2025-11-28 15:55:37 +00:00
committed by GitHub
parent 731743b618
commit 250979e271
6 changed files with 59 additions and 10 deletions
@@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Stack, TextInput, PasswordInput, Button, Text, Divider, Group } from '@mantine/core';
import { Stack, TextInput, PasswordInput, Button, Text, Divider, Group, Collapse, Anchor, Box } from '@mantine/core';
import { useTranslation } from 'react-i18next';
import { authService } from '@app/services/authService';
import { STIRLING_SAAS_URL } from '@app/constants/connection';
@@ -19,6 +19,7 @@ export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, isSaaS = false,
const [password, setPassword] = useState('');
const [validationError, setValidationError] = useState<string | null>(null);
const [oauthLoading, setOauthLoading] = useState(false);
const [showInstructions, setShowInstructions] = useState(false);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
@@ -92,6 +93,47 @@ export const LoginForm: React.FC<LoginFormProps> = ({ serverUrl, isSaaS = false,
{t('setup.login.connectingTo', 'Connecting to:')} <strong>{isSaaS ? 'stirling.com' : serverUrl}</strong>
</Text>
{/* Login requirement note for self-hosted servers */}
{!isSaaS && (
<Box>
<Text size="xs" c="dimmed">
{t('setup.login.serverRequirement', 'Note: The server must have login enabled.')}{' '}
<Anchor
size="xs"
onClick={() => setShowInstructions(!showInstructions)}
style={{ cursor: 'pointer' }}
>
{showInstructions
? t('setup.login.hideInstructions', 'Hide instructions')
: t('setup.login.showInstructions', 'How to enable?')}
</Anchor>
</Text>
<Collapse in={showInstructions}>
<Box mt="xs" p="sm" style={{ backgroundColor: 'var(--mantine-color-gray-0)', borderRadius: '4px' }}>
<Text size="xs" c="dimmed">
{t('setup.login.instructions', 'To enable login on your Stirling PDF server:')}
</Text>
<Text size="xs" mt="xs" c="dimmed">
{t('setup.login.instructionsEnvVar', 'Set the environment variable:')}
</Text>
<Text size="xs" mt="4px" ff="monospace" c="dark">
SECURITY_ENABLELOGIN=true
</Text>
<Text size="xs" mt="xs" c="dimmed">
{t('setup.login.instructionsOrYml', 'Or in settings.yml:')}
</Text>
<Text size="xs" mt="4px" ff="monospace" c="dark">
security.enableLogin: true
</Text>
<Text size="xs" mt="xs" c="dimmed">
{t('setup.login.instructionsRestart', 'Then restart your server for the changes to take effect.')}
</Text>
</Box>
</Collapse>
</Box>
)}
{/* OAuth Login Buttons - Only show for SaaS */}
{isSaaS && (
<>
@@ -63,7 +63,7 @@ export const ModeSelection: React.FC<ModeSelectionProps> = ({ onSelect, loading
<div style={{ textAlign: 'left', flex: 1 }}>
<Text fw={600} size="md">{t('setup.mode.selfhosted.title', 'Self-Hosted Server')}</Text>
<Text size="sm" c="dimmed" fw={400}>
{t('setup.mode.selfhosted.description', 'Connect to your own Stirling PDF server')}
{t('setup.mode.selfhosted.description', 'Connect to your own Stirling PDF server with your personal account')}
</Text>
</div>
</Button>