add duplicate button and fix http protocol parsing in case user inputs protocol

app/(dashboard)/proxy-hosts/ProxyHostsClient.tsx

@@ -4,6 +4,7 @@ import { useMemo, useState } from "react";
 import { IconButton, Stack, Switch, Tooltip, Typography } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
 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";
@@ -24,6 +25,7 @@ type Props = {
 
 export default function ProxyHostsClient({ hosts, certificates, accessLists, authentikDefaults }: Props) {
   const [createOpen, setCreateOpen] = useState(false);
+  const [duplicateHost, setDuplicateHost] = useState<ProxyHost | null>(null);
   const [editHost, setEditHost] = useState<ProxyHost | null>(null);
   const [deleteHost, setDeleteHost] = useState<ProxyHost | null>(null);
   const [searchTerm, setSearchTerm] = useState("");
@@ -108,6 +110,18 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, aut
             size="small"
             color="success"
           />
+          <Tooltip title="Duplicate">
+            <IconButton
+              size="small"
+              onClick={() => {
+                setDuplicateHost(host);
+                setCreateOpen(true);
+              }}
+              color="info"
+            >
+              <ContentCopyIcon fontSize="small" />
+            </IconButton>
+          </Tooltip>
           <Tooltip title="Edit">
             <IconButton size="small" onClick={() => setEditHost(host)} color="primary">
               <EditIcon fontSize="small" />
@@ -149,7 +163,12 @@ export default function ProxyHostsClient({ hosts, certificates, accessLists, aut
 
       <CreateHostDialog
         open={createOpen}
-        onClose={() => setCreateOpen(false)}
+        onClose={() => {
+          setCreateOpen(false);
+          // Clear duplicate host after dialog transition
+          setTimeout(() => setDuplicateHost(null), 200);
+        }}
+        initialData={duplicateHost}
         certificates={certificates}
         accessLists={accessLists}
         authentikDefaults={authentikDefaults}

src/components/proxy-hosts/HostDialogs.tsx

@@ -22,13 +22,15 @@ export function CreateHostDialog({
     onClose,
     certificates,
     accessLists,
-    authentikDefaults
+    authentikDefaults,
+    initialData
 }: {
     open: boolean;
     onClose: () => void;
     certificates: Certificate[];
     accessLists: AccessList[];
     authentikDefaults: AuthentikSettings | null;
+    initialData?: ProxyHost | null;
 }) {
     const [state, formAction] = useFormState(createProxyHostAction, INITIAL_ACTION_STATE);
 
@@ -42,7 +44,7 @@ export function CreateHostDialog({
         <AppDialog
             open={open}
             onClose={onClose}
-            title="Create Proxy Host"
+            title={initialData ? "Duplicate Proxy Host" : "Create Proxy Host"}
             maxWidth="md"
             submitLabel="Create"
             onSubmit={() => {
@@ -56,20 +58,32 @@ export function CreateHostDialog({
                         {state.message}
                     </Alert>
                 )}
-                <SettingsToggles />
-                <TextField name="name" label="Name" placeholder="My Service" required fullWidth />
+                <SettingsToggles
+                    hstsSubdomains={initialData?.hsts_subdomains}
+                    skipHttpsValidation={initialData?.skip_https_hostname_validation}
+                    enabled={true}
+                />
+                <TextField
+                    name="name"
+                    label="Name"
+                    placeholder="My Service"
+                    defaultValue={initialData ? `${initialData.name} (Copy)` : ""}
+                    required
+                    fullWidth
+                />
                 <TextField
                     name="domains"
                     label="Domains"
                     placeholder="app.example.com"
+                    defaultValue={initialData?.domains.join("\n") ?? ""}
                     helperText="One per line or comma-separated"
                     multiline
                     minRows={2}
                     required
                     fullWidth
                 />
-                <UpstreamInput />
-                <TextField select name="certificate_id" label="Certificate" defaultValue="" fullWidth>
+                <UpstreamInput defaultUpstreams={initialData?.upstreams} />
+                <TextField select name="certificate_id" label="Certificate" defaultValue={initialData?.certificate_id ?? ""} fullWidth>
                     <MenuItem value="">Managed by Caddy (Auto)</MenuItem>
                     {certificates.map((cert) => (
                         <MenuItem key={cert.id} value={cert.id}>
@@ -77,7 +91,7 @@ export function CreateHostDialog({
                         </MenuItem>
                     ))}
                 </TextField>
-                <TextField select name="access_list_id" label="Access List" defaultValue="" fullWidth>
+                <TextField select name="access_list_id" label="Access List" defaultValue={initialData?.access_list_id ?? ""} fullWidth>
                     <MenuItem value="">None</MenuItem>
                     {accessLists.map((list) => (
                         <MenuItem key={list.id} value={list.id}>
@@ -89,6 +103,7 @@ export function CreateHostDialog({
                     name="custom_pre_handlers_json"
                     label="Custom Pre-Handlers (JSON)"
                     placeholder='[{"handler": "headers", ...}]'
+                    defaultValue={initialData?.custom_pre_handlers_json ?? ""}
                     helperText="Optional JSON array of Caddy handlers"
                     multiline
                     minRows={3}
@@ -98,12 +113,13 @@ export function CreateHostDialog({
                     name="custom_reverse_proxy_json"
                     label="Custom Reverse Proxy (JSON)"
                     placeholder='{"headers": {"request": {...}}}'
+                    defaultValue={initialData?.custom_reverse_proxy_json ?? ""}
                     helperText="Deep-merge into reverse_proxy handler"
                     multiline
                     minRows={3}
                     fullWidth
                 />
-                <AuthentikFields defaults={authentikDefaults} />
+                <AuthentikFields defaults={authentikDefaults} authentik={initialData?.authentik} />
             </Stack>
         </AppDialog>
     );

src/components/proxy-hosts/UpstreamInput.tsx

@@ -42,7 +42,16 @@ export function UpstreamInput({
 
     const handleAddressChange = (index: number, newAddress: string) => {
         const updated = [...entries];
-        updated[index].address = newAddress;
+        // Strip protocol if user pasted a full URL
+        if (newAddress.startsWith("https://")) {
+            updated[index].protocol = "https://";
+            updated[index].address = newAddress.slice(8);
+        } else if (newAddress.startsWith("http://")) {
+            updated[index].protocol = "http://";
+            updated[index].address = newAddress.slice(7);
+        } else {
+            updated[index].address = newAddress;
+        }
         setEntries(updated);
     };