akanealw/caddy-proxy-manager
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

Updated the UI

Browse Source
This commit is contained in:
fuomag9
2025-10-31 23:25:04 +01:00
parent d9ced96e1b
commit b064003c34
14 changed files with 455 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx
View File

@@ -1,23 +1,8 @@
"use client";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import {
Accordion,
AccordionDetails,
AccordionSummary,
Box,
Button,
Card,
CardContent,
Chip,
FormControlLabel,
Grid,
MenuItem,
Stack,
TextField,
Typography,
Checkbox
} from "@mui/material";
import Grid from "@mui/material/Grid";
import { Accordion, AccordionDetails, AccordionSummary, Box, Button, Card, CardContent, Chip, FormControlLabel, MenuItem, Stack, TextField, Typography, Checkbox } from "@mui/material";
import type { AccessList } from "@/src/lib/models/access-lists";
import type { Certificate } from "@/src/lib/models/certificates";
import type { ProxyHost } from "@/src/lib/models/proxy-hosts";
@@ -31,43 +16,89 @@ type Props = {
export default function ProxyHostsClient({ hosts, certificates, accessLists }: Props) {
return (
<Stack spacing={4} sx={{ width: "100%" }}>
<Stack spacing={1}>
<Typography variant="h4" fontWeight={600}>
<Stack spacing={5} sx={{ width: "100%" }}>
<Stack spacing={1.5}>
<Typography variant="overline" sx={{ color: "rgba(148, 163, 184, 0.6)", letterSpacing: 4 }}>
HTTP Edge
</Typography>
<Typography
variant="h4"
sx={{
fontWeight: 700,
background: "linear-gradient(120deg, rgba(127, 91, 255, 1) 0%, rgba(34, 211, 238, 0.9) 80%)",
WebkitBackgroundClip: "text",
color: "transparent"
}}
>
Proxy Hosts
</Typography>
<Typography color="text.secondary">
Define HTTP(S) reverse proxies managed by Caddy with built-in TLS orchestration.
<Typography color="text.secondary" sx={{ maxWidth: 560 }}>
Define HTTP(S) reverse proxies orchestrated by Caddy with automated certificates, shields, and zero-downtime
reloads.
</Typography>
</Stack>
<Grid container spacing={3} alignItems="stretch">
{hosts.map((host) => (
<Grid item xs={12} md={6} key={host.id}>
<Card sx={{ height: "100%" }}>
<CardContent sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
<Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 2 }}>
<Box>
<Typography variant="h6" fontWeight={600}>
<Grid key={host.id} size={{ xs: 12, md: 6 }}>
<Card
sx={{
height: "100%",
border: "1px solid rgba(148, 163, 184, 0.12)",
background: "linear-gradient(160deg, rgba(17, 25, 40, 0.95), rgba(12, 18, 30, 0.78))"
}}
>
<CardContent sx={{ display: "flex", flexDirection: "column", gap: 2.5 }}>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: 2
}}
>
<Box sx={{ display: "flex", flexDirection: "column", gap: 0.5 }}>
<Typography variant="subtitle1" fontWeight={600} sx={{ letterSpacing: -0.2 }}>
{host.name}
</Typography>
<Typography variant="body2" color="text.secondary">
<Typography variant="body2" color="text.secondary" sx={{ display: "flex", flexWrap: "wrap", gap: 1 }}>
{host.domains.join(", ")}
</Typography>
</Box>
<Chip
label={host.enabled ? "Enabled" : "Disabled"}
color={host.enabled ? "success" : "warning"}
variant={host.enabled ? "filled" : "outlined"}
color={host.enabled ? "success" : "default"}
sx={{
fontWeight: 600,
borderRadius: 999,
background: host.enabled
? "linear-gradient(135deg, rgba(34, 197, 94, 0.22), rgba(52, 211, 153, 0.32))"
: "rgba(148, 163, 184, 0.1)",
border: "1px solid rgba(148, 163, 184, 0.2)",
color: host.enabled ? "#4ade80" : "rgba(148,163,184,0.8)"
}}
/>
</Box>
<Accordion elevation={0} disableGutters>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 0 }}>
<Accordion
elevation={0}
disableGutters
sx={{
bgcolor: "transparent",
borderRadius: 3,
border: "1px solid rgba(148,163,184,0.12)",
overflow: "hidden",
"&::before": { display: "none" }
}}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon sx={{ color: "rgba(226, 232, 240, 0.6)" }} />}
sx={{ px: 2, bgcolor: "rgba(15, 23, 42, 0.45)" }}
>
<Typography fontWeight={600}>Edit configuration</Typography>
</AccordionSummary>
<AccordionDetails sx={{ px: 0 }}>
<Stack component="form" action={(formData) => updateProxyHostAction(host.id, formData)} spacing={2}>
<AccordionDetails sx={{ px: 2, py: 3 }}>
<Stack component="form" action={(formData) => updateProxyHostAction(host.id, formData)} spacing={2.5}>
<TextField name="name" label="Name" defaultValue={host.name} required fullWidth />
<TextField
name="domains"
@@ -104,23 +135,23 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists }: P
))}
</TextField>
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 1 }}>
<HiddenCheckboxField name="ssl_forced" defaultChecked={host.ssl_forced} label="Force HTTPS" />
<HiddenCheckboxField name="hsts_enabled" defaultChecked={host.hsts_enabled} label="HSTS" />
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
gap: 1.5,
mt: 1
}}
>
<HiddenCheckboxField
name="hsts_subdomains"
defaultChecked={host.hsts_subdomains}
label="Include subdomains in HSTS"
/>
<HiddenCheckboxField
name="allow_websocket"
defaultChecked={host.allow_websocket}
label="Allow WebSocket"
/>
<HiddenCheckboxField
name="preserve_host_header"
defaultChecked={host.preserve_host_header}
label="Preserve host header"
name="skip_https_hostname_validation"
defaultChecked={host.skip_https_hostname_validation}
label="Skip HTTPS hostname validation"
/>
<HiddenCheckboxField name="enabled" defaultChecked={host.enabled} label="Enabled" />
</Box>
@@ -146,12 +177,22 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists }: P
</Grid>
<Stack spacing={2} component="section">
<Typography variant="h6" fontWeight={600}>
Create proxy host
</Typography>
<Card>
<CardContent>
<Stack component="form" action={createProxyHostAction} spacing={2}>
<Box>
<Typography variant="h6" fontWeight={600}>
Create proxy host
</Typography>
<Typography variant="body2" color="text.secondary">
Deploy a new reverse proxy route powered by Caddy.
</Typography>
</Box>
<Card
sx={{
border: "1px solid rgba(148, 163, 184, 0.12)",
background: "linear-gradient(160deg, rgba(19, 28, 45, 0.95), rgba(12, 18, 30, 0.78))"
}}
>
<CardContent sx={{ p: { xs: 3, md: 4 } }}>
<Stack component="form" action={createProxyHostAction} spacing={2.5}>
<TextField name="name" label="Name" placeholder="Internal service" required fullWidth />
<TextField
name="domains"
@@ -187,12 +228,60 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists }: P
</MenuItem>
))}
</TextField>
<Box sx={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 1 }}>
<FormControlLabel control={<Checkbox name="ssl_forced" defaultChecked />} label="Force HTTPS" />
<FormControlLabel control={<Checkbox name="hsts_enabled" defaultChecked />} label="HSTS" />
<FormControlLabel control={<Checkbox name="allow_websocket" defaultChecked />} label="Allow WebSocket" />
<FormControlLabel control={<Checkbox name="preserve_host_header" defaultChecked />} label="Preserve host header" />
<FormControlLabel control={<Checkbox name="enabled" defaultChecked />} label="Enabled" />
<Box
sx={{
display: "grid",
gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
gap: 1.5,
mt: 1
}}
>
<Box sx={{ p: 1, borderRadius: 2, border: "1px solid rgba(148, 163, 184, 0.12)", bgcolor: "rgba(9, 13, 23, 0.6)" }}>
<FormControlLabel
control={
<Checkbox
name="hsts_subdomains"
sx={{
color: "rgba(148, 163, 184, 0.6)",
"&.Mui-checked": { color: "#7f5bff" }
}}
/>
}
label="Include subdomains in HSTS"
sx={{ width: "100%", m: 0 }}
/>
</Box>
<Box sx={{ p: 1, borderRadius: 2, border: "1px solid rgba(148, 163, 184, 0.12)", bgcolor: "rgba(9, 13, 23, 0.6)" }}>
<FormControlLabel
control={
<Checkbox
name="skip_https_hostname_validation"
sx={{
color: "rgba(148, 163, 184, 0.6)",
"&.Mui-checked": { color: "#7f5bff" }
}}
/>
}
label="Skip HTTPS hostname validation"
sx={{ width: "100%", m: 0 }}
/>
</Box>
<Box sx={{ p: 1, borderRadius: 2, border: "1px solid rgba(148, 163, 184, 0.12)", bgcolor: "rgba(9, 13, 23, 0.6)" }}>
<FormControlLabel
control={
<Checkbox
name="enabled"
defaultChecked
sx={{
color: "rgba(148, 163, 184, 0.6)",
"&.Mui-checked": { color: "#7f5bff" }
}}
/>
}
label="Enabled"
sx={{ width: "100%", m: 0 }}
/>
</Box>
</Box>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
<Button type="submit" variant="contained">
@@ -209,9 +298,24 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists }: P
function HiddenCheckboxField({ name, defaultChecked, label }: { name: string; defaultChecked: boolean; label: string }) {
return (
<Box>
<Box sx={{ p: 1, borderRadius: 2, border: "1px solid rgba(148, 163, 184, 0.12)", bgcolor: "rgba(9, 13, 23, 0.6)" }}>
<input type="hidden" name={`${name}_present`} value="1" />
<FormControlLabel control={<Checkbox name={name} defaultChecked={defaultChecked} />} label={label} />
<FormControlLabel
control={
<Checkbox
name={name}
defaultChecked={defaultChecked}
sx={{
color: "rgba(148, 163, 184, 0.6)",
"&.Mui-checked": {
color: "#7f5bff"
}
}}
/>
}
label={label}
sx={{ width: "100%", m: 0 }}
/>
</Box>
);
}