Allow desktop app to connect to selfhosted servers (#4902)

# Description of Changes Changes the desktop app to allow connections to self-hosted servers on first startup. This was quite involved and hit loads of CORS issues all through the stack, but I think it's working now. This also changes the bundled backend to spawn on an OS-decided port rather than always spawning on `8080`, which means that the user can have other things running on port `8080` now and the app will still work fine. There were quite a few places that needed to be updated to decouple the app from explicitly using `8080` and I was originally going to split those changes out into another PR (#4939), but I couldn't get it working independently in the time I had, so the diff here is just going to be complex and contian two distinct changes - sorry 🙁
2026-07-16 19:33:11 +02:00 · 2025-11-20 10:03:34 +00:00
parent 75414b89f9
commit f4725b98b0
43 changed files with 3209 additions and 218 deletions
@@ -0,0 +1,92 @@
+import React, { useState } from 'react';
+import { Stack, Button, TextInput } from '@mantine/core';
+import { useTranslation } from 'react-i18next';
+import { ServerConfig } from '@app/services/connectionModeService';
+import { connectionModeService } from '@app/services/connectionModeService';
+
+interface ServerSelectionProps {
+  onSelect: (config: ServerConfig) => void;
+  loading: boolean;
+}
+
+export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, loading }) => {
+  const { t } = useTranslation();
+  const [customUrl, setCustomUrl] = useState('');
+  const [testing, setTesting] = useState(false);
+  const [testError, setTestError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    const url = customUrl.trim();
+
+    if (!url) {
+      setTestError(t('setup.server.error.emptyUrl', 'Please enter a server URL'));
+      return;
+    }
+
+    // Test connection before proceeding
+    setTesting(true);
+    setTestError(null);
+
+    try {
+      const isReachable = await connectionModeService.testConnection(url);
+
+      if (!isReachable) {
+        setTestError(t('setup.server.error.unreachable', 'Could not connect to server'));
+        setTesting(false);
+        return;
+      }
+
+      // Connection successful
+      onSelect({
+        url,
+        server_type: 'selfhosted',
+      });
+    } catch (error) {
+      console.error('Connection test failed:', error);
+      setTestError(
+        error instanceof Error
+          ? error.message
+          : t('setup.server.error.testFailed', 'Connection test failed')
+      );
+    } finally {
+      setTesting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Stack gap="md">
+        <TextInput
+          label={t('setup.server.url.label', 'Server URL')}
+          placeholder="https://your-server.com"
+          value={customUrl}
+          onChange={(e) => {
+            setCustomUrl(e.target.value);
+            setTestError(null);
+          }}
+          disabled={loading || testing}
+          error={testError}
+          description={t(
+            'setup.server.url.description',
+            'Enter the full URL of your self-hosted Stirling PDF server'
+          )}
+        />
+
+        <Button
+          type="submit"
+          loading={testing || loading}
+          disabled={loading}
+          mt="md"
+          fullWidth
+          color="#AF3434"
+        >
+          {testing
+            ? t('setup.server.testing', 'Testing connection...')
+            : t('common.continue', 'Continue')}
+        </Button>
+      </Stack>
+    </form>
+  );
+};