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

Swapped the entire UI to Material UI, applied a global dark theme, and removed all of the old styled-jsx/CSS-module styling

Browse Source
This commit is contained in:
fuomag9
2025-10-31 21:03:02 +01:00
parent 315192fb54
commit 29acf06f75
41 changed files with 3122 additions and 2445 deletions
Download Patch File Download Diff File Expand all files Collapse all files

217
app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx Normal file
View File

@@ -0,0 +1,217 @@
"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 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";
import { createProxyHostAction, deleteProxyHostAction, updateProxyHostAction } from "./actions";
type Props = {
hosts: ProxyHost[];
certificates: Certificate[];
accessLists: AccessList[];
};
export default function ProxyHostsClient({ hosts, certificates, accessLists }: Props) {
return (
<Stack spacing={4} sx={{ width: "100%" }}>
<Stack spacing={1}>
<Typography variant="h4" fontWeight={600}>
Proxy Hosts
</Typography>
<Typography color="text.secondary">
Define HTTP(S) reverse proxies managed by Caddy with built-in TLS orchestration.
</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}>
{host.name}
</Typography>
<Typography variant="body2" color="text.secondary">
{host.domains.join(", ")}
</Typography>
</Box>
<Chip
label={host.enabled ? "Enabled" : "Disabled"}
color={host.enabled ? "success" : "warning"}
variant={host.enabled ? "filled" : "outlined"}
/>
</Box>
<Accordion elevation={0} disableGutters>
<AccordionSummary expandIcon={<ExpandMoreIcon />} sx={{ px: 0 }}>
<Typography fontWeight={600}>Edit configuration</Typography>
</AccordionSummary>
<AccordionDetails sx={{ px: 0 }}>
<Stack component="form" action={(formData) => updateProxyHostAction(host.id, formData)} spacing={2}>
<TextField name="name" label="Name" defaultValue={host.name} required fullWidth />
<TextField
name="domains"
label="Domains"
helperText="Comma or newline separated"
defaultValue={host.domains.join("\n")}
multiline
minRows={3}
fullWidth
/>
<TextField
name="upstreams"
label="Upstreams"
helperText="Comma or newline separated"
defaultValue={host.upstreams.join("\n")}
multiline
minRows={3}
fullWidth
/>
<TextField select name="certificate_id" label="Certificate" defaultValue={host.certificate_id ?? ""} fullWidth>
<MenuItem value="">Managed by Caddy</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>
<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" />
<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"
/>
<HiddenCheckboxField name="enabled" defaultChecked={host.enabled} label="Enabled" />
</Box>
<Box sx={{ display: "flex", justifyContent: "flex-end", gap: 1.5 }}>
<Button type="submit" variant="contained">
Save Changes
</Button>
</Box>
</Stack>
</AccordionDetails>
</Accordion>
<Box component="form" action={deleteProxyHostAction.bind(null, host.id)}>
<Button type="submit" variant="outlined" color="error">
Delete
</Button>
</Box>
</CardContent>
</Card>
</Grid>
))}
</Grid>
<Stack spacing={2} component="section">
<Typography variant="h6" fontWeight={600}>
Create proxy host
</Typography>
<Card>
<CardContent>
<Stack component="form" action={createProxyHostAction} spacing={2}>
<TextField name="name" label="Name" placeholder="Internal service" required fullWidth />
<TextField
name="domains"
label="Domains"
placeholder="app.example.com"
multiline
minRows={2}
required
fullWidth
/>
<TextField
name="upstreams"
label="Upstreams"
placeholder="http://10.0.0.5:8080"
multiline
minRows={2}
required
fullWidth
/>
<TextField select name="certificate_id" label="Certificate" defaultValue="" fullWidth>
<MenuItem value="">Managed by Caddy</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>
<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>
<Box sx={{ display: "flex", justifyContent: "flex-end" }}>
<Button type="submit" variant="contained">
Create Host
</Button>
</Box>
</Stack>
</CardContent>
</Card>
</Stack>
</Stack>
);
}
function HiddenCheckboxField({ name, defaultChecked, label }: { name: string; defaultChecked: boolean; label: string }) {
return (
<Box>
<input type="hidden" name={`${name}_present`} value="1" />
<FormControlLabel control={<Checkbox name={name} defaultChecked={defaultChecked} />} label={label} />
</Box>
);
}

6
app/(dashboard)/proxy-hosts/actions.ts
View File

@@ -20,7 +20,7 @@ function parseCheckbox(value: FormDataEntryValue | null): boolean {
}
export async function createProxyHostAction(formData: FormData) {
const { user } = requireUser();
const { user } = await requireUser();
await createProxyHost(
{
name: String(formData.get("name") ?? "Untitled"),
@@ -41,7 +41,7 @@ export async function createProxyHostAction(formData: FormData) {
}
export async function updateProxyHostAction(id: number, formData: FormData) {
const { user } = requireUser();
const { user } = await requireUser();
const boolField = (key: string) => (formData.has(`${key}_present`) ? parseCheckbox(formData.get(key)) : undefined);
await updateProxyHost(
id,
@@ -64,7 +64,7 @@ export async function updateProxyHostAction(id: number, formData: FormData) {
}
export async function deleteProxyHostAction(id: number) {
const { user } = requireUser();
const { user } = await requireUser();
await deleteProxyHost(id, user.id);
revalidatePath("/proxy-hosts");
}

282
app/(dashboard)/proxy-hosts/page.tsx
View File

@@ -1,4 +1,4 @@
import { createProxyHostAction, deleteProxyHostAction, updateProxyHostAction } from "./actions";
import ProxyHostsClient from "./ProxyHostsClient";
import { listProxyHosts } from "@/src/lib/models/proxy-hosts";
import { listCertificates } from "@/src/lib/models/certificates";
import { listAccessLists } from "@/src/lib/models/access-lists";
@@ -8,283 +8,5 @@ export default function ProxyHostsPage() {
const certificates = listCertificates();
const accessLists = listAccessLists();
return (
<div className="page">
<header>
<h1>Proxy Hosts</h1>
<p>Define HTTP(S) reverse proxies managed by Caddy with built-in TLS orchestration.</p>
</header>
<section className="grid">
{hosts.map((host) => (
<div className="host-card" key={host.id}>
<div className="host-header">
<div>
<h2>{host.name}</h2>
<p>{host.domains.join(", ")}</p>
</div>
<span className={host.enabled ? "status online" : "status offline"}>{host.enabled ? "Enabled" : "Disabled"}</span>
</div>
<details>
<summary>Edit configuration</summary>
<form action={(formData) => updateProxyHostAction(host.id, formData)} className="form">
<label>
Name
<input name="name" defaultValue={host.name} required />
</label>
<label>
Domains (comma or newline separated)
<textarea name="domains" defaultValue={host.domains.join("\n")} required rows={3} />
</label>
<label>
Upstreams (e.g. 127.0.0.1:3000)
<textarea name="upstreams" defaultValue={host.upstreams.join("\n")} required rows={3} />
</label>
<label>
Certificate
<select name="certificate_id" defaultValue={host.certificate_id ?? ""}>
<option value="">Managed by Caddy</option>
{certificates.map((cert) => (
<option value={cert.id} key={cert.id}>
{cert.name}
</option>
))}
</select>
</label>
<label>
Access List
<select name="access_list_id" defaultValue={host.access_list_id ?? ""}>
<option value="">None</option>
{accessLists.map((list) => (
<option value={list.id} key={list.id}>
{list.name}
</option>
))}
</select>
</label>
<div className="toggles">
<label>
<input type="hidden" name="ssl_forced_present" value="1" />
<input type="checkbox" name="ssl_forced" defaultChecked={host.ssl_forced} /> Force HTTPS
</label>
<label>
<input type="hidden" name="hsts_enabled_present" value="1" />
<input type="checkbox" name="hsts_enabled" defaultChecked={host.hsts_enabled} /> HSTS
</label>
<label>
<input type="hidden" name="hsts_subdomains_present" value="1" />
<input type="checkbox" name="hsts_subdomains" defaultChecked={host.hsts_subdomains} /> Include subdomains in HSTS
</label>
<label>
<input type="hidden" name="allow_websocket_present" value="1" />
<input type="checkbox" name="allow_websocket" defaultChecked={host.allow_websocket} /> Allow WebSocket
</label>
<label>
<input type="hidden" name="preserve_host_header_present" value="1" />
<input type="checkbox" name="preserve_host_header" defaultChecked={host.preserve_host_header} /> Preserve host header
</label>
<label>
<input type="hidden" name="enabled_present" value="1" />
<input type="checkbox" name="enabled" defaultChecked={host.enabled} /> Enabled
</label>
</div>
<div className="actions">
<button type="submit" className="primary">
Save Changes
</button>
</div>
</form>
</details>
<form action={() => deleteProxyHostAction(host.id)}>
<button type="submit" className="danger">
Delete
</button>
</form>
</div>
))}
</section>
<section>
<h2>Create proxy host</h2>
<form action={createProxyHostAction} className="form create">
<label>
Name
<input name="name" placeholder="Internal service" required />
</label>
<label>
Domains
<textarea name="domains" placeholder="app.example.com" rows={2} required />
</label>
<label>
Upstreams
<textarea name="upstreams" placeholder="http://10.0.0.5:8080" rows={2} required />
</label>
<label>
Certificate
<select name="certificate_id" defaultValue="">
<option value="">Managed by Caddy</option>
{certificates.map((cert) => (
<option value={cert.id} key={cert.id}>
{cert.name}
</option>
))}
</select>
</label>
<label>
Access List
<select name="access_list_id" defaultValue="">
<option value="">None</option>
{accessLists.map((list) => (
<option value={list.id} key={list.id}>
{list.name}
</option>
))}
</select>
</label>
<div className="toggles">
<label>
<input type="checkbox" name="ssl_forced" defaultChecked /> Force HTTPS
</label>
<label>
<input type="checkbox" name="hsts_enabled" defaultChecked /> HSTS
</label>
<label>
<input type="checkbox" name="allow_websocket" defaultChecked /> Allow WebSocket
</label>
<label>
<input type="checkbox" name="preserve_host_header" defaultChecked /> Preserve host header
</label>
<label>
<input type="checkbox" name="enabled" defaultChecked /> Enabled
</label>
</div>
<div className="actions">
<button type="submit" className="primary">
Create Host
</button>
</div>
</form>
</section>
<style jsx>{`
.page {
display: flex;
flex-direction: column;
gap: 2.5rem;
}
header h1 {
margin: 0;
}
header p {
color: rgba(255, 255, 255, 0.6);
}
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.75rem;
}
.host-card {
background: rgba(16, 24, 38, 0.95);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.host-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.host-header h2 {
margin: 0 0 0.4rem;
}
.host-header p {
margin: 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.6);
}
details summary {
cursor: pointer;
font-weight: 600;
}
.form {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-top: 1rem;
}
label {
display: flex;
flex-direction: column;
gap: 0.35rem;
font-size: 0.9rem;
}
input,
textarea,
select {
padding: 0.65rem 0.75rem;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(8, 12, 20, 0.9);
color: #fff;
}
.toggles {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 0.6rem;
}
.toggles label {
flex-direction: row;
align-items: center;
gap: 0.5rem;
}
.actions {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
.primary {
padding: 0.65rem 1.5rem;
border-radius: 999px;
border: none;
cursor: pointer;
background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
color: #fff;
font-weight: 600;
}
.danger {
background: transparent;
border: 1px solid rgba(255, 91, 91, 0.6);
color: #ff5b5b;
padding: 0.5rem 1rem;
border-radius: 999px;
cursor: pointer;
}
.status {
padding: 0.35rem 0.85rem;
border-radius: 999px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.status.online {
background: rgba(0, 200, 83, 0.15);
color: #51ff9d;
}
.status.offline {
background: rgba(255, 91, 91, 0.15);
color: #ff6b6b;
}
.create {
background: rgba(16, 24, 38, 0.95);
border-radius: 16px;
padding: 1.75rem;
border: 1px solid rgba(255, 255, 255, 0.05);
}
`}</style>
</div>
);
return <ProxyHostsClient hosts={hosts} certificates={certificates} accessLists={accessLists} />;
}