finalized UI and website for 1.0 release

2026-01-15 01:16:25 +01:00
parent d3b77a394e
commit 85c7a0f8c7
19 changed files with 1743 additions and 1632 deletions
--- a/src/components/proxy-hosts/UpstreamInput.tsx
+++ b/src/components/proxy-hosts/UpstreamInput.tsx
@@ -0,0 +1,129 @@
+
+import { Box, Button, IconButton, Stack, TextField, Tooltip, Typography, Autocomplete, InputAdornment } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+import { useState } from "react";
+
+const PROTOCOL_OPTIONS = ["http://", "https://"];
+
+type UpstreamEntry = {
+    protocol: string;
+    address: string;
+};
+
+function parseUpstream(upstream: string): UpstreamEntry {
+    if (upstream.startsWith("https://")) {
+        return { protocol: "https://", address: upstream.slice(8) };
+    }
+    if (upstream.startsWith("http://")) {
+        return { protocol: "http://", address: upstream.slice(7) };
+    }
+    return { protocol: "http://", address: upstream };
+}
+
+export function UpstreamInput({
+    defaultUpstreams = [],
+    name = "upstreams"
+}: {
+    defaultUpstreams?: string[];
+    name?: string;
+}) {
+    const initialEntries: UpstreamEntry[] = defaultUpstreams.length > 0
+        ? defaultUpstreams.map(parseUpstream)
+        : [{ protocol: "http://", address: "" }];
+
+    const [entries, setEntries] = useState<UpstreamEntry[]>(initialEntries);
+
+    const handleProtocolChange = (index: number, newProtocol: string | null) => {
+        const updated = [...entries];
+        updated[index].protocol = newProtocol || "http://";
+        setEntries(updated);
+    };
+
+    const handleAddressChange = (index: number, newAddress: string) => {
+        const updated = [...entries];
+        updated[index].address = newAddress;
+        setEntries(updated);
+    };
+
+    const handleAdd = () => {
+        setEntries([...entries, { protocol: "http://", address: "" }]);
+    };
+
+    const handleRemove = (index: number) => {
+        if (entries.length === 1) return;
+        setEntries(entries.filter((_, i) => i !== index));
+    };
+
+    const serializedValue = entries
+        .filter(e => e.address.trim() !== "")
+        .map(e => `${e.protocol}${e.address.trim()}`)
+        .join("\n");
+
+    return (
+        <Box>
+            <input type="hidden" name={name} value={serializedValue} />
+            <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
+                Upstreams
+            </Typography>
+            <Stack spacing={1.5}>
+                {entries.map((entry, index) => (
+                    <Stack key={index} direction="row" spacing={1} alignItems="flex-start">
+                        <Autocomplete
+                            freeSolo
+                            options={PROTOCOL_OPTIONS}
+                            value={entry.protocol}
+                            onChange={(_, newValue) => handleProtocolChange(index, newValue)}
+                            onInputChange={(_, newInputValue) => {
+                                if (newInputValue) {
+                                    handleProtocolChange(index, newInputValue);
+                                }
+                            }}
+                            disableClearable
+                            sx={{ width: 140 }}
+                            renderInput={(params) => (
+                                <TextField
+                                    {...params}
+                                    size="small"
+                                    placeholder="http://"
+                                />
+                            )}
+                        />
+                        <TextField
+                            value={entry.address}
+                            onChange={(e) => handleAddressChange(index, e.target.value)}
+                            placeholder="10.0.0.5:8080"
+                            size="small"
+                            fullWidth
+                            required={index === 0}
+                        />
+                        <Tooltip title={entries.length === 1 ? "At least one upstream required" : "Remove upstream"}>
+                            <span>
+                                <IconButton
+                                    size="small"
+                                    onClick={() => handleRemove(index)}
+                                    disabled={entries.length === 1}
+                                    color="error"
+                                    sx={{ mt: 0.5 }}
+                                >
+                                    <RemoveCircleOutlineIcon fontSize="small" />
+                                </IconButton>
+                            </span>
+                        </Tooltip>
+                    </Stack>
+                ))}
+                <Button
+                    startIcon={<AddIcon />}
+                    onClick={handleAdd}
+                    size="small"
+                    sx={{ alignSelf: "flex-start" }}
+                >
+                    Add Upstream
+                </Button>
+            </Stack>
+            <Typography variant="caption" color="text.secondary" sx={{ mt: 0.5, display: "block" }}>
+                Backend servers to proxy requests to
+            </Typography>
+        </Box>
+    );
+}