feat: add authentication, user management, and admin features
Added comprehensive authentication and authorization system: Authentication System: - Better Auth integration with session management - Login/logout pages and API routes - Middleware for route protection - Auth utilities and client libraries User Management: - User list, detail, and invite pages - User API endpoints (CRUD operations) - Session management for users - Profile settings page Role-Based Access Control: - Role management pages (list, create, edit) - Permission system with granular controls - Role assignment to users - Role API endpoints Admin Features: - Audit log page for tracking system events - Admin settings page - Audit service for logging user actions Additional Features: - Quotes management pages and components - SalesBldr API integration - Email service for notifications Configuration & Documentation: - Updated docker-compose.yml - MCP server configuration (mcp.json) - CVE-2025-55182 security review documentation - Standards guide and PRD documents - Re-enabling authentication documentation Database Migrations: - 012: Auth tables (users, sessions, accounts, verifications) - 013: Role tables (roles, permissions, role_permissions, user_roles) - 014: Admin settings table UI Updates: - Updated dashboard layout - Enhanced app layout with auth integration
This commit is contained in:
root
parent
d8e6931b85
commit
9f912aed24
68 changed files with 7651 additions and 3 deletions
38
app/admin/audit-log/page.tsx
Normal file
38
app/admin/audit-log/page.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
import { Suspense } from "react";
|
||||
import { AuditLogTable } from "@/components/admin/audit/audit-log-table";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function AuditLogPage() {
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold">Audit Log</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
View system activity and security events
|
||||
</p>
|
||||
</div>
|
||||
<Suspense fallback={<AuditLogSkeleton />}>
|
||||
<AuditLogTable />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AuditLogSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<Skeleton className="h-10 w-[200px]" />
|
||||
<Skeleton className="h-10 w-[200px]" />
|
||||
<Skeleton className="h-10 w-[200px]" />
|
||||
</div>
|
||||
<div className="rounded-md border">
|
||||
<div className="p-4 space-y-4">
|
||||
{[...Array(10)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
52
app/admin/roles/[id]/page.tsx
Normal file
52
app/admin/roles/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { notFound } from "next/navigation";
|
||||
import { Pool } from "pg";
|
||||
import { RoleForm } from "@/components/admin/roles/role-form";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL,
|
||||
});
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
async function getRole(id: string) {
|
||||
const result = await pool.query(
|
||||
`SELECT id, name, description, permissions, is_system, created_at, updated_at
|
||||
FROM "role" WHERE id = $1`,
|
||||
[id]
|
||||
);
|
||||
return result.rows[0] || null;
|
||||
}
|
||||
|
||||
export default async function EditRolePage({ params }: PageProps) {
|
||||
const { id } = await params;
|
||||
const role = await getRole(id);
|
||||
|
||||
if (!role) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4 max-w-3xl">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<CardTitle>Edit Role: {role.name}</CardTitle>
|
||||
{role.is_system && <Badge variant="outline">System</Badge>}
|
||||
</div>
|
||||
<CardDescription>
|
||||
{role.is_system
|
||||
? "System roles cannot be renamed or deleted, but permissions can be modified"
|
||||
: "Update role name, description, and permissions"}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<RoleForm role={role} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
app/admin/roles/new/page.tsx
Normal file
20
app/admin/roles/new/page.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { RoleForm } from "@/components/admin/roles/role-form";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
export default function NewRolePage() {
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4 max-w-3xl">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Create Role</CardTitle>
|
||||
<CardDescription>
|
||||
Create a new role with custom permissions
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<RoleForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
15
app/admin/roles/page.tsx
Normal file
15
app/admin/roles/page.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
import { RoleTable } from "@/components/admin/roles/role-table";
|
||||
|
||||
export default function RolesPage() {
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold">Role Management</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Manage roles and their permissions
|
||||
</p>
|
||||
</div>
|
||||
<RoleTable />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
173
app/admin/settings/page.tsx
Normal file
173
app/admin/settings/page.tsx
Normal file
|
|
@ -0,0 +1,173 @@
|
|||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Loader2, Save } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const [settings, setSettings] = useState<Record<string, string>>({});
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchSettings();
|
||||
}, []);
|
||||
|
||||
async function fetchSettings() {
|
||||
try {
|
||||
const response = await fetch("/api/admin/settings");
|
||||
if (!response.ok) throw new Error("Failed to fetch settings");
|
||||
const data = await response.json();
|
||||
setSettings(data.settings);
|
||||
} catch (error) {
|
||||
toast.error("Failed to load settings");
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
setIsSaving(true);
|
||||
try {
|
||||
const response = await fetch("/api/admin/settings", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ settings }),
|
||||
});
|
||||
|
||||
if (!response.ok) throw new Error("Failed to save settings");
|
||||
toast.success("Settings saved successfully");
|
||||
} catch (error) {
|
||||
toast.error("Failed to save settings");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
function updateSetting(key: string, value: string) {
|
||||
setSettings((prev) => ({ ...prev, [key]: value }));
|
||||
}
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4 flex justify-center">
|
||||
<Loader2 className="h-8 w-8 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold">Settings</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Configure application settings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="microsoft" className="space-y-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="microsoft">Microsoft</TabsTrigger>
|
||||
<TabsTrigger value="sessions">Sessions</TabsTrigger>
|
||||
<TabsTrigger value="audit">Audit</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="microsoft">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Microsoft Entra ID</CardTitle>
|
||||
<CardDescription>
|
||||
Configure Microsoft 365 authentication settings
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="tenant">Tenant ID</Label>
|
||||
<Input
|
||||
id="tenant"
|
||||
value={settings.microsoft_tenant_id || ""}
|
||||
onChange={(e) => updateSetting("microsoft_tenant_id", e.target.value)}
|
||||
placeholder="common or your-tenant-id"
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Use "common" for multi-tenant or specify your organization's tenant ID
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="sessions">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Session Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure session timeout and security policies
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="timeout">Default Session Timeout (seconds)</Label>
|
||||
<Input
|
||||
id="timeout"
|
||||
type="number"
|
||||
value={settings.default_session_timeout || "86400"}
|
||||
onChange={(e) => updateSetting("default_session_timeout", e.target.value)}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Default: 86400 (24 hours)
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="audit">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Audit Log Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure audit log retention
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="retention">Retention Period (days)</Label>
|
||||
<Input
|
||||
id="retention"
|
||||
type="number"
|
||||
value={settings.audit_log_retention_days || "90"}
|
||||
onChange={(e) => updateSetting("audit_log_retention_days", e.target.value)}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Audit logs older than this will be automatically deleted
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="mt-6">
|
||||
<Button onClick={handleSave} disabled={isSaving}>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Saving...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Save className="mr-2 h-4 w-4" />
|
||||
Save Settings
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
98
app/admin/users/[id]/page.tsx
Normal file
98
app/admin/users/[id]/page.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
|||
import { notFound } from "next/navigation";
|
||||
import { Pool } from "pg";
|
||||
import { getSession } from "@/lib/auth-utils";
|
||||
import { UserForm } from "@/components/admin/users/user-form";
|
||||
import { UserSessions } from "@/components/admin/users/user-sessions";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { RoleBadge } from "@/components/admin/users/role-badge";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
const pool = new Pool({
|
||||
connectionString: process.env.DATABASE_URL,
|
||||
});
|
||||
|
||||
interface PageProps {
|
||||
params: Promise<{ id: string }>;
|
||||
}
|
||||
|
||||
async function getUser(id: string) {
|
||||
const result = await pool.query(
|
||||
`SELECT id, name, email, email_verified, image, role, banned,
|
||||
banned_reason, ban_expires, requires_setup, created_at, updated_at
|
||||
FROM "user" WHERE id = $1`,
|
||||
[id]
|
||||
);
|
||||
return result.rows[0] || null;
|
||||
}
|
||||
|
||||
async function getUserSessions(userId: string) {
|
||||
const result = await pool.query(
|
||||
`SELECT id, ip_address, user_agent, created_at, expires_at
|
||||
FROM "session" WHERE user_id = $1 ORDER BY created_at DESC`,
|
||||
[userId]
|
||||
);
|
||||
return result.rows;
|
||||
}
|
||||
|
||||
export default async function UserDetailPage({ params }: PageProps) {
|
||||
const { id } = await params;
|
||||
const session = await getSession();
|
||||
const user = await getUser(id);
|
||||
|
||||
if (!user) {
|
||||
notFound();
|
||||
}
|
||||
|
||||
const sessions = await getUserSessions(id);
|
||||
const isCurrentUser = session?.user?.id === id;
|
||||
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<div className="mb-8">
|
||||
<div className="flex items-center gap-4">
|
||||
<h1 className="text-3xl font-bold">{user.name}</h1>
|
||||
<RoleBadge role={user.role} />
|
||||
{user.banned && <Badge variant="destructive">Banned</Badge>}
|
||||
{isCurrentUser && <Badge variant="outline">You</Badge>}
|
||||
</div>
|
||||
<p className="text-muted-foreground mt-2">{user.email}</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="details" className="space-y-6">
|
||||
<TabsList>
|
||||
<TabsTrigger value="details">Details</TabsTrigger>
|
||||
<TabsTrigger value="sessions">Sessions ({sessions.length})</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="details">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>User Details</CardTitle>
|
||||
<CardDescription>
|
||||
Update user information and role
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<UserForm user={user} isCurrentUser={isCurrentUser} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="sessions">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Active Sessions</CardTitle>
|
||||
<CardDescription>
|
||||
View and manage user's active sessions
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<UserSessions sessions={sessions} userId={id} />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
20
app/admin/users/invite/page.tsx
Normal file
20
app/admin/users/invite/page.tsx
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import { InviteUserForm } from "@/components/admin/users/invite-user-form";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
export default function InviteUserPage() {
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4 max-w-2xl">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Invite User</CardTitle>
|
||||
<CardDescription>
|
||||
Send an invitation email to add a new user to the system
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<InviteUserForm />
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
39
app/admin/users/page.tsx
Normal file
39
app/admin/users/page.tsx
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { Suspense } from "react";
|
||||
import { UserTable } from "@/components/admin/users/user-table";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
|
||||
export default function UsersPage() {
|
||||
return (
|
||||
<div className="container mx-auto py-8 px-4">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-3xl font-bold">User Management</h1>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Manage users, roles, and permissions
|
||||
</p>
|
||||
</div>
|
||||
<Suspense fallback={<UserTableSkeleton />}>
|
||||
<UserTable />
|
||||
</Suspense>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function UserTableSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex gap-4">
|
||||
<Skeleton className="h-10 flex-1" />
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
<Skeleton className="h-10 w-[140px]" />
|
||||
<Skeleton className="h-10 w-[100px]" />
|
||||
</div>
|
||||
<div className="rounded-md border">
|
||||
<div className="p-4 space-y-4">
|
||||
{[...Array(5)].map((_, i) => (
|
||||
<Skeleton key={i} className="h-12 w-full" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue