Changes
This commit is contained in:
gpt-engineer-app[bot]
@@ -0,0 +1,210 @@
|
||||
import { useState } from "react";
|
||||
import { Search, Plus, MoreHorizontal, Shield, User, Mail, Clock } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
|
||||
const members = [
|
||||
{
|
||||
id: "1",
|
||||
name: "John Doe",
|
||||
email: "john@example.com",
|
||||
role: "admin",
|
||||
status: "active",
|
||||
lastActive: "2 hours ago",
|
||||
avatar: null,
|
||||
initials: "JD",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Jane Smith",
|
||||
email: "jane@example.com",
|
||||
role: "member",
|
||||
status: "active",
|
||||
lastActive: "5 minutes ago",
|
||||
avatar: null,
|
||||
initials: "JS",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Bob Wilson",
|
||||
email: "bob@example.com",
|
||||
role: "member",
|
||||
status: "disabled",
|
||||
lastActive: "3 days ago",
|
||||
avatar: null,
|
||||
initials: "BW",
|
||||
},
|
||||
];
|
||||
|
||||
const pendingInvites = [
|
||||
{
|
||||
id: "1",
|
||||
email: "alice@example.com",
|
||||
role: "member",
|
||||
sentAt: "2 days ago",
|
||||
expiresAt: "5 days",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
email: "charlie@example.com",
|
||||
role: "admin",
|
||||
sentAt: "1 hour ago",
|
||||
expiresAt: "7 days",
|
||||
},
|
||||
];
|
||||
|
||||
export default function MembersPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Members</h1>
|
||||
<p className="page-description">
|
||||
Manage organization members and invitations
|
||||
</p>
|
||||
</div>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Invite member
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="members" className="w-full">
|
||||
<TabsList className="mb-4">
|
||||
<TabsTrigger value="members">
|
||||
Members ({members.length})
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="invites">
|
||||
Pending Invites ({pendingInvites.length})
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="members">
|
||||
<div className="mb-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search members..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10 max-w-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{members.map((member) => (
|
||||
<div key={member.id} className="p-4 flex items-center gap-4">
|
||||
<Avatar className="w-10 h-10">
|
||||
<AvatarImage src={member.avatar || undefined} />
|
||||
<AvatarFallback className="bg-primary text-primary-foreground">
|
||||
{member.initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{member.name}
|
||||
</p>
|
||||
{member.role === "admin" && (
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
<Shield className="w-3 h-3 mr-1" />
|
||||
Admin
|
||||
</Badge>
|
||||
)}
|
||||
{member.status === "disabled" && (
|
||||
<Badge variant="destructive" className="text-xs">
|
||||
Disabled
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground truncate">
|
||||
{member.email}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground hidden sm:block">
|
||||
Active {member.lastActive}
|
||||
</p>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<User className="w-4 h-4 mr-2" />
|
||||
View profile
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Shield className="w-4 h-4 mr-2" />
|
||||
Change role
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
{member.status === "active" ? "Disable" : "Enable"} account
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="invites">
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{pendingInvites.map((invite) => (
|
||||
<div key={invite.id} className="p-4 flex items-center gap-4">
|
||||
<div className="w-10 h-10 rounded-full bg-muted flex items-center justify-center">
|
||||
<Mail className="w-4 h-4 text-muted-foreground" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium text-foreground truncate">
|
||||
{invite.email}
|
||||
</p>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<span>Invited as {invite.role}</span>
|
||||
<span>•</span>
|
||||
<span className="flex items-center gap-1">
|
||||
<Clock className="w-3 h-3" />
|
||||
Expires in {invite.expiresAt}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm">
|
||||
Resend
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" className="text-destructive">
|
||||
Revoke
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useState } from "react";
|
||||
import { Plus, Key, ExternalLink, MoreHorizontal, Copy, RefreshCw, Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
const clients = [
|
||||
{
|
||||
id: "1",
|
||||
name: "GitLab",
|
||||
clientId: "gitlab_prod_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://gitlab.example.com/callback"],
|
||||
scopes: ["openid", "profile", "email"],
|
||||
createdAt: "2024-01-10",
|
||||
lastUsed: "2 hours ago",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Grafana",
|
||||
clientId: "grafana_prod_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://grafana.example.com/login/generic_oauth"],
|
||||
scopes: ["openid", "profile"],
|
||||
createdAt: "2024-01-08",
|
||||
lastUsed: "5 minutes ago",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "OAuth2 Proxy",
|
||||
clientId: "oauth2proxy_xxxxxxxxxxxxx",
|
||||
redirectUris: ["https://auth.example.com/oauth2/callback"],
|
||||
scopes: ["openid", "profile", "email", "groups"],
|
||||
createdAt: "2024-01-05",
|
||||
lastUsed: "1 day ago",
|
||||
},
|
||||
];
|
||||
|
||||
export default function OIDCClientsPage() {
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">OIDC Clients</h1>
|
||||
<p className="page-description">
|
||||
Manage applications that authenticate via Authy2
|
||||
</p>
|
||||
</div>
|
||||
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Add client
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create OIDC Client</DialogTitle>
|
||||
<DialogDescription>
|
||||
Register a new application to authenticate via Authy2
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="clientName">Client name</Label>
|
||||
<Input id="clientName" placeholder="My Application" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="redirectUris">Redirect URIs</Label>
|
||||
<Textarea
|
||||
id="redirectUris"
|
||||
placeholder="https://myapp.example.com/callback"
|
||||
className="min-h-[80px]"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
One URI per line. These are the allowed callback URLs.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setIsCreateOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={() => setIsCreateOpen(false)}>
|
||||
Create client
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{clients.map((client) => (
|
||||
<Card key={client.id}>
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center">
|
||||
<Key className="w-6 h-6 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-foreground">{client.name}</h3>
|
||||
<div className="flex items-center gap-2 mt-1">
|
||||
<code className="text-xs bg-muted px-2 py-1 rounded font-mono">
|
||||
{client.clientId}
|
||||
</code>
|
||||
<Button variant="ghost" size="icon" className="w-6 h-6">
|
||||
<Copy className="w-3 h-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-1 mt-3">
|
||||
{client.scopes.map((scope) => (
|
||||
<Badge key={scope} variant="secondary" className="text-xs">
|
||||
{scope}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" size="icon">
|
||||
<MoreHorizontal className="w-4 h-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem>
|
||||
<ExternalLink className="w-4 h-4 mr-2" />
|
||||
View details
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<RefreshCw className="w-4 h-4 mr-2" />
|
||||
Rotate secret
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem className="text-destructive">
|
||||
<Trash2 className="w-4 h-4 mr-2" />
|
||||
Delete client
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div className="mt-4 pt-4 border-t flex items-center justify-between text-sm text-muted-foreground">
|
||||
<div className="flex items-center gap-4">
|
||||
<span>Created {client.createdAt}</span>
|
||||
<span>•</span>
|
||||
<span>Last used {client.lastUsed}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{client.redirectUris.length} redirect URI{client.redirectUris.length > 1 ? "s" : ""}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,177 @@
|
||||
import { useState } from "react";
|
||||
import { Search, Filter, Download, User, Settings, Key, UserPlus, AlertTriangle } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
|
||||
const auditEvents = [
|
||||
{
|
||||
id: "1",
|
||||
type: "member_invited",
|
||||
actor: "John Doe",
|
||||
target: "alice@example.com",
|
||||
timestamp: "2024-01-15T10:30:00Z",
|
||||
details: "Invited as member",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
type: "policy_changed",
|
||||
actor: "John Doe",
|
||||
target: "Password Policy",
|
||||
timestamp: "2024-01-15T09:00:00Z",
|
||||
details: "Minimum length changed from 8 to 12",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
type: "member_disabled",
|
||||
actor: "Jane Smith",
|
||||
target: "bob@example.com",
|
||||
timestamp: "2024-01-14T15:45:00Z",
|
||||
details: "Account disabled",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
type: "client_created",
|
||||
actor: "John Doe",
|
||||
target: "GitLab",
|
||||
timestamp: "2024-01-14T12:00:00Z",
|
||||
details: "OIDC client created",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
type: "role_changed",
|
||||
actor: "John Doe",
|
||||
target: "jane@example.com",
|
||||
timestamp: "2024-01-13T09:00:00Z",
|
||||
details: "Role changed from member to admin",
|
||||
},
|
||||
];
|
||||
|
||||
const getEventIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "member_invited":
|
||||
case "role_changed":
|
||||
return <UserPlus className="w-4 h-4" />;
|
||||
case "policy_changed":
|
||||
return <Settings className="w-4 h-4" />;
|
||||
case "member_disabled":
|
||||
return <AlertTriangle className="w-4 h-4" />;
|
||||
case "client_created":
|
||||
return <Key className="w-4 h-4" />;
|
||||
default:
|
||||
return <User className="w-4 h-4" />;
|
||||
}
|
||||
};
|
||||
|
||||
const getEventTitle = (type: string) => {
|
||||
switch (type) {
|
||||
case "member_invited":
|
||||
return "Member invited";
|
||||
case "policy_changed":
|
||||
return "Policy changed";
|
||||
case "member_disabled":
|
||||
return "Member disabled";
|
||||
case "client_created":
|
||||
return "OIDC client created";
|
||||
case "role_changed":
|
||||
return "Role changed";
|
||||
default:
|
||||
return "Event";
|
||||
}
|
||||
};
|
||||
|
||||
export default function OrgAuditPage() {
|
||||
const [search, setSearch] = useState("");
|
||||
const [typeFilter, setTypeFilter] = useState("all");
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
return new Intl.DateTimeFormat("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
hour: "numeric",
|
||||
minute: "2-digit",
|
||||
}).format(date);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="page-title">Audit Log</h1>
|
||||
<p className="page-description">
|
||||
View all administrative actions and changes
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline">
|
||||
<Download className="w-4 h-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-4 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search events..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="pl-10"
|
||||
/>
|
||||
</div>
|
||||
<Select value={typeFilter} onValueChange={setTypeFilter}>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
<SelectValue placeholder="Filter by type" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">All events</SelectItem>
|
||||
<SelectItem value="members">Member changes</SelectItem>
|
||||
<SelectItem value="policies">Policy changes</SelectItem>
|
||||
<SelectItem value="clients">OIDC clients</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y">
|
||||
{auditEvents.map((event) => (
|
||||
<div key={event.id} className="p-4 flex items-start gap-4">
|
||||
<div
|
||||
className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||||
event.type === "member_disabled"
|
||||
? "bg-destructive/10 text-destructive"
|
||||
: "bg-accent/10 text-accent"
|
||||
}`}
|
||||
>
|
||||
{getEventIcon(event.type)}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<p className="font-medium text-foreground">
|
||||
{getEventTitle(event.type)}
|
||||
</p>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{event.target}
|
||||
</Badge>
|
||||
</div>
|
||||
<div className="mt-1 text-sm text-muted-foreground">
|
||||
<span>by {event.actor}</span>
|
||||
<span className="mx-2">•</span>
|
||||
<span>{event.details}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{formatDate(event.timestamp)}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
import { Building2, Users, Shield, Key, ArrowRight, TrendingUp } from "lucide-react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
export default function OrgOverviewPage() {
|
||||
// Mock organization data
|
||||
const org = {
|
||||
name: "Acme Corp",
|
||||
createdAt: "January 2024",
|
||||
stats: {
|
||||
totalMembers: 24,
|
||||
activeToday: 18,
|
||||
pendingInvites: 3,
|
||||
oidcClients: 5,
|
||||
},
|
||||
};
|
||||
|
||||
const quickLinks = [
|
||||
{
|
||||
title: "Members",
|
||||
description: "Manage team members and roles",
|
||||
icon: Users,
|
||||
href: "/org/members",
|
||||
},
|
||||
{
|
||||
title: "Policies",
|
||||
description: "Configure security requirements",
|
||||
icon: Shield,
|
||||
href: "/org/policies",
|
||||
},
|
||||
{
|
||||
title: "OIDC Clients",
|
||||
description: "Manage connected applications",
|
||||
icon: Key,
|
||||
href: "/org/clients",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center">
|
||||
<Building2 className="w-7 h-7 text-primary" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="page-title">{org.name}</h1>
|
||||
<p className="page-description">Created {org.createdAt}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4 mb-8">
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Total Members</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.totalMembers}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Active Today</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.activeToday}</p>
|
||||
</div>
|
||||
<TrendingUp className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Pending Invites</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.pendingInvites}</p>
|
||||
</div>
|
||||
<Users className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">OIDC Clients</p>
|
||||
<p className="text-2xl font-semibold">{org.stats.oidcClients}</p>
|
||||
</div>
|
||||
<Key className="w-8 h-8 text-muted-foreground/30" />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Quick Links */}
|
||||
<h2 className="text-lg font-semibold mb-4">Quick Actions</h2>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
{quickLinks.map((link) => (
|
||||
<Link key={link.href} to={link.href}>
|
||||
<Card className="h-full hover:border-accent/50 transition-colors cursor-pointer group">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="w-10 h-10 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
|
||||
<link.icon className="w-5 h-5 text-accent" />
|
||||
</div>
|
||||
<ArrowRight className="w-4 h-4 text-muted-foreground group-hover:text-accent transition-colors" />
|
||||
</div>
|
||||
<h3 className="font-medium text-foreground">{link.title}</h3>
|
||||
<p className="text-sm text-muted-foreground mt-1">{link.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
import { Shield, Lock, Fingerprint, Smartphone, UserPlus, AlertTriangle } from "lucide-react";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Slider } from "@/components/ui/slider";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
|
||||
export default function PoliciesPage() {
|
||||
return (
|
||||
<div className="page-container">
|
||||
<div className="page-header">
|
||||
<h1 className="page-title">Security Policies</h1>
|
||||
<p className="page-description">
|
||||
Configure security requirements for organization members
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
{/* Registration Mode */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<UserPlus className="w-4 h-4" />
|
||||
Registration Mode
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Control how new members can join your organization
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Select defaultValue="invite">
|
||||
<SelectTrigger className="w-full max-w-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="open">Open registration</SelectItem>
|
||||
<SelectItem value="invite">Invite only</SelectItem>
|
||||
<SelectItem value="closed">Closed</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-sm text-muted-foreground mt-2">
|
||||
Invite only: Members can only join via admin invitation
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Password Policy */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Lock className="w-4 h-4" />
|
||||
Password Policy
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Set minimum password requirements for all members
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-4">
|
||||
<Label>Minimum password length</Label>
|
||||
<div className="flex items-center gap-4">
|
||||
<Slider
|
||||
defaultValue={[12]}
|
||||
max={32}
|
||||
min={8}
|
||||
step={1}
|
||||
className="w-full max-w-xs"
|
||||
/>
|
||||
<span className="text-sm font-medium w-16">12 chars</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require uppercase letters</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one A-Z</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require numbers</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one 0-9</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require special characters</Label>
|
||||
<p className="text-sm text-muted-foreground">At least one !@#$%^&*</p>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* MFA Requirements */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Smartphone className="w-4 h-4" />
|
||||
Multi-Factor Authentication
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Require additional authentication methods
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label className="flex items-center gap-2">
|
||||
Require TOTP
|
||||
<Badge variant="secondary" className="text-xs">Recommended</Badge>
|
||||
</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
All members must set up an authenticator app
|
||||
</p>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<Alert className="border-warning/30 bg-warning/5">
|
||||
<AlertTriangle className="w-4 h-4 text-warning" />
|
||||
<AlertDescription className="text-sm">
|
||||
Enabling this will require all existing members to set up TOTP on their next login.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Passkey Requirements */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base flex items-center gap-2">
|
||||
<Fingerprint className="w-4 h-4" />
|
||||
Passkeys (WebAuthn)
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Require passwordless authentication capability
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<Label>Require at least one passkey</Label>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Members must register a passkey for backup authentication
|
||||
</p>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user