Feat: RBAC, Keys Extension, Invites
feat: org members page — invite users, cancel invites, change roles feat: show pending invitations banner on profile page feat: invite accept flow for existing users (no password needed) feat: departments page updates feat: SSH keys page — dept cert policy UI (expiry + extensions) feat: wire up auth pages to real API (register, verify, reset, OIDC) feat: CLI auth bridge — login page handles CLI token flow feat: admin users — suspend/unsuspend, role badges, role filter feat: add admin OAuth providers management page feat: activity page — org-wide audit log view for admins feat: add my memberships page chore: add isOrgAdmin/isOrgMember to AuthContext, restrict sidebar chore: update app routing and shared layout
This commit is contained in:
@@ -1,10 +1,12 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, Loader2, RefreshCw } from "lucide-react";
|
||||
import { LogIn, LogOut, Key, Fingerprint, Smartphone, AlertTriangle, Loader2, RefreshCw, Users } from "lucide-react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { api, AuditLogEntry } from "@/lib/api";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
|
||||
// Map audit log action strings to display info
|
||||
const getEventDisplay = (action: string) => {
|
||||
@@ -31,7 +33,9 @@ const getEventDisplay = (action: string) => {
|
||||
};
|
||||
|
||||
export default function ActivityPage() {
|
||||
const { isOrgAdmin } = useAuth();
|
||||
const [filter, setFilter] = useState("all");
|
||||
const [view, setView] = useState<"mine" | "org">("mine");
|
||||
const [events, setEvents] = useState<AuditLogEntry[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [error, setError] = useState("");
|
||||
@@ -39,15 +43,18 @@ export default function ActivityPage() {
|
||||
const loadEvents = () => {
|
||||
setIsLoading(true);
|
||||
setError("");
|
||||
api.users.auditLogs({ per_page: "50" })
|
||||
.then((data) => {
|
||||
setEvents(data.audit_logs ?? []);
|
||||
})
|
||||
const req =
|
||||
view === "org" && isOrgAdmin
|
||||
? api.admin.getAuditLogs({ per_page: "100" }).then((d) => d.audit_logs ?? [])
|
||||
: api.users.auditLogs({ per_page: "50" }).then((d) => d.audit_logs ?? []);
|
||||
|
||||
req
|
||||
.then((logs) => setEvents(logs))
|
||||
.catch(() => setError("Failed to load activity. Please try again."))
|
||||
.finally(() => setIsLoading(false));
|
||||
};
|
||||
|
||||
useEffect(() => { loadEvents(); }, []);
|
||||
useEffect(() => { loadEvents(); }, [view]); // eslint-disable-line react-hooks/exhaustive-deps
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
@@ -75,12 +82,23 @@ export default function ActivityPage() {
|
||||
<div>
|
||||
<h1 className="page-title">Activity</h1>
|
||||
<p className="page-description">
|
||||
Your recent account activity and security events
|
||||
{view === "org" ? "Organization-wide audit log" : "Your recent account activity and security events"}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{isOrgAdmin && (
|
||||
<Tabs value={view} onValueChange={(v) => setView(v as "mine" | "org")}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="mine">My Activity</TabsTrigger>
|
||||
<TabsTrigger value="org">
|
||||
<Users className="w-3.5 h-3.5 mr-1" />
|
||||
Org Logs
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
)}
|
||||
<Select value={filter} onValueChange={setFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectTrigger className="w-[160px]">
|
||||
<SelectValue placeholder="Filter events" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -137,6 +155,9 @@ export default function ActivityPage() {
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground space-y-0.5">
|
||||
{view === "org" && event.user_id && (
|
||||
<p className="font-medium text-xs text-foreground/70">User: {event.user_id}</p>
|
||||
)}
|
||||
{event.description && <p>{event.description}</p>}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
{event.ip_address && (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Mail, Building2, Upload, CheckCircle, AlertCircle, Loader2 } from "lucide-react";
|
||||
import { Mail, Upload, CheckCircle, AlertCircle, Loader2, Bell } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
@@ -8,8 +8,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { useAuth } from "@/contexts/AuthContext";
|
||||
import { api, Organization, ApiError } from "@/lib/api";
|
||||
import { useOrganizations } from "@/hooks/useOrganizations";
|
||||
import { api, ApiError, PendingInvite } from "@/lib/api";
|
||||
import { toast } from "@/hooks/use-toast";
|
||||
|
||||
function ProfileSkeleton() {
|
||||
@@ -52,18 +51,6 @@ function ProfileSkeleton() {
|
||||
<Skeleton className="h-12 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Organizations Skeleton */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<Skeleton className="h-5 w-28" />
|
||||
<Skeleton className="h-4 w-48 mt-1" />
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-2">
|
||||
<Skeleton className="h-14 w-full" />
|
||||
<Skeleton className="h-14 w-full" />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -74,16 +61,7 @@ export default function ProfilePage() {
|
||||
const [name, setName] = useState("");
|
||||
const [isEditing, setIsEditing] = useState(false);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
// Use React Query hook for organizations with automatic caching and deduplication
|
||||
const { data: organizations = [], isLoading: orgsLoading, error: orgsError } = useOrganizations();
|
||||
|
||||
// Debug logging
|
||||
console.log('[ProfilePage] organizations data:', organizations);
|
||||
console.log('[ProfilePage] organizations is array:', Array.isArray(organizations));
|
||||
|
||||
// Ensure organizations is always an array (defensive check)
|
||||
const organizationsArray = Array.isArray(organizations) ? organizations : [];
|
||||
const [pendingInvites, setPendingInvites] = useState<PendingInvite[]>([]);
|
||||
|
||||
// Sync local name state with user data
|
||||
useEffect(() => {
|
||||
@@ -92,16 +70,13 @@ export default function ProfilePage() {
|
||||
}
|
||||
}, [user?.full_name]);
|
||||
|
||||
// Handle 403 errors for organizations
|
||||
// Fetch pending invitations for this user
|
||||
useEffect(() => {
|
||||
if (orgsError instanceof ApiError && orgsError.code === 403) {
|
||||
toast({
|
||||
title: "Access Denied",
|
||||
description: "You don't have permission to view organizations. Please contact your organization administrator.",
|
||||
variant: "destructive",
|
||||
});
|
||||
}
|
||||
}, [orgsError]);
|
||||
if (!user) return;
|
||||
api.users.getMyInvites()
|
||||
.then((res) => setPendingInvites(res.invites ?? []))
|
||||
.catch(() => { /* silently ignore */ });
|
||||
}, [user]);
|
||||
|
||||
const getInitials = (fullName: string | null) => {
|
||||
if (!fullName) return "?";
|
||||
@@ -159,11 +134,39 @@ export default function ProfilePage() {
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Profile</h1>
|
||||
<p className="page-description">
|
||||
Manage your personal information and organization memberships
|
||||
Manage your personal information and account settings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Pending Invitations Banner */}
|
||||
{pendingInvites.length > 0 && (
|
||||
<div className="rounded-lg border border-primary/40 bg-primary/10 p-4 space-y-3">
|
||||
<div className="flex items-center gap-2 text-primary font-semibold text-sm">
|
||||
<Bell className="w-4 h-4" />
|
||||
You have {pendingInvites.length} pending invitation{pendingInvites.length > 1 ? "s" : ""}
|
||||
</div>
|
||||
{pendingInvites.map((invite) => (
|
||||
<div
|
||||
key={invite.token}
|
||||
className="flex items-center justify-between rounded-md border border-border bg-card px-4 py-3"
|
||||
>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-foreground">{invite.organization.name}</p>
|
||||
<p className="text-xs text-muted-foreground capitalize">
|
||||
Invited as <span className="font-medium">{invite.role}</span>
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href={`/invite?token=${invite.token}`}
|
||||
className="inline-flex items-center gap-1 rounded-md bg-primary px-3 py-1.5 text-xs font-semibold text-primary-foreground hover:bg-primary/90 transition-colors"
|
||||
>
|
||||
Accept →
|
||||
</a>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{/* Profile Photo & Name */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
@@ -247,59 +250,6 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Organizations */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">Organizations</CardTitle>
|
||||
<CardDescription>Organizations you're a member of</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{orgsLoading ? (
|
||||
<div className="space-y-2">
|
||||
<Skeleton className="h-14 w-full" />
|
||||
<Skeleton className="h-14 w-full" />
|
||||
</div>
|
||||
) : organizationsArray.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground text-center py-6">
|
||||
You're not a member of any organizations yet.
|
||||
</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{organizationsArray.map((org) => (
|
||||
<div
|
||||
key={org.id}
|
||||
className="flex items-center justify-between p-3 border rounded-lg"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
{org.logo_url ? (
|
||||
<Avatar className="w-8 h-8">
|
||||
<AvatarImage src={org.logo_url} />
|
||||
<AvatarFallback>
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-4 h-4 text-primary" />
|
||||
</div>
|
||||
)}
|
||||
<span className="text-foreground font-medium">{org.name}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{(org.role === 'owner' || org.role === 'admin') && (
|
||||
<Badge variant="default" className="bg-primary text-primary-foreground">
|
||||
Admin
|
||||
</Badge>
|
||||
)}
|
||||
<Badge variant="secondary" className="capitalize">{org.role}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -13,6 +13,7 @@ import {
|
||||
Pencil,
|
||||
ShieldOff,
|
||||
Server,
|
||||
Clock,
|
||||
} from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
@@ -46,7 +47,7 @@ import {
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { api, SSHKey, SSHCertificate, ApiError, PrincipalOption, MyPrincipalsOrg } from "@/lib/api";
|
||||
import { api, SSHKey, SSHCertificate, ApiError, PrincipalOption, MyPrincipalsOrg, DeptCertPolicy } from "@/lib/api";
|
||||
|
||||
// ──────────────────────────────────────────────────────────────────────────────
|
||||
// Helpers
|
||||
@@ -124,6 +125,7 @@ export default function SSHKeysPage() {
|
||||
const [signError, setSignError] = useState<string | null>(null);
|
||||
const [certType, setCertType] = useState<'user' | 'host'>('user');
|
||||
const [expiryHours, setExpiryHours] = useState<string>('');
|
||||
const [deptCertPolicy, setDeptCertPolicy] = useState<DeptCertPolicy | null>(null);
|
||||
|
||||
// Principal selection (populated when sign dialog opens)
|
||||
const [principalOrgs, setPrincipalOrgs] = useState<MyPrincipalsOrg[]>([]);
|
||||
@@ -314,8 +316,14 @@ export default function SSHKeysPage() {
|
||||
setIsAdminMode(false);
|
||||
setCertType('user');
|
||||
setExpiryHours('');
|
||||
setDeptCertPolicy(null);
|
||||
setIsLoadingPrincipals(true);
|
||||
|
||||
// Fetch dept cert policy in parallel
|
||||
api.ssh.getMyDeptCertPolicy().then((data) => {
|
||||
setDeptCertPolicy(data.policy);
|
||||
}).catch(() => {/* non-fatal */});
|
||||
|
||||
try {
|
||||
const data = await api.users.myPrincipals();
|
||||
setPrincipalOrgs(data.orgs);
|
||||
@@ -961,22 +969,65 @@ cat /tmp/challenge.txt.sig | base64 -w0`}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Expiry hours override */}
|
||||
{/* Expiry — controlled by dept cert policy */}
|
||||
<div className="space-y-1.5">
|
||||
<Label htmlFor="expiry-hours" className="text-sm font-medium">
|
||||
Validity (hours){' '}
|
||||
<span className="text-muted-foreground font-normal">(optional — leave blank to use CA default)</span>
|
||||
<Label htmlFor="expiry-hours" className="text-sm font-medium flex items-center gap-1.5">
|
||||
<Clock className="w-4 h-4" />
|
||||
Validity (hours)
|
||||
</Label>
|
||||
<Input
|
||||
id="expiry-hours"
|
||||
type="number"
|
||||
min={1}
|
||||
placeholder="e.g. 8"
|
||||
value={expiryHours}
|
||||
onChange={(e) => setExpiryHours(e.target.value)}
|
||||
className="w-36"
|
||||
/>
|
||||
{deptCertPolicy?.allow_user_expiry ? (
|
||||
<div className="space-y-1">
|
||||
<Input
|
||||
id="expiry-hours"
|
||||
type="number"
|
||||
min={1}
|
||||
max={deptCertPolicy.max_expiry_hours}
|
||||
placeholder={`Default: ${deptCertPolicy.default_expiry_hours}h`}
|
||||
value={expiryHours}
|
||||
onChange={(e) => setExpiryHours(e.target.value)}
|
||||
className="w-40"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{isAdminMode
|
||||
? deptCertPolicy.max_expiry_hours < 8760
|
||||
? <>Capped at <strong>{deptCertPolicy.max_expiry_hours}h</strong> by department policy. Leave blank for default ({deptCertPolicy.default_expiry_hours}h).</>
|
||||
: <>Leave blank to use default ({deptCertPolicy.default_expiry_hours}h).</>
|
||||
: <>Max allowed: <strong>{deptCertPolicy.max_expiry_hours}h</strong>. Leave blank for default ({deptCertPolicy.default_expiry_hours}h).</>
|
||||
}
|
||||
</p>
|
||||
</div>
|
||||
) : deptCertPolicy ? (
|
||||
<div className="flex items-center gap-2 px-3 py-2 rounded-md bg-muted text-sm text-muted-foreground">
|
||||
<Clock className="w-4 h-4 flex-shrink-0" />
|
||||
<span>Expiry set by policy: <strong>{deptCertPolicy.default_expiry_hours} hours</strong></span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-1">
|
||||
<Input
|
||||
id="expiry-hours"
|
||||
type="number"
|
||||
min={1}
|
||||
placeholder="e.g. 8"
|
||||
value={expiryHours}
|
||||
onChange={(e) => setExpiryHours(e.target.value)}
|
||||
className="w-36"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">Leave blank to use CA default.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Extensions granted (informational) */}
|
||||
{deptCertPolicy && deptCertPolicy.all_extensions?.length > 0 && (
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-sm font-medium">Extensions granted</Label>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{deptCertPolicy.all_extensions?.map((ext) => (
|
||||
<Badge key={ext} variant="secondary" className="text-xs font-mono">{ext}</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3 py-2">
|
||||
|
||||
Reference in New Issue
Block a user