coryHawkvelt/gatehouse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add per-state action dropdowns and table view to ZeroTier All Approvals

Browse Source
This commit is contained in:
cory
2026-05-30 05:03:01 +00:00
parent fe0b114ebf
commit 71f9e8b7ac
5 changed files with 251 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+2
View File
@@ -61,6 +61,7 @@ import SystemAuditPage from "@/pages/admin/SystemAuditPage";
import OAuthProvidersPage from "@/pages/admin/OAuthProvidersPage";
import OrgSetupPage from "@/pages/auth/OrgSetupPage";
import SessionTimeoutModal from "@/components/auth/SessionTimeoutModal";
import NotFound from "@/pages/NotFound";
const queryClient = new QueryClient({
@@ -151,6 +152,7 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
function AppRoutes() {
return (
<AuthProvider>
<SessionTimeoutModal />
<OrgProvider>
<Routes>
{/* Marketing pages */}
src/components/auth/SessionTimeoutModal.tsx
+50
View File
@@ -0,0 +1,50 @@
import { useEffect, useState, useCallback } from 'react';
import { useNavigate } from 'react-router-dom';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { tokenManager } from '@/lib/api';
export default function SessionTimeoutModal() {
const [open, setOpen] = useState(false);
const navigate = useNavigate();
const handleOpenChange = useCallback((isOpen: boolean) => {
if (!isOpen) {
tokenManager.clearToken();
navigate('/login', { replace: true });
}
}, [navigate]);
useEffect(() => {
const onSessionExpired = () => setOpen(true);
window.addEventListener('session:expired', onSessionExpired);
return () => window.removeEventListener('session:expired', onSessionExpired);
}, []);
return (
<Dialog open={open} onOpenChange={handleOpenChange}>
<DialogContent
onPointerDownOutside={(e) => e.preventDefault()}
onEscapeKeyDown={(e) => e.preventDefault()}
>
<DialogHeader>
<DialogTitle>Session Expired</DialogTitle>
<DialogDescription>
Your session has timed out. Please sign in again to continue.
</DialogDescription>
</DialogHeader>
<div className="flex justify-end">
<Button onClick={() => { tokenManager.clearToken(); navigate('/login', { replace: true }); }}>
Sign In
</Button>
</div>
</DialogContent>
</Dialog>
);
}
src/lib/api.ts
+7 -1
View File
@@ -434,6 +434,8 @@ async function request<T>(
if (shouldClearToken) {
tokenManager.clearToken();
// Dispatch event so the UI can show a session timeout modal
window.dispatchEvent(new CustomEvent('session:expired'));
if (import.meta.env.DEV) {
console.log(`[API] Token cleared on 401 (type: ${errorType}, endpoint: ${endpoint})`);
}
@@ -2114,9 +2116,13 @@ export interface UserNetworkApproval {
user_name: string | null;
user_email: string | null;
portal_network_id: string;
device_id?: string;
active?: boolean;
active_session?: ActivationSession | null;
join_seen?: boolean;
granted_by_user_id: string | null;
grant_type: ApprovalGrantType;
state: ApprovalState;
status: ApprovalState;
justification: string | null;
created_at: string;
updated_at: string;
src/pages/org/AccessPage.tsx
+189 -39
View File
@@ -123,10 +123,13 @@ export default function AccessPage() {
const [search, setSearch] = useState("");
const [selectedNetworkFilter, setSelectedNetworkFilter] = useState<string>("all");
const [approvalStateFilter, setApprovalStateFilter] = useState<ApprovalState | "all">("all");
const [approveId, setApproveId] = useState<string | null>(null);
const [rejectId, setRejectId] = useState<string | null>(null);
const [revokeId, setRevokeId] = useState<string | null>(null);
const [isApproving, setIsApproving] = useState(false);
const [rejectConfirmId, setRejectConfirmId] = useState<string | null>(null);
const [showAssign, setShowAssign] = useState(false);
const [assignUserId, setAssignUserId] = useState("");
@@ -384,6 +387,17 @@ export default function AccessPage() {
return true;
});
const filteredApprovals = approvals.filter((a) => {
if (approvalStateFilter !== "all" && a.state !== approvalStateFilter) return false;
if (selectedNetworkFilter !== "all" && a.portal_network_id !== selectedNetworkFilter) return false;
if (search) {
const q = search.toLowerCase();
const display = getUserDisplay(a.user_id).toLowerCase();
if (!display.includes(q)) return false;
}
return true;
});
const filteredSessions = sessions.filter((s) => s.is_active);
const activeSessions = filteredSessions;
@@ -484,7 +498,7 @@ export default function AccessPage() {
<div className="flex items-center gap-2 flex-wrap">
<p className="font-medium truncate">{getUserDisplay(approval.user_id)}</p>
<Badge variant="outline" className="text-xs">{getNetworkName(approval.portal_network_id)}</Badge>
<ApprovalStateBadge state={approval.state} />
<ApprovalStateBadge state={approval.status} />
</div>
<p className="text-sm text-muted-foreground">
{approval.grant_type === "requested" ? "User request" : "Manager assignment"}
@@ -603,10 +617,25 @@ export default function AccessPage() {
<TabsContent value="approvals">
<Card>
<CardHeader className="pb-3">
<CardTitle className="text-base flex items-center gap-2">
<Shield className="w-4 h-4" />
All Approvals
</CardTitle>
<div className="flex items-center justify-between flex-wrap gap-2">
<CardTitle className="text-base flex items-center gap-2">
<Shield className="w-4 h-4" />
All Approvals
</CardTitle>
<Select value={approvalStateFilter} onValueChange={(v) => setApprovalStateFilter(v as ApprovalState | "all")}>
<SelectTrigger className="w-[160px] h-8">
<SelectValue placeholder="Filter by state" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All States</SelectItem>
<SelectItem value="pending">Pending</SelectItem>
<SelectItem value="approved">Approved</SelectItem>
<SelectItem value="rejected">Rejected</SelectItem>
<SelectItem value="revoked">Revoked</SelectItem>
<SelectItem value="suspended">Suspended</SelectItem>
</SelectContent>
</Select>
</div>
<CardDescription>Complete history of network access grants</CardDescription>
</CardHeader>
<CardContent className="p-0">
@@ -615,41 +644,129 @@ export default function AccessPage() {
<Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
<span className="ml-2 text-muted-foreground">Loading…</span>
</div>
) : approvals.length === 0 ? (
<div className="p-8 text-center text-muted-foreground">No approvals found.</div>
) : filteredApprovals.length === 0 ? (
<div className="p-8 text-center text-muted-foreground">
{approvalStateFilter !== "all" || search || selectedNetworkFilter !== "all"
? "No approvals match your filters."
: "No approvals found."}
</div>
) : (
<div className="divide-y">
{approvals.map((approval) => (
<div key={approval.id} className="flex items-center gap-4 p-4">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 flex-wrap">
<p className="font-medium truncate">{getUserDisplay(approval.user_id)}</p>
<Badge variant="outline" className="text-xs">{getNetworkName(approval.portal_network_id)}</Badge>
<ApprovalStateBadge state={approval.state} />
</div>
<p className="text-sm text-muted-foreground">
{approval.grant_type === "requested" ? "User request" : "Manager assignment"}
{approval.justification && ` — "${approval.justification}"`}
</p>
<p className="text-xs text-muted-foreground mt-1">
{formatDate(approval.created_at)}
{approval.granted_by_user_id && ` · Granted by: ${getUserDisplay(approval.granted_by_user_id)}`}
</p>
</div>
{(approval.state === "approved" || approval.state === "suspended") && (
<Button
size="sm"
variant="outline"
className="text-red-600 border-red-300 hover:bg-red-50 gap-1 flex-shrink-0"
onClick={() => handleRevoke(approval.id)}
disabled={revokeId === approval.id || isApproving}
>
{revokeId === approval.id ? <Loader2 className="w-3 h-3 animate-spin" /> : <XCircle className="w-3 h-3" />}
Revoke
</Button>
)}
</div>
))}
<div className="overflow-x-auto">
<table className="w-full text-sm">
<thead>
<tr className="border-b bg-muted/50">
<th className="text-left p-3 font-medium">User</th>
<th className="text-left p-3 font-medium">Device</th>
<th className="text-left p-3 font-medium">Network</th>
<th className="text-left p-3 font-medium">Status</th>
<th className="text-left p-3 font-medium">Requested</th>
<th className="text-left p-3 font-medium">Approved</th>
<th className="text-right p-3 font-medium">Actions</th>
</tr>
</thead>
<tbody className="divide-y">
{filteredApprovals.map((approval) => (
<tr key={approval.id} className="hover:bg-accent/30">
<td className="p-3">
<div className="min-w-0">
<p className="font-medium truncate max-w-[160px]">{getUserDisplay(approval.user_id)}</p>
{approval.justification && (
<p className="text-xs text-muted-foreground truncate max-w-[160px]" title={approval.justification}>
"{approval.justification}"
</p>
)}
</div>
</td>
<td className="p-3">
{approval.device_id ? (
<span className="font-mono text-xs">{approval.device_id}</span>
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</td>
<td className="p-3">
<span className="text-xs font-medium">{getNetworkName(approval.portal_network_id)}</span>
</td>
<td className="p-3">
<ApprovalStateBadge state={approval.status} />
</td>
<td className="p-3">
<span className="text-xs">{formatDate(approval.created_at)}</span>
</td>
<td className="p-3">
{approval.status !== "pending" ? (
<div>
<span className="text-xs">{formatDate(approval.updated_at)}</span>
{approval.granted_by_user_id && (
<p className="text-xs text-muted-foreground">by {getUserDisplay(approval.granted_by_user_id)}</p>
)}
</div>
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</td>
<td className="p-3 text-right">
{approval.status === "pending" || approval.status === "approved" || approval.status === "suspended" ? (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
size="sm"
variant="ghost"
className="h-8 w-8 p-0"
disabled={
(approval.status === "pending" && (approveId === approval.id || rejectId === approval.id)) ||
((approval.status === "approved" || approval.status === "suspended") && (revokeId === approval.id))
}
>
{((approval.status === "pending" && (approveId === approval.id || rejectId === approval.id)) ||
((approval.status === "approved" || approval.status === "suspended") && revokeId === approval.id)) ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<MoreHorizontal className="w-4 h-4" />
)}
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end" className="min-w-[140px]">
{approval.status === "pending" && (
<>
<DropdownMenuItem
onClick={() => handleApprove(approval.id)}
disabled={approveId === approval.id || isApproving}
className="text-green-600 focus:text-green-700"
>
<CheckCircle className="w-4 h-4 mr-2" />
Approve
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setRejectConfirmId(approval.id)}
disabled={rejectId === approval.id || isApproving}
className="text-red-600 focus:text-red-700"
>
<XCircle className="w-4 h-4 mr-2" />
Reject
</DropdownMenuItem>
</>
)}
{(approval.status === "approved" || approval.status === "suspended") && (
<DropdownMenuItem
onClick={() => handleRevoke(approval.id)}
disabled={revokeId === approval.id || isApproving}
className="text-red-600 focus:text-red-700"
>
<XCircle className="w-4 h-4 mr-2" />
Revoke
</DropdownMenuItem>
)}
</DropdownMenuContent>
</DropdownMenu>
) : (
<span className="text-xs text-muted-foreground">—</span>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</CardContent>
@@ -898,6 +1015,39 @@ export default function AccessPage() {
</DialogContent>
</Dialog>
{/* Reject Confirmation Dialog */}
<Dialog open={!!rejectConfirmId} onOpenChange={(open) => { if (!open) setRejectConfirmId(null); }}>
<DialogContent className="sm:max-w-md">
<DialogHeader>
<DialogTitle>Reject Request</DialogTitle>
<DialogDescription>
Are you sure you want to reject this access request? This action cannot be undone.
</DialogDescription>
</DialogHeader>
<div className="p-3 border border-red-300 rounded-lg bg-red-50 text-sm text-red-800">
<div className="flex items-start gap-2">
<AlertTriangle className="w-4 h-4 mt-0.5 flex-shrink-0" />
<span>The request will be permanently rejected. The user will need to submit a new request if they want access in the future.</span>
</div>
</div>
<DialogFooter>
<Button variant="outline" onClick={() => setRejectConfirmId(null)} disabled={rejectId !== null}>Cancel</Button>
<Button
variant="destructive"
onClick={() => {
const id = rejectConfirmId;
setRejectConfirmId(null);
if (id) handleReject(id);
}}
disabled={rejectId !== null}
>
{rejectId !== null && <Loader2 className="w-4 h-4 mr-2 animate-spin" />}
Reject Request
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
{/* End Session Confirmation Dialog */}
<Dialog open={showEndSessionConfirm} onOpenChange={(open) => { if (!open) { setShowEndSessionConfirm(false); setEndSessionTarget(null); } }}>
<DialogContent className="sm:max-w-md">
src/pages/org/DevicesPage.tsx
+3 -3
View File
@@ -844,7 +844,7 @@ export default function DevicesPage() {
<p className="text-sm text-muted-foreground font-mono">{network.zerotier_network_id}</p>
{approval && (
<div className="flex items-center gap-2 mt-1">
<ApprovalStateBadge state={approval.state} />
<ApprovalStateBadge state={approval.status} />
{approval.justification && (
<span className="text-xs text-muted-foreground">"{approval.justification}"</span>
)}
@@ -990,7 +990,7 @@ export default function DevicesPage() {
<div className="flex items-center gap-2 flex-wrap mb-1">
<p className="font-medium truncate">{network?.name || approval.portal_network_id}</p>
<Badge variant="outline" className="text-xs">{network?.environment}</Badge>
<ApprovalStateBadge state={approval.state} />
<ApprovalStateBadge state={approval.status} />
</div>
<p className="text-sm text-muted-foreground">
{approval.grant_type === "requested" ? "You requested" : "Assigned by admin"}
@@ -1013,7 +1013,7 @@ export default function DevicesPage() {
</div>
)}
</div>
{approval.state === "pending" && (
{approval.status === "pending" && (
<Button
size="sm"
variant="outline"