finalized UI and website for 1.0 release
This commit is contained in:
fuomag9
176
src/components/proxy-hosts/AuthentikFields.tsx
Normal file
176
src/components/proxy-hosts/AuthentikFields.tsx
Normal file
@@ -0,0 +1,176 @@
|
||||
|
||||
import { Box, Checkbox, Collapse, FormControlLabel, Stack, Switch, TextField, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
import { AuthentikSettings } from "@/src/lib/settings";
|
||||
import { ProxyHost } from "@/src/lib/models/proxy-hosts";
|
||||
|
||||
const AUTHENTIK_DEFAULT_HEADERS = [
|
||||
"X-Authentik-Username",
|
||||
"X-Authentik-Groups",
|
||||
"X-Authentik-Entitlements",
|
||||
"X-Authentik-Email",
|
||||
"X-Authentik-Name",
|
||||
"X-Authentik-Uid",
|
||||
"X-Authentik-Jwt",
|
||||
"X-Authentik-Meta-Jwks",
|
||||
"X-Authentik-Meta-Outpost",
|
||||
"X-Authentik-Meta-Provider",
|
||||
"X-Authentik-Meta-App",
|
||||
"X-Authentik-Meta-Version"
|
||||
];
|
||||
|
||||
const AUTHENTIK_DEFAULT_TRUSTED_PROXIES = ["private_ranges"];
|
||||
|
||||
function HiddenCheckboxField({
|
||||
name,
|
||||
defaultChecked,
|
||||
label,
|
||||
disabled,
|
||||
helperText
|
||||
}: {
|
||||
name: string;
|
||||
defaultChecked: boolean;
|
||||
label: string;
|
||||
disabled?: boolean;
|
||||
helperText?: string;
|
||||
}) {
|
||||
return (
|
||||
<Box>
|
||||
<input type="hidden" name={`${name}_present`} value="1" />
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
name={name}
|
||||
defaultChecked={defaultChecked}
|
||||
disabled={disabled}
|
||||
size="small"
|
||||
/>
|
||||
}
|
||||
label={<Typography variant="body2">{label}</Typography>}
|
||||
disabled={disabled}
|
||||
/>
|
||||
{helperText && (
|
||||
<Typography variant="caption" color="text.secondary" sx={{ display: "block", ml: 4, mt: -0.5 }}>
|
||||
{helperText}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
export function AuthentikFields({
|
||||
authentik,
|
||||
defaults
|
||||
}: {
|
||||
authentik?: ProxyHost["authentik"] | null;
|
||||
defaults?: AuthentikSettings | null;
|
||||
}) {
|
||||
const initial = authentik ?? null;
|
||||
const [enabled, setEnabled] = useState(initial?.enabled ?? false);
|
||||
|
||||
const copyHeadersValue =
|
||||
initial && initial.copyHeaders.length > 0 ? initial.copyHeaders.join("\n") : AUTHENTIK_DEFAULT_HEADERS.join("\n");
|
||||
const trustedProxiesValue =
|
||||
initial && initial.trustedProxies.length > 0
|
||||
? initial.trustedProxies.join("\n")
|
||||
: AUTHENTIK_DEFAULT_TRUSTED_PROXIES.join("\n");
|
||||
const setHostHeaderDefault = initial?.setOutpostHostHeader ?? true;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
border: "1px solid",
|
||||
borderColor: "primary.main",
|
||||
bgcolor: "rgba(99, 102, 241, 0.05)",
|
||||
p: 2.5
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="authentik_present" value="1" />
|
||||
<input type="hidden" name="authentik_enabled_present" value="1" />
|
||||
<Stack spacing={2}>
|
||||
<Stack direction="row" alignItems="center" justifyContent="space-between">
|
||||
<Box>
|
||||
<Typography variant="subtitle1" fontWeight={600}>
|
||||
Authentik Forward Auth
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Proxy authentication via Authentik outpost
|
||||
</Typography>
|
||||
</Box>
|
||||
<Switch
|
||||
name="authentik_enabled"
|
||||
checked={enabled}
|
||||
onChange={(_, checked) => setEnabled(checked)}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Collapse in={enabled} timeout="auto" unmountOnExit>
|
||||
<Stack spacing={2}>
|
||||
<TextField
|
||||
name="authentik_outpost_domain"
|
||||
label="Outpost Domain"
|
||||
placeholder="outpost.goauthentik.io"
|
||||
defaultValue={initial?.outpostDomain ?? defaults?.outpostDomain ?? ""}
|
||||
required={enabled}
|
||||
disabled={!enabled}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
name="authentik_outpost_upstream"
|
||||
label="Outpost Upstream URL"
|
||||
placeholder="https://outpost.internal:9000"
|
||||
defaultValue={initial?.outpostUpstream ?? defaults?.outpostUpstream ?? ""}
|
||||
required={enabled}
|
||||
disabled={!enabled}
|
||||
fullWidth
|
||||
/>
|
||||
{/* ... other fields ... */}
|
||||
<TextField
|
||||
name="authentik_auth_endpoint"
|
||||
label="Auth Endpoint (Optional)"
|
||||
placeholder="/outpost.goauthentik.io/auth/caddy"
|
||||
defaultValue={initial?.authEndpoint ?? defaults?.authEndpoint ?? ""}
|
||||
disabled={!enabled}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
name="authentik_copy_headers"
|
||||
label="Headers to Copy"
|
||||
defaultValue={copyHeadersValue}
|
||||
disabled={!enabled}
|
||||
multiline
|
||||
minRows={3}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
name="authentik_trusted_proxies"
|
||||
label="Trusted Proxies"
|
||||
defaultValue={trustedProxiesValue}
|
||||
disabled={!enabled}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
name="authentik_protected_paths"
|
||||
label="Protected Paths (Optional)"
|
||||
placeholder="/secret/*, /admin/*"
|
||||
helperText="Leave empty to protect entire domain. Specify paths to protect specific routes only."
|
||||
defaultValue={initial?.protectedPaths?.join(", ") ?? ""}
|
||||
disabled={!enabled}
|
||||
multiline
|
||||
minRows={2}
|
||||
fullWidth
|
||||
/>
|
||||
<HiddenCheckboxField
|
||||
name="authentik_set_host_header"
|
||||
defaultChecked={setHostHeaderDefault}
|
||||
label="Set Host Header for Outpost"
|
||||
disabled={!enabled}
|
||||
helperText="Recommended: Keep enabled. Only disable if using IP-based outpost access or troubleshooting routing issues."
|
||||
/>
|
||||
</Stack>
|
||||
</Collapse>
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
260
src/components/proxy-hosts/HostDialogs.tsx
Normal file
260
src/components/proxy-hosts/HostDialogs.tsx
Normal file
@@ -0,0 +1,260 @@
|
||||
|
||||
import { Alert, Box, MenuItem, Stack, TextField, Typography } from "@mui/material";
|
||||
import { useFormState } from "react-dom";
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
createProxyHostAction,
|
||||
deleteProxyHostAction,
|
||||
updateProxyHostAction
|
||||
} from "@/app/(dashboard)/proxy-hosts/actions";
|
||||
import { INITIAL_ACTION_STATE } from "@/src/lib/actions";
|
||||
import { AccessList } from "@/src/lib/models/access-lists";
|
||||
import { Certificate } from "@/src/lib/models/certificates";
|
||||
import { ProxyHost } from "@/src/lib/models/proxy-hosts";
|
||||
import { AuthentikSettings } from "@/src/lib/settings";
|
||||
import { AppDialog } from "@/src/components/ui/AppDialog";
|
||||
import { AuthentikFields } from "./AuthentikFields";
|
||||
import { SettingsToggles } from "./SettingsToggles";
|
||||
import { UpstreamInput } from "./UpstreamInput";
|
||||
|
||||
export function CreateHostDialog({
|
||||
open,
|
||||
onClose,
|
||||
certificates,
|
||||
accessLists,
|
||||
authentikDefaults
|
||||
}: {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
certificates: Certificate[];
|
||||
accessLists: AccessList[];
|
||||
authentikDefaults: AuthentikSettings | null;
|
||||
}) {
|
||||
const [state, formAction] = useFormState(createProxyHostAction, INITIAL_ACTION_STATE);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.status === "success") {
|
||||
setTimeout(onClose, 1000);
|
||||
}
|
||||
}, [state.status, onClose]);
|
||||
|
||||
return (
|
||||
<AppDialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title="Create Proxy Host"
|
||||
maxWidth="md"
|
||||
submitLabel="Create"
|
||||
onSubmit={() => {
|
||||
// Trigger generic form submit
|
||||
(document.getElementById("create-host-form") as HTMLFormElement)?.requestSubmit();
|
||||
}}
|
||||
>
|
||||
<Stack component="form" id="create-host-form" action={formAction} spacing={2.5}>
|
||||
{state.status !== "idle" && state.message && (
|
||||
<Alert severity={state.status === "error" ? "error" : "success"}>
|
||||
{state.message}
|
||||
</Alert>
|
||||
)}
|
||||
<SettingsToggles />
|
||||
<TextField name="name" label="Name" placeholder="My Service" required fullWidth />
|
||||
<TextField
|
||||
name="domains"
|
||||
label="Domains"
|
||||
placeholder="app.example.com"
|
||||
helperText="One per line or comma-separated"
|
||||
multiline
|
||||
minRows={2}
|
||||
required
|
||||
fullWidth
|
||||
/>
|
||||
<UpstreamInput />
|
||||
<TextField select name="certificate_id" label="Certificate" defaultValue="" fullWidth>
|
||||
<MenuItem value="">Managed by Caddy (Auto)</MenuItem>
|
||||
{certificates.map((cert) => (
|
||||
<MenuItem key={cert.id} value={cert.id}>
|
||||
{cert.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField select name="access_list_id" label="Access List" defaultValue="" fullWidth>
|
||||
<MenuItem value="">None</MenuItem>
|
||||
{accessLists.map((list) => (
|
||||
<MenuItem key={list.id} value={list.id}>
|
||||
{list.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField
|
||||
name="custom_pre_handlers_json"
|
||||
label="Custom Pre-Handlers (JSON)"
|
||||
placeholder='[{"handler": "headers", ...}]'
|
||||
helperText="Optional JSON array of Caddy handlers"
|
||||
multiline
|
||||
minRows={3}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
name="custom_reverse_proxy_json"
|
||||
label="Custom Reverse Proxy (JSON)"
|
||||
placeholder='{"headers": {"request": {...}}}'
|
||||
helperText="Deep-merge into reverse_proxy handler"
|
||||
multiline
|
||||
minRows={3}
|
||||
fullWidth
|
||||
/>
|
||||
<AuthentikFields defaults={authentikDefaults} />
|
||||
</Stack>
|
||||
</AppDialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function EditHostDialog({
|
||||
open,
|
||||
host,
|
||||
onClose,
|
||||
certificates,
|
||||
accessLists
|
||||
}: {
|
||||
open: boolean;
|
||||
host: ProxyHost;
|
||||
onClose: () => void;
|
||||
certificates: Certificate[];
|
||||
accessLists: AccessList[];
|
||||
}) {
|
||||
const [state, formAction] = useFormState(updateProxyHostAction.bind(null, host.id), INITIAL_ACTION_STATE);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.status === "success") {
|
||||
setTimeout(onClose, 1000);
|
||||
}
|
||||
}, [state.status, onClose]);
|
||||
|
||||
return (
|
||||
<AppDialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title="Edit Proxy Host"
|
||||
maxWidth="md"
|
||||
submitLabel="Save Changes"
|
||||
onSubmit={() => {
|
||||
(document.getElementById("edit-host-form") as HTMLFormElement)?.requestSubmit();
|
||||
}}
|
||||
>
|
||||
<Stack component="form" id="edit-host-form" action={formAction} spacing={2.5}>
|
||||
{state.status !== "idle" && state.message && (
|
||||
<Alert severity={state.status === "error" ? "error" : "success"}>
|
||||
{state.message}
|
||||
</Alert>
|
||||
)}
|
||||
<SettingsToggles
|
||||
hstsSubdomains={host.hsts_subdomains}
|
||||
skipHttpsValidation={host.skip_https_hostname_validation}
|
||||
enabled={host.enabled}
|
||||
/>
|
||||
<TextField name="name" label="Name" defaultValue={host.name} required fullWidth />
|
||||
<TextField
|
||||
name="domains"
|
||||
label="Domains"
|
||||
defaultValue={host.domains.join("\n")}
|
||||
helperText="One per line or comma-separated"
|
||||
multiline
|
||||
minRows={2}
|
||||
fullWidth
|
||||
/>
|
||||
<UpstreamInput defaultUpstreams={host.upstreams} />
|
||||
<TextField select name="certificate_id" label="Certificate" defaultValue={host.certificate_id ?? ""} fullWidth>
|
||||
<MenuItem value="">Managed by Caddy (Auto)</MenuItem>
|
||||
{certificates.map((cert) => (
|
||||
<MenuItem key={cert.id} value={cert.id}>
|
||||
{cert.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField select name="access_list_id" label="Access List" defaultValue={host.access_list_id ?? ""} fullWidth>
|
||||
<MenuItem value="">None</MenuItem>
|
||||
{accessLists.map((list) => (
|
||||
<MenuItem key={list.id} value={list.id}>
|
||||
{list.name}
|
||||
</MenuItem>
|
||||
))}
|
||||
</TextField>
|
||||
<TextField
|
||||
name="custom_pre_handlers_json"
|
||||
label="Custom Pre-Handlers (JSON)"
|
||||
defaultValue={host.custom_pre_handlers_json ?? ""}
|
||||
helperText="Optional JSON array of Caddy handlers"
|
||||
multiline
|
||||
minRows={3}
|
||||
fullWidth
|
||||
/>
|
||||
<TextField
|
||||
name="custom_reverse_proxy_json"
|
||||
label="Custom Reverse Proxy (JSON)"
|
||||
defaultValue={host.custom_reverse_proxy_json ?? ""}
|
||||
helperText="Deep-merge into reverse_proxy handler"
|
||||
multiline
|
||||
minRows={3}
|
||||
fullWidth
|
||||
/>
|
||||
<AuthentikFields authentik={host.authentik} />
|
||||
</Stack>
|
||||
</AppDialog>
|
||||
);
|
||||
}
|
||||
|
||||
export function DeleteHostDialog({
|
||||
open,
|
||||
host,
|
||||
onClose
|
||||
}: {
|
||||
open: boolean;
|
||||
host: ProxyHost;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const [state, formAction] = useFormState(deleteProxyHostAction.bind(null, host.id), INITIAL_ACTION_STATE);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.status === "success") {
|
||||
setTimeout(onClose, 1000);
|
||||
}
|
||||
}, [state.status, onClose]);
|
||||
|
||||
return (
|
||||
<AppDialog
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
title="Delete Proxy Host"
|
||||
maxWidth="sm"
|
||||
submitLabel="Delete"
|
||||
onSubmit={() => {
|
||||
(document.getElementById("delete-host-form") as HTMLFormElement)?.requestSubmit();
|
||||
}}
|
||||
>
|
||||
<Stack component="form" id="delete-host-form" action={formAction} spacing={2}>
|
||||
{state.status !== "idle" && state.message && (
|
||||
<Alert severity={state.status === "error" ? "error" : "success"}>
|
||||
{state.message}
|
||||
</Alert>
|
||||
)}
|
||||
<Typography variant="body1">
|
||||
Are you sure you want to delete the proxy host <strong>{host.name}</strong>?
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
This will remove the configuration for:
|
||||
</Typography>
|
||||
<Box sx={{ pl: 2 }}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
• Domains: {host.domains.join(", ")}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
• Upstreams: {host.upstreams.join(", ")}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="body2" color="error.main" fontWeight={500}>
|
||||
This action cannot be undone.
|
||||
</Typography>
|
||||
</Stack>
|
||||
</AppDialog>
|
||||
);
|
||||
}
|
||||
138
src/components/proxy-hosts/SettingsToggles.tsx
Normal file
138
src/components/proxy-hosts/SettingsToggles.tsx
Normal file
@@ -0,0 +1,138 @@
|
||||
|
||||
import { Box, Stack, Switch, Typography } from "@mui/material";
|
||||
import { useState } from "react";
|
||||
|
||||
type ToggleSetting = {
|
||||
name: string;
|
||||
label: string;
|
||||
description: string;
|
||||
defaultChecked: boolean;
|
||||
color?: "success" | "warning" | "default";
|
||||
};
|
||||
|
||||
type SettingsTogglesProps = {
|
||||
hstsSubdomains?: boolean;
|
||||
skipHttpsValidation?: boolean;
|
||||
enabled?: boolean;
|
||||
};
|
||||
|
||||
export function SettingsToggles({
|
||||
hstsSubdomains = false,
|
||||
skipHttpsValidation = false,
|
||||
enabled = true
|
||||
}: SettingsTogglesProps) {
|
||||
const [values, setValues] = useState({
|
||||
hsts_subdomains: hstsSubdomains,
|
||||
skip_https_hostname_validation: skipHttpsValidation,
|
||||
enabled: enabled
|
||||
});
|
||||
|
||||
const handleChange = (name: keyof typeof values) => (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setValues(prev => ({ ...prev, [name]: event.target.checked }));
|
||||
};
|
||||
|
||||
const handleEnabledChange = (_: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
|
||||
setValues(prev => ({ ...prev, enabled: checked }));
|
||||
};
|
||||
|
||||
const settings: ToggleSetting[] = [
|
||||
{
|
||||
name: "hsts_subdomains",
|
||||
label: "HSTS Subdomains",
|
||||
description: "Include subdomains in the Strict-Transport-Security header",
|
||||
defaultChecked: values.hsts_subdomains,
|
||||
color: "default"
|
||||
},
|
||||
{
|
||||
name: "skip_https_hostname_validation",
|
||||
label: "Skip HTTPS Validation",
|
||||
description: "Skip SSL certificate hostname verification for backend connections",
|
||||
defaultChecked: values.skip_https_hostname_validation,
|
||||
color: "warning"
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Stack spacing={3}>
|
||||
<input type="hidden" name="enabled_present" value="1" />
|
||||
<input type="hidden" name="enabled" value={values.enabled ? "on" : ""} />
|
||||
|
||||
{/* Main Enable Switch */}
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 2,
|
||||
border: "1px solid",
|
||||
borderColor: values.enabled ? "primary.main" : "divider",
|
||||
bgcolor: values.enabled ? "rgba(99, 102, 241, 0.04)" : "background.paper",
|
||||
transition: "all 0.2s ease"
|
||||
}}
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" fontWeight={600} color={values.enabled ? "primary.main" : "text.primary"}>
|
||||
{values.enabled ? "Proxy Host Enabled" : "Proxy Host Paused"}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{values.enabled
|
||||
? "This host is active and routing traffic"
|
||||
: "This host is disabled and will not respond to requests"}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Switch
|
||||
checked={values.enabled}
|
||||
onChange={handleEnabledChange}
|
||||
color="primary"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
{/* Advanced Options */}
|
||||
<Box
|
||||
sx={{
|
||||
borderRadius: 2,
|
||||
border: "1px solid",
|
||||
borderColor: "divider",
|
||||
bgcolor: "background.paper",
|
||||
overflow: "hidden"
|
||||
}}
|
||||
>
|
||||
<Box sx={{ px: 2, py: 1.5, borderBottom: "1px solid", borderColor: "divider", bgcolor: "rgba(255,255,255,0.02)" }}>
|
||||
<Typography variant="subtitle2" fontWeight={600}>
|
||||
Advanced Options
|
||||
</Typography>
|
||||
</Box>
|
||||
<Stack divider={<Box sx={{ borderBottom: "1px solid", borderColor: "divider" }} />}>
|
||||
{settings.map((setting) => (
|
||||
<Box key={setting.name}>
|
||||
<input type="hidden" name={`${setting.name}_present`} value="1" />
|
||||
<Stack
|
||||
direction="row"
|
||||
alignItems="center"
|
||||
justifyContent="space-between"
|
||||
sx={{ px: 2, py: 1.5 }}
|
||||
>
|
||||
<Box sx={{ pr: 2 }}>
|
||||
<Typography variant="body2" fontWeight={500}>
|
||||
{setting.label}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{setting.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Switch
|
||||
name={setting.name}
|
||||
checked={values[setting.name as keyof typeof values] as boolean}
|
||||
onChange={handleChange(setting.name as keyof typeof values)}
|
||||
size="small"
|
||||
color={setting.color as any}
|
||||
/>
|
||||
</Stack>
|
||||
</Box>
|
||||
))}
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
129
src/components/proxy-hosts/UpstreamInput.tsx
Normal file
129
src/components/proxy-hosts/UpstreamInput.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user