feat: improve UI contrast, dark mode, dialog sizing, color coherence, and add table sorting
- Fix dialog scrollability (flex layout + max-h-[90dvh]) and increase L4 dialog to lg width - Add styled enable card to L4 dialog matching proxy host pattern - Unify section colors across proxy host and L4 dialogs (cyan=LB, emerald=DNS, violet=upstream DNS, rose=geo, amber=mTLS) - Improve light mode contrast: muted-foreground oklch 0.552→0.502, remove opacity modifiers on secondary text - Improve dark mode: boost muted-foreground to 0.85, increase border opacity 10%→16%, input 15%→20% - Add bg-card to DataTable wrapper and bg-muted/40 to table headers for surface hierarchy - Add semantic badge variants (success, warning, info, muted) and StatusChip dark mode fix - Add server-side sortable columns to Proxy Hosts and L4 Proxy Hosts (name, upstream, status, protocol, listen) - Add sortKey to DataTable Column type with clickable sort headers (ArrowUp/Down indicators, URL param driven) - Fix E2E test selectors for shadcn UI (label associations, combobox roles, dropdown menus, mobile drawer) - Add htmlFor/id to proxy host form fields and aria-labels to select triggers for accessibility - Add sorting E2E tests for both proxy host pages Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
fuomag9
@@ -1,6 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Shield, Trash2, UserPlus, Plus } from "lucide-react";
|
||||
import { PageHeader } from "@/components/ui/PageHeader";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
@@ -22,6 +22,44 @@ type Props = {
|
||||
pagination: { total: number; page: number; perPage: number };
|
||||
};
|
||||
|
||||
// Cycling accent colors per card
|
||||
const ACCENT_COLORS = [
|
||||
{
|
||||
border: "border-l-violet-500",
|
||||
icon: "border-violet-500/30 bg-violet-500/10 text-violet-500",
|
||||
countBadge: "border-violet-500/30 bg-violet-500/10 text-violet-600 dark:text-violet-400",
|
||||
avatar: "bg-violet-500/15 text-violet-600 dark:text-violet-400",
|
||||
},
|
||||
{
|
||||
border: "border-l-cyan-500",
|
||||
icon: "border-cyan-500/30 bg-cyan-500/10 text-cyan-500",
|
||||
countBadge: "border-cyan-500/30 bg-cyan-500/10 text-cyan-600 dark:text-cyan-400",
|
||||
avatar: "bg-cyan-500/15 text-cyan-600 dark:text-cyan-400",
|
||||
},
|
||||
{
|
||||
border: "border-l-emerald-500",
|
||||
icon: "border-emerald-500/30 bg-emerald-500/10 text-emerald-500",
|
||||
countBadge: "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
|
||||
avatar: "bg-emerald-500/15 text-emerald-600 dark:text-emerald-400",
|
||||
},
|
||||
{
|
||||
border: "border-l-amber-500",
|
||||
icon: "border-amber-500/30 bg-amber-500/10 text-amber-500",
|
||||
countBadge: "border-amber-500/30 bg-amber-500/10 text-amber-600 dark:text-amber-400",
|
||||
avatar: "bg-amber-500/15 text-amber-600 dark:text-amber-400",
|
||||
},
|
||||
{
|
||||
border: "border-l-rose-500",
|
||||
icon: "border-rose-500/30 bg-rose-500/10 text-rose-500",
|
||||
countBadge: "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400",
|
||||
avatar: "bg-rose-500/15 text-rose-600 dark:text-rose-400",
|
||||
},
|
||||
];
|
||||
|
||||
function getInitials(username: string): string {
|
||||
return username.slice(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
export default function AccessListsClient({ lists, pagination }: Props) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
@@ -42,89 +80,124 @@ export default function AccessListsClient({ lists, pagination }: Props) {
|
||||
/>
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
{lists.map((list) => (
|
||||
<Card key={list.id}>
|
||||
<CardContent className="flex flex-col gap-4 pt-6">
|
||||
<form action={(formData) => updateAccessListAction(list.id, formData)} className="flex flex-col gap-3">
|
||||
<h2 className="text-lg font-semibold">Access List</h2>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor={`name-${list.id}`}>Name</Label>
|
||||
<Input id={`name-${list.id}`} name="name" defaultValue={list.name} />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor={`desc-${list.id}`}>Description</Label>
|
||||
<textarea
|
||||
id={`desc-${list.id}`}
|
||||
name="description"
|
||||
defaultValue={list.description ?? ""}
|
||||
rows={2}
|
||||
className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="submit" variant="default">
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
formAction={deleteAccessListAction.bind(null, list.id)}
|
||||
variant="outline"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
Delete list
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="font-semibold">Accounts</p>
|
||||
{list.entries.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No credentials configured.</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{list.entries.map((entry) => (
|
||||
<div
|
||||
key={entry.id}
|
||||
className="flex items-center justify-between rounded-md bg-muted/40 px-3 py-2"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{entry.username}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Created {new Date(entry.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
<form action={deleteAccessEntryAction.bind(null, list.id, entry.id)}>
|
||||
<Button type="submit" variant="ghost" size="icon" className="h-8 w-8 text-destructive">
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
{lists.map((list, idx) => {
|
||||
const accent = ACCENT_COLORS[idx % ACCENT_COLORS.length];
|
||||
return (
|
||||
<Card key={list.id} className={`border-l-2 ${accent.border}`}>
|
||||
<CardContent className="flex flex-col gap-5 pt-5 pb-5 px-5">
|
||||
{/* Header row */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className={`flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border ${accent.icon}`}>
|
||||
<Shield className="h-4 w-4" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<form
|
||||
action={(formData) => addAccessEntryAction(list.id, formData)}
|
||||
className="flex flex-col sm:flex-row gap-2 items-end"
|
||||
>
|
||||
<div className="flex flex-col gap-1.5 w-full">
|
||||
<Label htmlFor={`username-${list.id}`}>Username</Label>
|
||||
<Input id={`username-${list.id}`} name="username" required />
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-semibold truncate">{list.name}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{list.entries.length} {list.entries.length === 1 ? "account" : "accounts"}
|
||||
{list.description && ` · ${list.description}`}
|
||||
</p>
|
||||
</div>
|
||||
<span className={`inline-flex items-center rounded-full border px-2 py-0.5 text-xs font-bold tabular-nums ${accent.countBadge}`}>
|
||||
{list.entries.length}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5 w-full">
|
||||
<Label htmlFor={`password-${list.id}`}>Password</Label>
|
||||
<Input id={`password-${list.id}`} name="password" type="password" required />
|
||||
|
||||
{/* Edit form */}
|
||||
<form action={(formData) => updateAccessListAction(list.id, formData)} className="flex flex-col gap-3">
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor={`name-${list.id}`} className="text-xs">Name</Label>
|
||||
<Input id={`name-${list.id}`} name="name" defaultValue={list.name} className="h-8 text-sm" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor={`desc-${list.id}`} className="text-xs">Description</Label>
|
||||
<Input
|
||||
id={`desc-${list.id}`}
|
||||
name="description"
|
||||
defaultValue={list.description ?? ""}
|
||||
placeholder="Optional"
|
||||
className="h-8 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button type="submit" variant="outline" size="sm" className="h-7 text-xs">
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
formAction={deleteAccessListAction.bind(null, list.id)}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="h-7 text-xs text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
Delete list
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<Separator />
|
||||
|
||||
{/* Accounts list */}
|
||||
<div className="flex flex-col gap-2">
|
||||
<p className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Accounts</p>
|
||||
|
||||
{list.entries.length === 0 ? (
|
||||
<div className="flex items-center gap-2 rounded-md border border-dashed px-3 py-3 text-sm text-muted-foreground">
|
||||
<UserPlus className="h-4 w-4 shrink-0" />
|
||||
No accounts yet — add one below.
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col divide-y divide-border rounded-md border overflow-hidden">
|
||||
{list.entries.map((entry) => (
|
||||
<div
|
||||
key={entry.id}
|
||||
className="flex items-center justify-between px-3 py-2 bg-muted/20 hover:bg-muted/40 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2.5">
|
||||
<span className={`flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[10px] font-bold ${accent.avatar}`}>
|
||||
{getInitials(entry.username)}
|
||||
</span>
|
||||
<div>
|
||||
<p className="text-sm font-medium font-mono leading-tight">{entry.username}</p>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Added {new Date(entry.created_at).toLocaleDateString()}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<form action={deleteAccessEntryAction.bind(null, list.id, entry.id)}>
|
||||
<Button type="submit" variant="ghost" size="icon" className="h-7 w-7 text-muted-foreground hover:text-destructive">
|
||||
<Trash2 className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<Button type="submit" className="shrink-0">Add</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
{/* Add account */}
|
||||
<form
|
||||
action={(formData) => addAccessEntryAction(list.id, formData)}
|
||||
className="flex flex-col sm:flex-row gap-2 items-end"
|
||||
>
|
||||
<div className="flex flex-col gap-1.5 w-full">
|
||||
<Label htmlFor={`username-${list.id}`} className="text-xs">Username</Label>
|
||||
<Input id={`username-${list.id}`} name="username" required placeholder="username" className="h-8 text-sm font-mono" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5 w-full">
|
||||
<Label htmlFor={`password-${list.id}`} className="text-xs">Password</Label>
|
||||
<Input id={`password-${list.id}`} name="password" type="password" required placeholder="••••••••" className="h-8 text-sm" />
|
||||
</div>
|
||||
<Button type="submit" size="sm" className="shrink-0 h-8 gap-1">
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{pageCount > 1 && (
|
||||
@@ -142,38 +215,42 @@ export default function AccessListsClient({ lists, pagination }: Props) {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Create new */}
|
||||
<section className="flex flex-col gap-3">
|
||||
<h2 className="text-lg font-semibold">Create access list</h2>
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex h-7 w-7 items-center justify-center rounded-lg border border-dashed border-muted-foreground/50 text-muted-foreground">
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
</div>
|
||||
<h2 className="text-sm font-semibold uppercase tracking-wider text-muted-foreground">New access list</h2>
|
||||
</div>
|
||||
<Card className="border-dashed">
|
||||
<CardContent className="pt-5 pb-5">
|
||||
<form action={createAccessListAction} className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="create-name">Name</Label>
|
||||
<Input id="create-name" name="name" placeholder="Internal users" required />
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="create-name" className="text-xs">Name <span className="text-destructive">*</span></Label>
|
||||
<Input id="create-name" name="name" placeholder="Internal users" required className="h-8 text-sm" />
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="create-description" className="text-xs">Description</Label>
|
||||
<Input id="create-description" name="description" placeholder="Optional description" className="h-8 text-sm" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="create-description">Description</Label>
|
||||
<textarea
|
||||
id="create-description"
|
||||
name="description"
|
||||
placeholder="Optional description"
|
||||
rows={2}
|
||||
className="flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="create-users">Seed members</Label>
|
||||
<Label htmlFor="create-users" className="text-xs">Seed members</Label>
|
||||
<textarea
|
||||
id="create-users"
|
||||
name="users"
|
||||
rows={3}
|
||||
placeholder="One per line, username:password"
|
||||
className="flex min-h-[80px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 resize-none"
|
||||
placeholder="One per line: username:password"
|
||||
className="flex min-h-[72px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm font-mono shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">One per line, username:password</p>
|
||||
</div>
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">Create Access List</Button>
|
||||
<Button type="submit" size="sm">
|
||||
<Shield className="h-3.5 w-3.5 mr-1.5" />
|
||||
Create Access List
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user