mirror of
https://github.com/freedbygrace/ActiveDirectoryManager.git
synced 2026-08-20 15:23:15 +00:00
Add user authentication and Active Directory management features. Includes a new admin UI and Swagger API documentation.
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 705f2157-ef97-4fbd-89e4-8c7f2ecaea90 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7ed01c5f-a82d-405a-b728-b2e3d127c60c/e9f0a10f-e323-455c-82c9-1da4a687f20e.jpg
This commit is contained in:
alphaeusmote
+27
-7
@@ -1,15 +1,35 @@
|
||||
import { Switch, Route } from "wouter";
|
||||
import { queryClient } from "./lib/queryClient";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
import NotFound from "@/pages/not-found";
|
||||
import AuthPage from "@/pages/auth-page";
|
||||
import DashboardPage from "@/pages/dashboard-page";
|
||||
import UsersPage from "@/pages/users-page";
|
||||
import GroupsPage from "@/pages/groups-page";
|
||||
import OUsPage from "@/pages/ous-page";
|
||||
import ComputersPage from "@/pages/computers-page";
|
||||
import DomainsPage from "@/pages/domains-page";
|
||||
import ApiTokensPage from "@/pages/api-tokens-page";
|
||||
import LdapConnectionsPage from "@/pages/ldap-connections-page";
|
||||
import SettingsPage from "@/pages/settings-page";
|
||||
import UserManagementPage from "@/pages/user-management-page";
|
||||
import { ProtectedRoute } from "./lib/protected-route";
|
||||
|
||||
function Router() {
|
||||
return (
|
||||
<Switch>
|
||||
{/* Add pages below */}
|
||||
{/* <Route path="/" component={Home}/> */}
|
||||
{/* Fallback to 404 */}
|
||||
<Route path="/auth">
|
||||
<AuthPage />
|
||||
</Route>
|
||||
<ProtectedRoute path="/" component={DashboardPage} />
|
||||
<ProtectedRoute path="/users" component={UsersPage} />
|
||||
<ProtectedRoute path="/groups" component={GroupsPage} />
|
||||
<ProtectedRoute path="/organizational-units" component={OUsPage} />
|
||||
<ProtectedRoute path="/computers" component={ComputersPage} />
|
||||
<ProtectedRoute path="/domains" component={DomainsPage} />
|
||||
<ProtectedRoute path="/api-tokens" component={ApiTokensPage} />
|
||||
<ProtectedRoute path="/ldap-connections" component={LdapConnectionsPage} />
|
||||
<ProtectedRoute path="/settings" component={SettingsPage} />
|
||||
<ProtectedRoute path="/user-management" component={UserManagementPage} />
|
||||
<Route component={NotFound} />
|
||||
</Switch>
|
||||
);
|
||||
@@ -17,10 +37,10 @@ function Router() {
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<>
|
||||
<Router />
|
||||
<Toaster />
|
||||
</QueryClientProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,113 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
interface ApiRequest {
|
||||
endpoint: string;
|
||||
method: "GET" | "POST" | "PUT" | "DELETE";
|
||||
requests: number;
|
||||
success: number;
|
||||
avgTime: number;
|
||||
}
|
||||
|
||||
// Sample data for display
|
||||
const apiRequests: ApiRequest[] = [
|
||||
{
|
||||
endpoint: "/api/users",
|
||||
method: "GET",
|
||||
requests: 1456,
|
||||
success: 99.3,
|
||||
avgTime: 56,
|
||||
},
|
||||
{
|
||||
endpoint: "/api/groups",
|
||||
method: "GET",
|
||||
requests: 892,
|
||||
success: 100,
|
||||
avgTime: 43,
|
||||
},
|
||||
{
|
||||
endpoint: "/api/users",
|
||||
method: "POST",
|
||||
requests: 512,
|
||||
success: 97.8,
|
||||
avgTime: 87,
|
||||
},
|
||||
{
|
||||
endpoint: "/api/users/{id}",
|
||||
method: "PUT",
|
||||
requests: 342,
|
||||
success: 98.5,
|
||||
avgTime: 64,
|
||||
},
|
||||
{
|
||||
endpoint: "/api/computers",
|
||||
method: "GET",
|
||||
requests: 289,
|
||||
success: 100,
|
||||
avgTime: 38,
|
||||
},
|
||||
];
|
||||
|
||||
const methodColors = {
|
||||
GET: "bg-green-100 text-green-800",
|
||||
POST: "bg-blue-100 text-blue-800",
|
||||
PUT: "bg-amber-100 text-amber-800",
|
||||
DELETE: "bg-red-100 text-red-800",
|
||||
};
|
||||
|
||||
export default function ApiActivityCard() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="px-6 py-4 border-b">
|
||||
<CardTitle>API Activity</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-center space-x-4 mb-4">
|
||||
<div className="flex-1">
|
||||
<div className="bg-muted rounded-full h-2">
|
||||
<div className="bg-primary rounded-full h-2" style={{ width: "75%" }}></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm font-medium">75%</div>
|
||||
</div>
|
||||
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="pb-2 font-medium text-left">Endpoint</th>
|
||||
<th className="pb-2 font-medium text-left">Method</th>
|
||||
<th className="pb-2 font-medium text-left">Requests</th>
|
||||
<th className="pb-2 font-medium text-left">Success</th>
|
||||
<th className="pb-2 font-medium text-left">Avg. Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{apiRequests.map((request, index) => (
|
||||
<tr key={index} className={index < apiRequests.length - 1 ? "border-b" : ""} style={{ height: "48px" }}>
|
||||
<td>{request.endpoint}</td>
|
||||
<td>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`${methodColors[request.method]} border-none`}
|
||||
>
|
||||
{request.method}
|
||||
</Badge>
|
||||
</td>
|
||||
<td>{request.requests.toLocaleString()}</td>
|
||||
<td>{request.success}%</td>
|
||||
<td>{request.avgTime}ms</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
export default function ApiDocumentationCard() {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="px-6 py-4 border-b flex justify-between items-center">
|
||||
<CardTitle>API Documentation</CardTitle>
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-medium text-sm text-primary"
|
||||
onClick={() => window.open("/api/docs", "_blank")}
|
||||
>
|
||||
View Full Documentation
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
<div className="bg-muted rounded-md p-4 font-mono text-sm overflow-x-auto">
|
||||
<pre className="text-xs whitespace-pre-wrap">
|
||||
# Active Directory Management API
|
||||
|
||||
## User Endpoints
|
||||
|
||||
GET /api/users
|
||||
- Query Parameters:
|
||||
- filter: Filter users by property values (e.g. ?filter=name eq 'John')
|
||||
- select: Select specific properties to return (e.g. ?select=id,name,email)
|
||||
- expand: Include related entities (e.g. ?expand=groups)
|
||||
- orderBy: Order results (e.g. ?orderBy=name asc)
|
||||
- top: Limit number of results (e.g. ?top=10)
|
||||
- skip: Skip number of results (e.g. ?skip=10)
|
||||
|
||||
POST /api/users
|
||||
- Create a new user in Active Directory
|
||||
- Request body: User object
|
||||
|
||||
GET /api/users/{id}
|
||||
- Get a specific user by ID
|
||||
- Query Parameters:
|
||||
- select: Select specific properties to return
|
||||
|
||||
PUT /api/users/{id}
|
||||
- Update a specific user
|
||||
- Request body: User object with updated properties
|
||||
|
||||
DELETE /api/users/{id}
|
||||
- Delete a specific user
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="mt-4 flex justify-end">
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-medium text-sm text-primary"
|
||||
onClick={() => window.open("/api/docs", "_blank")}
|
||||
>
|
||||
Go to Swagger Documentation <ArrowRight className="ml-1 h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,217 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import { ApiToken } from "@shared/schema";
|
||||
import { format, formatDistanceToNow } from "date-fns";
|
||||
import { CreateTokenModal } from "@/components/modals/create-token-modal";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
interface ApiTokensCardProps {
|
||||
tokens: ApiToken[];
|
||||
}
|
||||
|
||||
export default function ApiTokensCard({ tokens }: ApiTokensCardProps) {
|
||||
const { toast } = useToast();
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [tokenToDelete, setTokenToDelete] = useState<ApiToken | null>(null);
|
||||
const [expiration, setExpiration] = useState("30");
|
||||
|
||||
const deleteTokenMutation = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
await apiRequest("DELETE", `/api/tokens/${id}`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "Token deleted",
|
||||
description: "The API token has been successfully revoked.",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/tokens"] });
|
||||
setTokenToDelete(null);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to delete token: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const updateExpirationPolicyMutation = useMutation({
|
||||
mutationFn: async (days: string) => {
|
||||
// This would typically update a setting in the backend
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
return days;
|
||||
},
|
||||
onSuccess: (days) => {
|
||||
toast({
|
||||
title: "Policy updated",
|
||||
description: `Token expiration policy updated to ${days === "never" ? "never expire" : `${days} days`}.`,
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to update policy: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDeleteToken = (token: ApiToken) => {
|
||||
setTokenToDelete(token);
|
||||
};
|
||||
|
||||
const confirmDeleteToken = () => {
|
||||
if (tokenToDelete) {
|
||||
deleteTokenMutation.mutate(tokenToDelete.id);
|
||||
}
|
||||
};
|
||||
|
||||
const handleApplyExpiration = () => {
|
||||
updateExpirationPolicyMutation.mutate(expiration);
|
||||
};
|
||||
|
||||
const getCreatedTime = (createdAt: string | null | undefined) => {
|
||||
if (!createdAt) return "";
|
||||
try {
|
||||
return formatDistanceToNow(new Date(createdAt), { addSuffix: true });
|
||||
} catch (e) {
|
||||
return "Unknown";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="px-6 py-4 border-b flex justify-between items-center">
|
||||
<CardTitle>Active API Tokens</CardTitle>
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-medium text-sm text-primary"
|
||||
onClick={() => setIsCreateModalOpen(true)}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Add Token
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="p-4">
|
||||
<div className="space-y-4">
|
||||
{tokens.length === 0 ? (
|
||||
<div className="text-center text-muted-foreground py-4">
|
||||
No active API tokens. Create a token to get started.
|
||||
</div>
|
||||
) : (
|
||||
tokens.slice(0, 3).map((token) => (
|
||||
<div key={token.id} className="p-3 border rounded-md flex justify-between items-center">
|
||||
<div>
|
||||
<div className="font-medium">{token.name}</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Created {getCreatedTime(token.createdAt)}
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
onClick={() => handleDeleteToken(token)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
|
||||
{tokens.length > 3 && (
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full text-sm"
|
||||
onClick={() => window.location.href = "/api-tokens"}
|
||||
>
|
||||
View all {tokens.length} tokens
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="mt-4 pt-4 border-t">
|
||||
<div className="text-sm text-muted-foreground mb-2">Token Expiration Policy</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="flex-1">
|
||||
<Select
|
||||
value={expiration}
|
||||
onValueChange={setExpiration}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select expiration" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="30">30 days</SelectItem>
|
||||
<SelectItem value="60">60 days</SelectItem>
|
||||
<SelectItem value="90">90 days</SelectItem>
|
||||
<SelectItem value="180">180 days</SelectItem>
|
||||
<SelectItem value="never">Never</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleApplyExpiration}
|
||||
disabled={updateExpirationPolicyMutation.isPending}
|
||||
>
|
||||
Apply
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<CreateTokenModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setIsCreateModalOpen(false)}
|
||||
/>
|
||||
|
||||
<AlertDialog open={!!tokenToDelete} onOpenChange={() => setTokenToDelete(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Revoke API Token</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to revoke the API token "{tokenToDelete?.name}"?
|
||||
This action cannot be undone and will immediately invalidate any applications using this token.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteToken}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Revoke
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,180 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { StatusBadge } from "@/components/ui/status-badge";
|
||||
import { Plus, Pencil, Trash2 } from "lucide-react";
|
||||
import { LdapConnection } from "@shared/schema";
|
||||
import { AddLdapModal } from "@/components/modals/add-ldap-modal";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
interface LdapConnectionsCardProps {
|
||||
connections: LdapConnection[];
|
||||
}
|
||||
|
||||
export default function LdapConnectionsCard({ connections }: LdapConnectionsCardProps) {
|
||||
const { toast } = useToast();
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
const [connectionToEdit, setConnectionToEdit] = useState<LdapConnection | null>(null);
|
||||
const [connectionToDelete, setConnectionToDelete] = useState<LdapConnection | null>(null);
|
||||
|
||||
const deleteConnectionMutation = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
await apiRequest("DELETE", `/api/ldap-connections/${id}`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "Connection deleted",
|
||||
description: "The LDAP connection has been successfully deleted.",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/ldap-connections"] });
|
||||
setConnectionToDelete(null);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to delete connection: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleEditConnection = (connection: LdapConnection) => {
|
||||
setConnectionToEdit(connection);
|
||||
setIsAddModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteConnection = (connection: LdapConnection) => {
|
||||
setConnectionToDelete(connection);
|
||||
};
|
||||
|
||||
const confirmDeleteConnection = () => {
|
||||
if (connectionToDelete) {
|
||||
deleteConnectionMutation.mutate(connectionToDelete.id);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader className="px-6 py-4 border-b flex justify-between items-center">
|
||||
<CardTitle>LDAP Connections</CardTitle>
|
||||
<Button
|
||||
variant="link"
|
||||
className="p-0 h-auto font-medium text-sm text-primary"
|
||||
onClick={() => {
|
||||
setConnectionToEdit(null);
|
||||
setIsAddModalOpen(true);
|
||||
}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-1" />
|
||||
Add Connection
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
{connections.length === 0 ? (
|
||||
<div className="text-center text-muted-foreground py-8">
|
||||
No LDAP connections configured. Add a connection to get started.
|
||||
</div>
|
||||
) : (
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<th className="py-3 px-4 font-medium text-left">Connection Name</th>
|
||||
<th className="py-3 px-4 font-medium text-left">Server</th>
|
||||
<th className="py-3 px-4 font-medium text-left">Domain</th>
|
||||
<th className="py-3 px-4 font-medium text-left">Port</th>
|
||||
<th className="py-3 px-4 font-medium text-left">SSL</th>
|
||||
<th className="py-3 px-4 font-medium text-left">Status</th>
|
||||
<th className="py-3 px-4 font-medium text-left">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{connections.map((connection, index) => (
|
||||
<tr key={connection.id} className={index < connections.length - 1 ? "border-b" : ""}>
|
||||
<td className="py-3 px-4">{connection.name}</td>
|
||||
<td className="py-3 px-4">{connection.server}</td>
|
||||
<td className="py-3 px-4">{connection.domain}</td>
|
||||
<td className="py-3 px-4">{connection.port}</td>
|
||||
<td className="py-3 px-4">{connection.useSSL ? "Yes" : "No"}</td>
|
||||
<td className="py-3 px-4">
|
||||
<StatusBadge status={connection.status === "connected" ? "connected" : "disconnected"}>
|
||||
{connection.status === "connected" ? "Connected" : "Disconnected"}
|
||||
</StatusBadge>
|
||||
</td>
|
||||
<td className="py-3 px-4">
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleEditConnection(connection)}
|
||||
className="text-muted-foreground hover:text-primary"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDeleteConnection(connection)}
|
||||
className="text-muted-foreground hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
|
||||
<AddLdapModal
|
||||
isOpen={isAddModalOpen}
|
||||
onClose={() => {
|
||||
setIsAddModalOpen(false);
|
||||
setConnectionToEdit(null);
|
||||
}}
|
||||
connectionToEdit={connectionToEdit}
|
||||
/>
|
||||
|
||||
<AlertDialog open={!!connectionToDelete} onOpenChange={() => setConnectionToDelete(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete LDAP Connection</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete the LDAP connection "{connectionToDelete?.name}"?
|
||||
This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteConnection}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
import React from "react";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { ArrowUpIcon, ArrowDownIcon } from "lucide-react";
|
||||
|
||||
interface StatsCardProps {
|
||||
title: string;
|
||||
value: number;
|
||||
icon: React.ReactNode;
|
||||
iconBgColor: string;
|
||||
iconColor: string;
|
||||
changeValue: number;
|
||||
changeType: "increase" | "decrease" | "nochange";
|
||||
changePeriod: string;
|
||||
}
|
||||
|
||||
export default function StatsCard({
|
||||
title,
|
||||
value,
|
||||
icon,
|
||||
iconBgColor,
|
||||
iconColor,
|
||||
changeValue,
|
||||
changeType,
|
||||
changePeriod,
|
||||
}: StatsCardProps) {
|
||||
return (
|
||||
<Card className="material-card">
|
||||
<CardContent className="p-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">{title}</p>
|
||||
<p className="text-3xl font-medium mt-1">{value.toLocaleString()}</p>
|
||||
</div>
|
||||
<div className={`w-12 h-12 rounded-full ${iconBgColor} flex items-center justify-center ${iconColor}`}>
|
||||
{icon}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 text-sm flex items-center">
|
||||
{changeType === "increase" && (
|
||||
<>
|
||||
<ArrowUpIcon className="h-3 w-3 mr-1 text-green-600" />
|
||||
<span className="text-green-600">{changeValue}% increase</span>
|
||||
<span className="ml-1 text-muted-foreground">{changePeriod}</span>
|
||||
</>
|
||||
)}
|
||||
{changeType === "decrease" && (
|
||||
<>
|
||||
<ArrowDownIcon className="h-3 w-3 mr-1 text-red-600" />
|
||||
<span className="text-red-600">{changeValue}% decrease</span>
|
||||
<span className="ml-1 text-muted-foreground">{changePeriod}</span>
|
||||
</>
|
||||
)}
|
||||
{changeType === "nochange" && (
|
||||
<>
|
||||
<span className="text-muted-foreground">No change</span>
|
||||
<span className="ml-1 text-muted-foreground">{changePeriod}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
import { useEffect } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { insertLdapConnectionSchema, LdapConnection } from "@shared/schema";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
interface AddLdapModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
connectionToEdit?: LdapConnection | null;
|
||||
}
|
||||
|
||||
// Create the form schema based on the insertLdapConnectionSchema
|
||||
const formSchema = insertLdapConnectionSchema;
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function AddLdapModal({ isOpen, onClose, connectionToEdit }: AddLdapModalProps) {
|
||||
const { toast } = useToast();
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
server: "",
|
||||
domain: "",
|
||||
port: 389,
|
||||
useSSL: true,
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
});
|
||||
|
||||
// Update form when editing an existing connection
|
||||
useEffect(() => {
|
||||
if (connectionToEdit) {
|
||||
form.reset({
|
||||
name: connectionToEdit.name,
|
||||
server: connectionToEdit.server,
|
||||
domain: connectionToEdit.domain,
|
||||
port: connectionToEdit.port,
|
||||
useSSL: connectionToEdit.useSSL,
|
||||
username: connectionToEdit.username,
|
||||
password: "", // Don't display the password
|
||||
});
|
||||
} else {
|
||||
form.reset({
|
||||
name: "",
|
||||
server: "",
|
||||
domain: "",
|
||||
port: 389,
|
||||
useSSL: true,
|
||||
username: "",
|
||||
password: "",
|
||||
});
|
||||
}
|
||||
}, [connectionToEdit, form]);
|
||||
|
||||
const saveLdapConnectionMutation = useMutation({
|
||||
mutationFn: async (values: FormValues) => {
|
||||
if (connectionToEdit) {
|
||||
// If we're not changing the password, don't send it (empty password will be ignored on the server)
|
||||
const payload = values.password
|
||||
? values
|
||||
: { ...values, password: undefined };
|
||||
|
||||
await apiRequest("PUT", `/api/ldap-connections/${connectionToEdit.id}`, payload);
|
||||
} else {
|
||||
await apiRequest("POST", "/api/ldap-connections", values);
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: connectionToEdit ? "Connection updated" : "Connection added",
|
||||
description: connectionToEdit
|
||||
? "LDAP connection has been updated successfully."
|
||||
: "New LDAP connection has been added successfully.",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/ldap-connections"] });
|
||||
onClose();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to ${connectionToEdit ? "update" : "add"} LDAP connection: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const testConnectionMutation = useMutation({
|
||||
mutationFn: async (values: FormValues) => {
|
||||
// This is a placeholder - in a real app this would call a test connection endpoint
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
return { success: true };
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "Connection test successful",
|
||||
description: "Successfully connected to the LDAP server.",
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Connection test failed",
|
||||
description: `Failed to connect to the LDAP server: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (values: FormValues) => {
|
||||
saveLdapConnectionMutation.mutate(values);
|
||||
};
|
||||
|
||||
const handleTestConnection = () => {
|
||||
const formValues = form.getValues();
|
||||
if (form.formState.isValid) {
|
||||
testConnectionMutation.mutate(formValues);
|
||||
} else {
|
||||
form.trigger();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={onClose}>
|
||||
<DialogContent className="sm:max-w-[550px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{connectionToEdit ? "Edit LDAP Connection" : "Add LDAP Connection"}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{connectionToEdit
|
||||
? "Update your Active Directory connection settings"
|
||||
: "Configure a new connection to your Active Directory server"}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Connection Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="E.g. Primary Domain Controller" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="server"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Server</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="E.g. dc01.example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="domain"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Domain</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="E.g. example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="port"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Port</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="number"
|
||||
{...field}
|
||||
onChange={e => field.onChange(Number(e.target.value))}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="useSSL"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>SSL</FormLabel>
|
||||
<Select
|
||||
value={field.value ? "yes" : "no"}
|
||||
onValueChange={(value) => field.onChange(value === "yes")}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select SSL option" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="yes">Yes</SelectItem>
|
||||
<SelectItem value="no">No</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="E.g. administrator@example.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>
|
||||
{connectionToEdit ? "Password (leave blank to keep current)" : "Password"}
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Input type="password" placeholder="Enter password" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter className="pt-4">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={onClose}
|
||||
className="mr-auto"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleTestConnection}
|
||||
disabled={testConnectionMutation.isPending}
|
||||
className="mr-2"
|
||||
>
|
||||
{testConnectionMutation.isPending ? "Testing..." : "Test Connection"}
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={saveLdapConnectionMutation.isPending}
|
||||
>
|
||||
{saveLdapConnectionMutation.isPending
|
||||
? "Saving..."
|
||||
: connectionToEdit ? "Update" : "Save"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,300 @@
|
||||
import { useState } from "react";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Card,
|
||||
CardContent
|
||||
} from "@/components/ui/card";
|
||||
import { AlertCircle, Copy } from "lucide-react";
|
||||
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
|
||||
|
||||
interface CreateTokenModalProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1, "Token name is required"),
|
||||
expiration: z.string(),
|
||||
permissions: z.object({
|
||||
users_read: z.boolean().default(true),
|
||||
users_write: z.boolean().default(false),
|
||||
groups_read: z.boolean().default(true),
|
||||
groups_write: z.boolean().default(false),
|
||||
ous_read: z.boolean().default(true),
|
||||
ous_write: z.boolean().default(false),
|
||||
computers_read: z.boolean().default(true),
|
||||
computers_write: z.boolean().default(false),
|
||||
domains_read: z.boolean().default(true),
|
||||
domains_write: z.boolean().default(false),
|
||||
}),
|
||||
});
|
||||
|
||||
type FormValues = z.infer<typeof formSchema>;
|
||||
|
||||
export function CreateTokenModal({ isOpen, onClose }: CreateTokenModalProps) {
|
||||
const { toast } = useToast();
|
||||
const [createdToken, setCreatedToken] = useState<string | null>(null);
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
expiration: "30",
|
||||
permissions: {
|
||||
users_read: true,
|
||||
users_write: false,
|
||||
groups_read: true,
|
||||
groups_write: false,
|
||||
ous_read: true,
|
||||
ous_write: false,
|
||||
computers_read: true,
|
||||
computers_write: false,
|
||||
domains_read: true,
|
||||
domains_write: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
const createTokenMutation = useMutation({
|
||||
mutationFn: async (values: FormValues) => {
|
||||
const expiresAt = values.expiration === "never"
|
||||
? null
|
||||
: new Date(Date.now() + parseInt(values.expiration) * 24 * 60 * 60 * 1000).toISOString();
|
||||
|
||||
const res = await apiRequest("POST", "/api/tokens", {
|
||||
name: values.name,
|
||||
expiresAt,
|
||||
permissions: values.permissions,
|
||||
});
|
||||
|
||||
return await res.json();
|
||||
},
|
||||
onSuccess: (data) => {
|
||||
// Display the token for the user to copy
|
||||
setCreatedToken(data.token);
|
||||
|
||||
// Invalidate the tokens query to refresh the list
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/tokens"] });
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Failed to create token",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = (values: FormValues) => {
|
||||
createTokenMutation.mutate(values);
|
||||
};
|
||||
|
||||
const handleCopyToken = () => {
|
||||
if (createdToken) {
|
||||
navigator.clipboard.writeText(createdToken);
|
||||
toast({
|
||||
title: "Token copied",
|
||||
description: "API token copied to clipboard",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
setCreatedToken(null);
|
||||
form.reset();
|
||||
onClose();
|
||||
};
|
||||
|
||||
const permissionItems = [
|
||||
{ id: "users_read", label: "Users - Read" },
|
||||
{ id: "users_write", label: "Users - Write" },
|
||||
{ id: "groups_read", label: "Groups - Read" },
|
||||
{ id: "groups_write", label: "Groups - Write" },
|
||||
{ id: "ous_read", label: "OUs - Read" },
|
||||
{ id: "ous_write", label: "OUs - Write" },
|
||||
{ id: "computers_read", label: "Computers - Read" },
|
||||
{ id: "computers_write", label: "Computers - Write" },
|
||||
{ id: "domains_read", label: "Domains - Read" },
|
||||
{ id: "domains_write", label: "Domains - Write" },
|
||||
];
|
||||
|
||||
return (
|
||||
<Dialog open={isOpen} onOpenChange={handleClose}>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
{createdToken ? (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>API Token Created</DialogTitle>
|
||||
<DialogDescription>
|
||||
Copy your API token now. For security reasons, it won't be shown again.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="my-4">
|
||||
<Alert variant="warning">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<AlertTitle>Important</AlertTitle>
|
||||
<AlertDescription>
|
||||
Please copy and store this token securely. It will not be displayed again.
|
||||
</AlertDescription>
|
||||
</Alert>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="font-mono text-sm bg-muted p-3 rounded w-full overflow-x-scroll whitespace-nowrap">
|
||||
{createdToken}
|
||||
</div>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="ml-2 flex-shrink-0"
|
||||
onClick={handleCopyToken}
|
||||
>
|
||||
<Copy className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<DialogFooter>
|
||||
<Button onClick={handleClose}>Done</Button>
|
||||
</DialogFooter>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Create API Token</DialogTitle>
|
||||
<DialogDescription>
|
||||
Create a new token to access the AD Management API
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Token Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="E.g. Integration API" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="expiration"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Expiration</FormLabel>
|
||||
<Select
|
||||
value={field.value}
|
||||
onValueChange={field.onChange}
|
||||
>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select token expiration" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem value="7">7 days</SelectItem>
|
||||
<SelectItem value="30">30 days</SelectItem>
|
||||
<SelectItem value="60">60 days</SelectItem>
|
||||
<SelectItem value="90">90 days</SelectItem>
|
||||
<SelectItem value="180">180 days</SelectItem>
|
||||
<SelectItem value="never">Never</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<FormLabel>Permissions</FormLabel>
|
||||
<div className="border rounded-md p-4 mt-1 max-h-48 overflow-y-auto">
|
||||
<div className="space-y-2">
|
||||
{permissionItems.map((item) => (
|
||||
<FormField
|
||||
key={item.id}
|
||||
control={form.control}
|
||||
name={`permissions.${item.id as keyof FormValues["permissions"]}`}
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="font-normal cursor-pointer">
|
||||
{item.label}
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={handleClose}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={createTokenMutation.isPending}
|
||||
>
|
||||
{createTokenMutation.isPending ? "Creating..." : "Create Token"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
ChevronLeft,
|
||||
ChevronRight,
|
||||
ChevronsLeft,
|
||||
ChevronsRight,
|
||||
Search,
|
||||
SlidersHorizontal
|
||||
} from "lucide-react";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
interface DataTableColumn<T> {
|
||||
header: string;
|
||||
accessorKey: keyof T | ((row: T) => React.ReactNode);
|
||||
cell?: (row: T) => React.ReactNode;
|
||||
}
|
||||
|
||||
interface DataTableProps<T> {
|
||||
data: T[];
|
||||
columns: DataTableColumn<T>[];
|
||||
isLoading?: boolean;
|
||||
onRowClick?: (row: T) => void;
|
||||
searchable?: boolean;
|
||||
filterable?: boolean;
|
||||
pagination?: {
|
||||
pageSize: number;
|
||||
pageIndex: number;
|
||||
pageCount: number;
|
||||
onPageChange: (page: number) => void;
|
||||
onPageSizeChange: (size: number) => void;
|
||||
};
|
||||
}
|
||||
|
||||
export function DataTable<T>({
|
||||
data,
|
||||
columns,
|
||||
isLoading = false,
|
||||
onRowClick,
|
||||
searchable = false,
|
||||
filterable = false,
|
||||
pagination,
|
||||
}: DataTableProps<T>) {
|
||||
const [searchTerm, setSearchTerm] = React.useState("");
|
||||
|
||||
// Simple filtering based on searchTerm matching any string property
|
||||
const filteredData = React.useMemo(() => {
|
||||
if (!searchTerm) return data;
|
||||
|
||||
return data.filter(row => {
|
||||
return Object.entries(row as Record<string, any>).some(([key, value]) => {
|
||||
if (typeof value === 'string') {
|
||||
return value.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
}
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}, [data, searchTerm]);
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{(searchable || filterable) && (
|
||||
<div className="flex flex-col sm:flex-row gap-2 mb-4">
|
||||
{searchable && (
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Search..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{filterable && (
|
||||
<Button variant="outline" className="sm:w-auto w-full">
|
||||
<SlidersHorizontal className="mr-2 h-4 w-4" />
|
||||
Filters
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="rounded-md border overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{columns.map((column, i) => (
|
||||
<TableHead key={i} className="bg-muted/50 font-medium">
|
||||
{column.header}
|
||||
</TableHead>
|
||||
))}
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{isLoading ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
Loading...
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : filteredData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
No results found.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
filteredData.map((row, i) => (
|
||||
<TableRow
|
||||
key={i}
|
||||
onClick={() => onRowClick?.(row)}
|
||||
className={onRowClick ? "cursor-pointer hover:bg-muted/50" : undefined}
|
||||
>
|
||||
{columns.map((column, j) => (
|
||||
<TableCell key={j}>
|
||||
{column.cell
|
||||
? column.cell(row)
|
||||
: typeof column.accessorKey === "function"
|
||||
? column.accessorKey(row)
|
||||
: (row[column.accessorKey] as React.ReactNode)}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
{pagination && (
|
||||
<div className="flex items-center justify-between py-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Rows per page:
|
||||
</p>
|
||||
<Select
|
||||
value={pagination.pageSize.toString()}
|
||||
onValueChange={(value) => pagination.onPageSizeChange(Number(value))}
|
||||
>
|
||||
<SelectTrigger className="h-8 w-[70px]">
|
||||
<SelectValue placeholder={pagination.pageSize} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{[10, 20, 30, 40, 50].map((size) => (
|
||||
<SelectItem key={size} value={size.toString()}>
|
||||
{size}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Page {pagination.pageIndex + 1} of {pagination.pageCount}
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => pagination.onPageChange(0)}
|
||||
disabled={pagination.pageIndex === 0}
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => pagination.onPageChange(pagination.pageIndex - 1)}
|
||||
disabled={pagination.pageIndex === 0}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => pagination.onPageChange(pagination.pageIndex + 1)}
|
||||
disabled={pagination.pageIndex === pagination.pageCount - 1}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
onClick={() => pagination.onPageChange(pagination.pageCount - 1)}
|
||||
disabled={pagination.pageIndex === pagination.pageCount - 1}
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type StatusBadgeProps = {
|
||||
status: "connected" | "disconnected" | "success" | "error" | "warning" | "info";
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export function StatusBadge({ status, children, className }: StatusBadgeProps) {
|
||||
const statusStyles = {
|
||||
connected: "bg-green-100 text-green-800 before:bg-green-500",
|
||||
disconnected: "bg-red-100 text-red-800 before:bg-red-500",
|
||||
success: "bg-green-100 text-green-800 before:bg-green-500",
|
||||
error: "bg-red-100 text-red-800 before:bg-red-500",
|
||||
warning: "bg-amber-100 text-amber-800 before:bg-amber-500",
|
||||
info: "bg-blue-100 text-blue-800 before:bg-blue-500",
|
||||
};
|
||||
|
||||
return (
|
||||
<span
|
||||
className={cn(
|
||||
"inline-flex items-center rounded-full px-2 py-1 text-xs font-medium before:mr-1 before:h-2 before:w-2 before:rounded-full before:content-['']",
|
||||
statusStyles[status],
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,119 @@
|
||||
import { createContext, ReactNode, useContext } from "react";
|
||||
import {
|
||||
useQuery,
|
||||
useMutation,
|
||||
UseMutationResult,
|
||||
} from "@tanstack/react-query";
|
||||
import { insertUserSchema, User as SelectUser, InsertUser } from "@shared/schema";
|
||||
import { getQueryFn, apiRequest, queryClient } from "../lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
type AuthContextType = {
|
||||
user: SelectUser | null;
|
||||
isLoading: boolean;
|
||||
error: Error | null;
|
||||
loginMutation: UseMutationResult<SelectUser, Error, LoginData>;
|
||||
logoutMutation: UseMutationResult<void, Error, void>;
|
||||
registerMutation: UseMutationResult<SelectUser, Error, InsertUser>;
|
||||
};
|
||||
|
||||
type LoginData = Pick<InsertUser, "username" | "password">;
|
||||
|
||||
export const AuthContext = createContext<AuthContextType | null>(null);
|
||||
|
||||
export function AuthProvider({ children }: { children: ReactNode }) {
|
||||
const { toast } = useToast();
|
||||
const {
|
||||
data: user,
|
||||
error,
|
||||
isLoading,
|
||||
} = useQuery<SelectUser | null, Error>({
|
||||
queryKey: ["/api/user"],
|
||||
queryFn: getQueryFn({ on401: "returnNull" }),
|
||||
});
|
||||
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: async (credentials: LoginData) => {
|
||||
const res = await apiRequest("POST", "/api/login", credentials);
|
||||
return await res.json();
|
||||
},
|
||||
onSuccess: (user: SelectUser) => {
|
||||
queryClient.setQueryData(["/api/user"], user);
|
||||
toast({
|
||||
title: "Login successful",
|
||||
description: `Welcome back, ${user.username}!`,
|
||||
});
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: "Login failed",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const registerMutation = useMutation({
|
||||
mutationFn: async (credentials: InsertUser) => {
|
||||
const res = await apiRequest("POST", "/api/register", credentials);
|
||||
return await res.json();
|
||||
},
|
||||
onSuccess: (user: SelectUser) => {
|
||||
queryClient.setQueryData(["/api/user"], user);
|
||||
toast({
|
||||
title: "Registration successful",
|
||||
description: `Welcome, ${user.username}!`,
|
||||
});
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: "Registration failed",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const logoutMutation = useMutation({
|
||||
mutationFn: async () => {
|
||||
await apiRequest("POST", "/api/logout");
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.setQueryData(["/api/user"], null);
|
||||
toast({
|
||||
title: "Logged out",
|
||||
description: "You have been successfully logged out.",
|
||||
});
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: "Logout failed",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<AuthContext.Provider
|
||||
value={{
|
||||
user: user ?? null,
|
||||
isLoading,
|
||||
error,
|
||||
loginMutation,
|
||||
logoutMutation,
|
||||
registerMutation,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AuthContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useAuth() {
|
||||
const context = useContext(AuthContext);
|
||||
if (!context) {
|
||||
throw new Error("useAuth must be used within an AuthProvider");
|
||||
}
|
||||
return context;
|
||||
}
|
||||
@@ -2,7 +2,7 @@ import * as React from "react"
|
||||
|
||||
const MOBILE_BREAKPOINT = 768
|
||||
|
||||
export function useIsMobile() {
|
||||
export function useMobile() {
|
||||
const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
|
||||
|
||||
React.useEffect(() => {
|
||||
|
||||
+106
-3
@@ -3,11 +3,114 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 96%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 100%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--popover: 0 0% 100%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 40% 96.1%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--accent: 210 40% 96.1%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 84.2% 60.2%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--ring: 221.2 83.2% 53.3%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
|
||||
--chart-1: 221.2 83.2% 53.3%;
|
||||
--chart-2: 292.2 84.1% 60.6%;
|
||||
--chart-3: 31.5 91.7% 48.8%;
|
||||
--chart-4: 182.9 75.4% 52.7%;
|
||||
--chart-5: 355.7 100% 54.7%;
|
||||
|
||||
--sidebar-background: 0 0% 100%;
|
||||
--sidebar-foreground: 240 10% 3.9%;
|
||||
--sidebar-primary: 221.2 83.2% 53.3%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 240 5.9% 90%;
|
||||
--sidebar-ring: 142.1 76.2% 36.3%;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: 20 14.3% 4.1%;
|
||||
--foreground: 0 0% 95%;
|
||||
|
||||
--card: 24 9.8% 10%;
|
||||
--card-foreground: 0 0% 95%;
|
||||
|
||||
--popover: 0 0% 9%;
|
||||
--popover-foreground: 0 0% 95%;
|
||||
|
||||
--primary: 221.2 83.2% 53.3%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 240 3.7% 15.9%;
|
||||
--secondary-foreground: 0 0% 98%;
|
||||
|
||||
--muted: 0 0% 15%;
|
||||
--muted-foreground: 240 5% 64.9%;
|
||||
|
||||
--accent: 12 6.5% 15.1%;
|
||||
--accent-foreground: 0 0% 98%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 0 85.7% 97.3%;
|
||||
|
||||
--border: 240 3.7% 15.9%;
|
||||
--input: 240 3.7% 15.9%;
|
||||
--ring: 142.4 71.8% 29.2%;
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
@apply font-sans antialiased bg-background text-foreground;
|
||||
@apply bg-background text-foreground;
|
||||
font-feature-settings: "rlig" 1, "calt" 1;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-item.active {
|
||||
@apply bg-opacity-10 bg-primary text-primary border-l-2 border-primary;
|
||||
}
|
||||
|
||||
.drawer-item:hover:not(.active) {
|
||||
@apply bg-muted;
|
||||
}
|
||||
|
||||
.material-card {
|
||||
@apply bg-card rounded shadow-sm hover:shadow transition-shadow duration-200;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
@apply inline-flex items-center rounded-full px-2 py-1 text-xs font-medium;
|
||||
}
|
||||
|
||||
.status-badge-connected {
|
||||
@apply bg-green-100 text-green-800;
|
||||
}
|
||||
|
||||
.status-badge-disconnected {
|
||||
@apply bg-red-100 text-red-800;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,221 @@
|
||||
import React, { useState } from "react";
|
||||
import { Link, useLocation } from "wouter";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu";
|
||||
import {
|
||||
ChevronDown,
|
||||
LogOut,
|
||||
Menu,
|
||||
Bell,
|
||||
HelpCircle,
|
||||
User,
|
||||
Settings,
|
||||
Home,
|
||||
Users,
|
||||
UserPlus,
|
||||
FolderClosed,
|
||||
Monitor,
|
||||
Globe,
|
||||
Key,
|
||||
Server,
|
||||
ShieldAlert,
|
||||
} from "lucide-react";
|
||||
import { useMobile } from "@/hooks/use-mobile";
|
||||
|
||||
type MenuItem = {
|
||||
title: string;
|
||||
path: string;
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
|
||||
type MenuSection = {
|
||||
title: string;
|
||||
items: MenuItem[];
|
||||
};
|
||||
|
||||
const menuSections: MenuSection[] = [
|
||||
{
|
||||
title: "Active Directory",
|
||||
items: [
|
||||
{ title: "Users", path: "/users", icon: <Users className="h-4 w-4" /> },
|
||||
{ title: "Groups", path: "/groups", icon: <UserPlus className="h-4 w-4" /> },
|
||||
{ title: "Organizational Units", path: "/organizational-units", icon: <FolderClosed className="h-4 w-4" /> },
|
||||
{ title: "Computers", path: "/computers", icon: <Monitor className="h-4 w-4" /> },
|
||||
{ title: "Domains", path: "/domains", icon: <Globe className="h-4 w-4" /> },
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Administration",
|
||||
items: [
|
||||
{ title: "API Tokens", path: "/api-tokens", icon: <Key className="h-4 w-4" /> },
|
||||
{ title: "LDAP Connections", path: "/ldap-connections", icon: <Server className="h-4 w-4" /> },
|
||||
{ title: "Settings", path: "/settings", icon: <Settings className="h-4 w-4" /> },
|
||||
{ title: "User Management", path: "/user-management", icon: <ShieldAlert className="h-4 w-4" /> },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
interface DashboardLayoutProps {
|
||||
children: React.ReactNode;
|
||||
title: string;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export function DashboardLayout({ children, title, description }: DashboardLayoutProps) {
|
||||
const [location] = useLocation();
|
||||
const { user, logoutMutation } = useAuth();
|
||||
const isMobile = useMobile();
|
||||
const [sidebarOpen, setSidebarOpen] = useState(!isMobile);
|
||||
|
||||
const handleLogout = () => {
|
||||
logoutMutation.mutate();
|
||||
};
|
||||
|
||||
// Get user initials for avatar
|
||||
const getInitials = () => {
|
||||
if (!user) return "U";
|
||||
|
||||
if (user.fullName) {
|
||||
const nameParts = user.fullName.split(" ");
|
||||
if (nameParts.length > 1) {
|
||||
return `${nameParts[0][0]}${nameParts[nameParts.length - 1][0]}`.toUpperCase();
|
||||
}
|
||||
return nameParts[0][0].toUpperCase();
|
||||
}
|
||||
|
||||
return user.username[0].toUpperCase();
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-background">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`w-64 h-full bg-white shadow-md z-10 flex-shrink-0 transition-all duration-300 ease-in-out ${
|
||||
sidebarOpen ? "" : "-ml-64"
|
||||
} ${isMobile ? "absolute" : "relative"}`}
|
||||
>
|
||||
<div className="h-16 flex items-center px-4 border-b">
|
||||
<Link href="/">
|
||||
<a className="font-medium text-lg text-primary">AD Management API</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="overflow-y-auto h-[calc(100%-64px)]">
|
||||
<div className="px-2 pt-4">
|
||||
<Link href="/">
|
||||
<a
|
||||
className={`drawer-item px-4 py-2 flex items-center space-x-3 rounded cursor-pointer ${
|
||||
location === "/" ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
<Home className="h-4 w-4" />
|
||||
<span>Dashboard</span>
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
{menuSections.map((section, idx) => (
|
||||
<div key={idx}>
|
||||
<div className="mt-6 mb-2 px-4 text-xs font-medium text-muted-foreground uppercase tracking-wider">
|
||||
{section.title}
|
||||
</div>
|
||||
|
||||
{section.items.map((item, itemIdx) => (
|
||||
<Link href={item.path} key={itemIdx}>
|
||||
<a
|
||||
className={`drawer-item px-4 py-2 flex items-center space-x-3 rounded cursor-pointer ${
|
||||
location === item.path ? "active" : ""
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Top App Bar */}
|
||||
<header className="h-16 bg-white shadow-sm flex items-center justify-between px-4 z-10">
|
||||
<div className="flex items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="lg:hidden"
|
||||
>
|
||||
<Menu className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button variant="ghost" size="icon">
|
||||
<HelpCircle className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<Button variant="ghost" size="icon">
|
||||
<Bell className="h-5 w-5" />
|
||||
</Button>
|
||||
|
||||
<Separator orientation="vertical" className="h-8" />
|
||||
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="flex items-center space-x-2">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className="bg-primary text-white">
|
||||
{getInitials()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm hidden md:inline-block">{user?.username}</span>
|
||||
<ChevronDown className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>My Account</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem>
|
||||
<User className="mr-2 h-4 w-4" />
|
||||
<span>Profile</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem>
|
||||
<Settings className="mr-2 h-4 w-4" />
|
||||
<span>Settings</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleLogout}>
|
||||
<LogOut className="mr-2 h-4 w-4" />
|
||||
<span>Log out</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 overflow-y-auto p-6 bg-background">
|
||||
<div className="mb-6">
|
||||
<h1 className="text-2xl font-medium text-gray-800">{title}</h1>
|
||||
{description && <p className="text-gray-600">{description}</p>}
|
||||
</div>
|
||||
|
||||
{children}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Redirect, Route } from "wouter";
|
||||
|
||||
export function ProtectedRoute({
|
||||
path,
|
||||
component: Component,
|
||||
}: {
|
||||
path: string;
|
||||
component: () => React.JSX.Element;
|
||||
}) {
|
||||
const { user, isLoading } = useAuth();
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Route path={path}>
|
||||
<div className="flex items-center justify-center min-h-screen">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
</Route>
|
||||
);
|
||||
}
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<Route path={path}>
|
||||
<Redirect to="/auth" />
|
||||
</Route>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Route path={path}>
|
||||
<Component />
|
||||
</Route>
|
||||
);
|
||||
}
|
||||
+10
-1
@@ -1,5 +1,14 @@
|
||||
import { createRoot } from "react-dom/client";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import App from "./App";
|
||||
import "./index.css";
|
||||
import { AuthProvider } from "./hooks/use-auth";
|
||||
import { queryClient } from "./lib/queryClient";
|
||||
|
||||
createRoot(document.getElementById("root")!).render(<App />);
|
||||
createRoot(document.getElementById("root")!).render(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<AuthProvider>
|
||||
<App />
|
||||
</AuthProvider>
|
||||
</QueryClientProvider>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,154 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import { ApiToken } from "@shared/schema";
|
||||
import { format } from "date-fns";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { CreateTokenModal } from "@/components/modals/create-token-modal";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
export default function ApiTokensPage() {
|
||||
const { toast } = useToast();
|
||||
const [isCreateModalOpen, setIsCreateModalOpen] = useState(false);
|
||||
const [tokenToDelete, setTokenToDelete] = useState<ApiToken | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const { data: tokens = [], isLoading } = useQuery<ApiToken[]>({
|
||||
queryKey: ["/api/tokens"],
|
||||
});
|
||||
|
||||
const deleteTokenMutation = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
await apiRequest("DELETE", `/api/tokens/${id}`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "Token deleted",
|
||||
description: "The API token has been successfully revoked.",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/tokens"] });
|
||||
setTokenToDelete(null);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to delete token: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleDeleteToken = (token: ApiToken) => {
|
||||
setTokenToDelete(token);
|
||||
};
|
||||
|
||||
const confirmDeleteToken = () => {
|
||||
if (tokenToDelete) {
|
||||
deleteTokenMutation.mutate(tokenToDelete.id);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Name",
|
||||
accessorKey: "name",
|
||||
},
|
||||
{
|
||||
header: "Created",
|
||||
accessorKey: "createdAt",
|
||||
cell: (row: ApiToken) => row.createdAt ? format(new Date(row.createdAt), 'MMM dd, yyyy') : '',
|
||||
},
|
||||
{
|
||||
header: "Expires",
|
||||
accessorKey: "expiresAt",
|
||||
cell: (row: ApiToken) => row.expiresAt ? format(new Date(row.expiresAt), 'MMM dd, yyyy') : 'Never',
|
||||
},
|
||||
{
|
||||
header: "Actions",
|
||||
accessorKey: (row: ApiToken) => (
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteToken(row);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="API Tokens" description="Manage API Tokens for accessing the AD Management API">
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Create and manage API tokens for accessing the AD Management API programmatically.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsCreateModalOpen(true)}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Token
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={tokens}
|
||||
columns={columns}
|
||||
isLoading={isLoading}
|
||||
searchable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(tokens.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
|
||||
<CreateTokenModal
|
||||
isOpen={isCreateModalOpen}
|
||||
onClose={() => setIsCreateModalOpen(false)}
|
||||
/>
|
||||
|
||||
<AlertDialog open={!!tokenToDelete} onOpenChange={() => setTokenToDelete(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Revoke API Token</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to revoke the API token "{tokenToDelete?.name}"?
|
||||
This action cannot be undone and will immediately invalidate any applications using this token.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteToken}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Revoke
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,435 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useLocation } from "wouter";
|
||||
import { z } from "zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from "@/components/ui/card";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { insertUserSchema } from "@shared/schema";
|
||||
import { apiRequest } from "@/lib/queryClient";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
// Login form schema
|
||||
const loginSchema = z.object({
|
||||
username: z.string().min(1, "Username is required"),
|
||||
password: z.string().min(1, "Password is required"),
|
||||
rememberMe: z.boolean().optional(),
|
||||
});
|
||||
|
||||
type LoginFormValues = z.infer<typeof loginSchema>;
|
||||
|
||||
// Registration form schema
|
||||
const registerSchema = insertUserSchema.extend({
|
||||
confirmPassword: z.string().min(1, "Password confirmation is required"),
|
||||
acceptTerms: z.boolean().refine(val => val === true, {
|
||||
message: "You must accept the terms and conditions",
|
||||
}),
|
||||
}).refine(data => data.password === data.confirmPassword, {
|
||||
message: "Passwords do not match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
type RegisterFormValues = z.infer<typeof registerSchema>;
|
||||
|
||||
export default function AuthPage() {
|
||||
const [location, navigate] = useLocation();
|
||||
const { toast } = useToast();
|
||||
const [isChecking, setIsChecking] = useState(true);
|
||||
|
||||
// Check if user is already logged in
|
||||
useEffect(() => {
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await fetch('/api/user', {
|
||||
credentials: 'include'
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
// User is already logged in, redirect to home
|
||||
navigate('/');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error checking auth status:', error);
|
||||
} finally {
|
||||
setIsChecking(false);
|
||||
}
|
||||
};
|
||||
|
||||
checkAuth();
|
||||
}, [navigate]);
|
||||
|
||||
// Login mutation
|
||||
const loginMutation = useMutation({
|
||||
mutationFn: async (credentials: LoginFormValues) => {
|
||||
const res = await apiRequest("POST", "/api/login", credentials);
|
||||
return await res.json();
|
||||
},
|
||||
onSuccess: (user) => {
|
||||
toast({
|
||||
title: "Login successful",
|
||||
description: `Welcome back, ${user.username}!`,
|
||||
});
|
||||
navigate('/');
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: "Login failed",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Register mutation
|
||||
const registerMutation = useMutation({
|
||||
mutationFn: async (credentials: any) => {
|
||||
const res = await apiRequest("POST", "/api/register", credentials);
|
||||
return await res.json();
|
||||
},
|
||||
onSuccess: (user) => {
|
||||
toast({
|
||||
title: "Registration successful",
|
||||
description: `Welcome, ${user.username}!`,
|
||||
});
|
||||
navigate('/');
|
||||
},
|
||||
onError: (error: Error) => {
|
||||
toast({
|
||||
title: "Registration failed",
|
||||
description: error.message,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Login form
|
||||
const loginForm = useForm<LoginFormValues>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Register form
|
||||
const registerForm = useForm<RegisterFormValues>({
|
||||
resolver: zodResolver(registerSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
email: "",
|
||||
fullName: "",
|
||||
acceptTerms: false,
|
||||
},
|
||||
});
|
||||
|
||||
// Handle login form submission
|
||||
const onLoginSubmit = (data: LoginFormValues) => {
|
||||
const { username, password } = data;
|
||||
loginMutation.mutate({ username, password });
|
||||
};
|
||||
|
||||
// Handle register form submission
|
||||
const onRegisterSubmit = (data: RegisterFormValues) => {
|
||||
// Remove confirmPassword and acceptTerms which aren't part of the API request
|
||||
const { confirmPassword, acceptTerms, ...registerData } = data;
|
||||
registerMutation.mutate(registerData);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen bg-background">
|
||||
<div className="flex flex-col justify-center flex-1 px-4 py-12 sm:px-6 lg:flex-none lg:px-20 xl:px-24">
|
||||
<div className="w-full max-w-sm mx-auto lg:w-96">
|
||||
<div className="text-center mb-8">
|
||||
<h2 className="text-2xl font-bold text-gray-900">Active Directory Management API</h2>
|
||||
<p className="mt-2 text-sm text-gray-600">
|
||||
A comprehensive solution for managing your Active Directory resources
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="login">
|
||||
<TabsList className="grid w-full grid-cols-2 mb-6">
|
||||
<TabsTrigger value="login">Login</TabsTrigger>
|
||||
<TabsTrigger value="register">Register</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="login">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Login to your account</CardTitle>
|
||||
<CardDescription>
|
||||
Enter your credentials to access the dashboard
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...loginForm}>
|
||||
<form onSubmit={loginForm.handleSubmit(onLoginSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={loginForm.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter your username"
|
||||
{...field}
|
||||
disabled={loginMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={loginForm.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
{...field}
|
||||
disabled={loginMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<FormField
|
||||
control={loginForm.control}
|
||||
name="rememberMe"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-center space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
disabled={loginMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormLabel className="text-sm font-normal">
|
||||
Remember me
|
||||
</FormLabel>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button variant="link" className="text-sm p-0 h-auto" disabled={loginMutation.isPending}>
|
||||
Forgot password?
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={loginMutation.isPending}
|
||||
>
|
||||
{loginMutation.isPending ? "Logging in..." : "Log in"}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="register">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Create a new account</CardTitle>
|
||||
<CardDescription>
|
||||
Fill out the form to register a new account
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Form {...registerForm}>
|
||||
<form onSubmit={registerForm.handleSubmit(onRegisterSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={registerForm.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Choose a username"
|
||||
{...field}
|
||||
disabled={registerMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={registerForm.control}
|
||||
name="fullName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter your full name"
|
||||
{...field}
|
||||
disabled={registerMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={registerForm.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="email"
|
||||
placeholder="Enter your email"
|
||||
{...field}
|
||||
disabled={registerMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={registerForm.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Create a password"
|
||||
{...field}
|
||||
disabled={registerMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={registerForm.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Confirm your password"
|
||||
{...field}
|
||||
disabled={registerMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={registerForm.control}
|
||||
name="acceptTerms"
|
||||
render={({ field }) => (
|
||||
<FormItem className="flex flex-row items-start space-x-2 space-y-0">
|
||||
<FormControl>
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={field.onChange}
|
||||
disabled={registerMutation.isPending}
|
||||
/>
|
||||
</FormControl>
|
||||
<div className="space-y-1 leading-none">
|
||||
<FormLabel className="text-sm font-normal">
|
||||
I accept the terms and conditions
|
||||
</FormLabel>
|
||||
<FormMessage />
|
||||
</div>
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={registerMutation.isPending}
|
||||
>
|
||||
{registerMutation.isPending ? "Creating account..." : "Create account"}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative hidden w-0 flex-1 lg:block">
|
||||
<div className="absolute inset-0 bg-primary flex items-center justify-center">
|
||||
<div className="max-w-lg p-8 text-white">
|
||||
<h2 className="text-4xl font-bold mb-6">Active Directory Management API</h2>
|
||||
<ul className="space-y-4 text-lg">
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2 inline-block w-6 h-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-sm">✓</span>
|
||||
Complete CRUD operations for AD resources
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2 inline-block w-6 h-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-sm">✓</span>
|
||||
Comprehensive API with Swagger documentation
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2 inline-block w-6 h-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-sm">✓</span>
|
||||
Flexible filtering and property selection
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2 inline-block w-6 h-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-sm">✓</span>
|
||||
Secure API token management
|
||||
</li>
|
||||
<li className="flex items-center">
|
||||
<span className="mr-2 inline-block w-6 h-6 bg-white bg-opacity-20 rounded-full flex items-center justify-center text-sm">✓</span>
|
||||
Intuitive and responsive admin interface
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { StatusBadge } from "@/components/ui/status-badge";
|
||||
import { Plus, FileDown, FileUp } from "lucide-react";
|
||||
import { AdComputer, LdapConnection } from "@shared/schema";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { format } from "date-fns";
|
||||
|
||||
export default function ComputersPage() {
|
||||
const [selectedConnection, setSelectedConnection] = useState<number | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const { data: connections = [], isLoading: isLoadingConnections } = useQuery<LdapConnection[]>({
|
||||
queryKey: ["/api/ldap-connections"],
|
||||
});
|
||||
|
||||
const { data: computers = [], isLoading: isLoadingComputers } = useQuery<AdComputer[]>({
|
||||
queryKey: [
|
||||
`/api/connections/${selectedConnection}/ad-computers`,
|
||||
{ select: "id,name,distinguishedName,dnsHostName,operatingSystem,operatingSystemVersion,lastLogon,enabled" }
|
||||
],
|
||||
enabled: !!selectedConnection,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Name",
|
||||
accessorKey: "name",
|
||||
},
|
||||
{
|
||||
header: "DNS Host Name",
|
||||
accessorKey: "dnsHostName",
|
||||
},
|
||||
{
|
||||
header: "Operating System",
|
||||
accessorKey: (row: AdComputer) =>
|
||||
row.operatingSystem ?
|
||||
`${row.operatingSystem}${row.operatingSystemVersion ? ` (${row.operatingSystemVersion})` : ''}` :
|
||||
'Unknown',
|
||||
},
|
||||
{
|
||||
header: "Status",
|
||||
accessorKey: "enabled",
|
||||
cell: (row: AdComputer) => (
|
||||
row.enabled ?
|
||||
<StatusBadge status="connected">Enabled</StatusBadge> :
|
||||
<StatusBadge status="disconnected">Disabled</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Last Logon",
|
||||
accessorKey: "lastLogon",
|
||||
cell: (row: AdComputer) => row.lastLogon ? format(new Date(row.lastLogon), 'MMM dd, yyyy') : 'Never',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Computers" description="Manage Active Directory Computers">
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4 justify-between items-start">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{connections.map((connection) => (
|
||||
<Badge
|
||||
key={connection.id}
|
||||
variant={selectedConnection === connection.id ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setSelectedConnection(connection.id)}
|
||||
>
|
||||
{connection.name}
|
||||
</Badge>
|
||||
))}
|
||||
{connections.length === 0 && !isLoadingConnections && (
|
||||
<div className="text-muted-foreground">
|
||||
No LDAP connections available. Add a connection first.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<FileDown className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<FileUp className="h-4 w-4 mr-2" />
|
||||
Import
|
||||
</Button>
|
||||
<Button size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Computer
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={computers}
|
||||
columns={columns}
|
||||
isLoading={isLoadingComputers || isLoadingConnections}
|
||||
searchable
|
||||
filterable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(computers.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import StatsCard from "@/components/dashboard/stats-card";
|
||||
import ApiActivityCard from "@/components/dashboard/api-activity-card";
|
||||
import ApiTokensCard from "@/components/dashboard/api-tokens-card";
|
||||
import LdapConnectionsCard from "@/components/dashboard/ldap-connections-card";
|
||||
import ApiDocumentationCard from "@/components/dashboard/api-documentation-card";
|
||||
import {
|
||||
Users,
|
||||
UserPlus,
|
||||
FolderClosed,
|
||||
Monitor
|
||||
} from "lucide-react";
|
||||
import { LdapConnection, ApiToken } from "@shared/schema";
|
||||
|
||||
export default function DashboardPage() {
|
||||
const { data: connections = [] } = useQuery<LdapConnection[]>({
|
||||
queryKey: ["/api/ldap-connections"],
|
||||
});
|
||||
|
||||
const { data: tokens = [] } = useQuery<ApiToken[]>({
|
||||
queryKey: ["/api/tokens"],
|
||||
});
|
||||
|
||||
return (
|
||||
<DashboardLayout
|
||||
title="Dashboard"
|
||||
description="Active Directory Management API Overview"
|
||||
>
|
||||
{/* Statistics Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
|
||||
<StatsCard
|
||||
title="Total Users"
|
||||
value={1284}
|
||||
icon={<Users className="h-5 w-5" />}
|
||||
iconBgColor="bg-blue-100"
|
||||
iconColor="text-primary"
|
||||
changeValue={4.75}
|
||||
changeType="increase"
|
||||
changePeriod="from last month"
|
||||
/>
|
||||
|
||||
<StatsCard
|
||||
title="Total Groups"
|
||||
value={87}
|
||||
icon={<UserPlus className="h-5 w-5" />}
|
||||
iconBgColor="bg-purple-100"
|
||||
iconColor="text-purple-600"
|
||||
changeValue={2.3}
|
||||
changeType="increase"
|
||||
changePeriod="from last month"
|
||||
/>
|
||||
|
||||
<StatsCard
|
||||
title="Organizational Units"
|
||||
value={32}
|
||||
icon={<FolderClosed className="h-5 w-5" />}
|
||||
iconBgColor="bg-amber-100"
|
||||
iconColor="text-amber-600"
|
||||
changeValue={0}
|
||||
changeType="nochange"
|
||||
changePeriod="from last month"
|
||||
/>
|
||||
|
||||
<StatsCard
|
||||
title="Total Computers"
|
||||
value={563}
|
||||
icon={<Monitor className="h-5 w-5" />}
|
||||
iconBgColor="bg-teal-100"
|
||||
iconColor="text-teal-600"
|
||||
changeValue={1.2}
|
||||
changeType="decrease"
|
||||
changePeriod="from last month"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
{/* API Activity Card */}
|
||||
<div className="lg:col-span-2">
|
||||
<ApiActivityCard />
|
||||
</div>
|
||||
|
||||
{/* Active API Tokens */}
|
||||
<div>
|
||||
<ApiTokensCard tokens={tokens} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* LDAP Connections */}
|
||||
<div className="mt-6">
|
||||
<LdapConnectionsCard connections={connections} />
|
||||
</div>
|
||||
|
||||
{/* API Documentation Preview */}
|
||||
<div className="mt-6">
|
||||
<ApiDocumentationCard />
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, FileDown, FileUp } from "lucide-react";
|
||||
import { AdDomain, LdapConnection } from "@shared/schema";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function DomainsPage() {
|
||||
const [selectedConnection, setSelectedConnection] = useState<number | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const { data: connections = [], isLoading: isLoadingConnections } = useQuery<LdapConnection[]>({
|
||||
queryKey: ["/api/ldap-connections"],
|
||||
});
|
||||
|
||||
const { data: domains = [], isLoading: isLoadingDomains } = useQuery<AdDomain[]>({
|
||||
queryKey: [
|
||||
`/api/connections/${selectedConnection}/ad-domains`,
|
||||
{ select: "id,name,distinguishedName,netBIOSName,forestName,domainFunctionality" }
|
||||
],
|
||||
enabled: !!selectedConnection,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Domain Name",
|
||||
accessorKey: "name",
|
||||
},
|
||||
{
|
||||
header: "NetBIOS Name",
|
||||
accessorKey: "netBIOSName",
|
||||
},
|
||||
{
|
||||
header: "Forest Name",
|
||||
accessorKey: "forestName",
|
||||
},
|
||||
{
|
||||
header: "Functionality Level",
|
||||
accessorKey: "domainFunctionality",
|
||||
},
|
||||
{
|
||||
header: "Distinguished Name",
|
||||
accessorKey: "distinguishedName",
|
||||
cell: (row: AdDomain) => (
|
||||
<div className="max-w-md truncate" title={row.distinguishedName}>
|
||||
{row.distinguishedName}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Domains" description="Manage Active Directory Domains">
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4 justify-between items-start">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{connections.map((connection) => (
|
||||
<Badge
|
||||
key={connection.id}
|
||||
variant={selectedConnection === connection.id ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setSelectedConnection(connection.id)}
|
||||
>
|
||||
{connection.name}
|
||||
</Badge>
|
||||
))}
|
||||
{connections.length === 0 && !isLoadingConnections && (
|
||||
<div className="text-muted-foreground">
|
||||
No LDAP connections available. Add a connection first.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<FileDown className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<FileUp className="h-4 w-4 mr-2" />
|
||||
Import
|
||||
</Button>
|
||||
<Button size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Domain
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={domains}
|
||||
columns={columns}
|
||||
isLoading={isLoadingDomains || isLoadingConnections}
|
||||
searchable
|
||||
filterable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(domains.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, FileDown, FileUp } from "lucide-react";
|
||||
import { AdGroup, LdapConnection } from "@shared/schema";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function GroupsPage() {
|
||||
const [selectedConnection, setSelectedConnection] = useState<number | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const { data: connections = [], isLoading: isLoadingConnections } = useQuery<LdapConnection[]>({
|
||||
queryKey: ["/api/ldap-connections"],
|
||||
});
|
||||
|
||||
const { data: groups = [], isLoading: isLoadingGroups } = useQuery<AdGroup[]>({
|
||||
queryKey: [
|
||||
`/api/connections/${selectedConnection}/ad-groups`,
|
||||
{ select: "id,sAMAccountName,distinguishedName,description,groupType" }
|
||||
],
|
||||
enabled: !!selectedConnection,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Group Name",
|
||||
accessorKey: "sAMAccountName",
|
||||
},
|
||||
{
|
||||
header: "Description",
|
||||
accessorKey: "description",
|
||||
},
|
||||
{
|
||||
header: "Group Type",
|
||||
accessorKey: "groupType",
|
||||
},
|
||||
{
|
||||
header: "Distinguished Name",
|
||||
accessorKey: "distinguishedName",
|
||||
cell: (row: AdGroup) => (
|
||||
<div className="max-w-md truncate" title={row.distinguishedName}>
|
||||
{row.distinguishedName}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Groups" description="Manage Active Directory Groups">
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4 justify-between items-start">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{connections.map((connection) => (
|
||||
<Badge
|
||||
key={connection.id}
|
||||
variant={selectedConnection === connection.id ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setSelectedConnection(connection.id)}
|
||||
>
|
||||
{connection.name}
|
||||
</Badge>
|
||||
))}
|
||||
{connections.length === 0 && !isLoadingConnections && (
|
||||
<div className="text-muted-foreground">
|
||||
No LDAP connections available. Add a connection first.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<FileDown className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<FileUp className="h-4 w-4 mr-2" />
|
||||
Import
|
||||
</Button>
|
||||
<Button size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Group
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={groups}
|
||||
columns={columns}
|
||||
isLoading={isLoadingGroups || isLoadingConnections}
|
||||
searchable
|
||||
filterable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(groups.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,199 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { StatusBadge } from "@/components/ui/status-badge";
|
||||
import { Plus, Pencil, Trash2 } from "lucide-react";
|
||||
import { LdapConnection } from "@shared/schema";
|
||||
import { format } from "date-fns";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { AddLdapModal } from "@/components/modals/add-ldap-modal";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
export default function LdapConnectionsPage() {
|
||||
const { toast } = useToast();
|
||||
const [isAddModalOpen, setIsAddModalOpen] = useState(false);
|
||||
const [connectionToEdit, setConnectionToEdit] = useState<LdapConnection | null>(null);
|
||||
const [connectionToDelete, setConnectionToDelete] = useState<LdapConnection | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const { data: connections = [], isLoading } = useQuery<LdapConnection[]>({
|
||||
queryKey: ["/api/ldap-connections"],
|
||||
});
|
||||
|
||||
const deleteConnectionMutation = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
await apiRequest("DELETE", `/api/ldap-connections/${id}`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "Connection deleted",
|
||||
description: "The LDAP connection has been successfully deleted.",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/ldap-connections"] });
|
||||
setConnectionToDelete(null);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to delete connection: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleEditConnection = (connection: LdapConnection) => {
|
||||
setConnectionToEdit(connection);
|
||||
setIsAddModalOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteConnection = (connection: LdapConnection) => {
|
||||
setConnectionToDelete(connection);
|
||||
};
|
||||
|
||||
const confirmDeleteConnection = () => {
|
||||
if (connectionToDelete) {
|
||||
deleteConnectionMutation.mutate(connectionToDelete.id);
|
||||
}
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Connection Name",
|
||||
accessorKey: "name",
|
||||
},
|
||||
{
|
||||
header: "Server",
|
||||
accessorKey: "server",
|
||||
},
|
||||
{
|
||||
header: "Domain",
|
||||
accessorKey: "domain",
|
||||
},
|
||||
{
|
||||
header: "Port",
|
||||
accessorKey: "port",
|
||||
},
|
||||
{
|
||||
header: "SSL",
|
||||
accessorKey: "useSSL",
|
||||
cell: (row: LdapConnection) => row.useSSL ? "Yes" : "No",
|
||||
},
|
||||
{
|
||||
header: "Status",
|
||||
accessorKey: "status",
|
||||
cell: (row: LdapConnection) => (
|
||||
<StatusBadge status={row.status === "connected" ? "connected" : "disconnected"}>
|
||||
{row.status === "connected" ? "Connected" : "Disconnected"}
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Last Connected",
|
||||
accessorKey: "lastConnected",
|
||||
cell: (row: LdapConnection) => row.lastConnected ? format(new Date(row.lastConnected), 'MMM dd, yyyy HH:mm') : 'Never',
|
||||
},
|
||||
{
|
||||
header: "Actions",
|
||||
accessorKey: (row: LdapConnection) => (
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEditConnection(row);
|
||||
}}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteConnection(row);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="LDAP Connections" description="Manage connections to Active Directory Servers">
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Set up and manage connections to your Active Directory servers.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => {
|
||||
setConnectionToEdit(null);
|
||||
setIsAddModalOpen(true);
|
||||
}}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add Connection
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={connections}
|
||||
columns={columns}
|
||||
isLoading={isLoading}
|
||||
searchable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(connections.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
|
||||
<AddLdapModal
|
||||
isOpen={isAddModalOpen}
|
||||
onClose={() => {
|
||||
setIsAddModalOpen(false);
|
||||
setConnectionToEdit(null);
|
||||
}}
|
||||
connectionToEdit={connectionToEdit}
|
||||
/>
|
||||
|
||||
<AlertDialog open={!!connectionToDelete} onOpenChange={() => setConnectionToDelete(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete LDAP Connection</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete the LDAP connection "{connectionToDelete?.name}"?
|
||||
This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteConnection}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,99 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, FileDown, FileUp } from "lucide-react";
|
||||
import { AdOrgUnit, LdapConnection } from "@shared/schema";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
|
||||
export default function OUsPage() {
|
||||
const [selectedConnection, setSelectedConnection] = useState<number | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const { data: connections = [], isLoading: isLoadingConnections } = useQuery<LdapConnection[]>({
|
||||
queryKey: ["/api/ldap-connections"],
|
||||
});
|
||||
|
||||
const { data: orgUnits = [], isLoading: isLoadingOUs } = useQuery<AdOrgUnit[]>({
|
||||
queryKey: [
|
||||
`/api/connections/${selectedConnection}/ad-org-units`,
|
||||
{ select: "id,name,distinguishedName,description" }
|
||||
],
|
||||
enabled: !!selectedConnection,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Name",
|
||||
accessorKey: "name",
|
||||
},
|
||||
{
|
||||
header: "Description",
|
||||
accessorKey: "description",
|
||||
},
|
||||
{
|
||||
header: "Distinguished Name",
|
||||
accessorKey: "distinguishedName",
|
||||
cell: (row: AdOrgUnit) => (
|
||||
<div className="max-w-md truncate" title={row.distinguishedName}>
|
||||
{row.distinguishedName}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Organizational Units" description="Manage Active Directory Organizational Units">
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4 justify-between items-start">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{connections.map((connection) => (
|
||||
<Badge
|
||||
key={connection.id}
|
||||
variant={selectedConnection === connection.id ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setSelectedConnection(connection.id)}
|
||||
>
|
||||
{connection.name}
|
||||
</Badge>
|
||||
))}
|
||||
{connections.length === 0 && !isLoadingConnections && (
|
||||
<div className="text-muted-foreground">
|
||||
No LDAP connections available. Add a connection first.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<FileDown className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<FileUp className="h-4 w-4 mr-2" />
|
||||
Import
|
||||
</Button>
|
||||
<Button size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add OU
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={orgUnits}
|
||||
columns={columns}
|
||||
isLoading={isLoadingOUs || isLoadingConnections}
|
||||
searchable
|
||||
filterable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(orgUnits.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,291 @@
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
|
||||
export default function SettingsPage() {
|
||||
return (
|
||||
<DashboardLayout title="Settings" description="Configure your AD Management API application">
|
||||
<Tabs defaultValue="general">
|
||||
<TabsList className="mb-6">
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="security">Security</TabsTrigger>
|
||||
<TabsTrigger value="api">API</TabsTrigger>
|
||||
<TabsTrigger value="notifications">Notifications</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="general">
|
||||
<div className="grid gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>General Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure general application settings
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="app-name">Application Name</Label>
|
||||
<Input id="app-name" defaultValue="Active Directory Management API" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Theme</Label>
|
||||
<RadioGroup defaultValue="light">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="light" id="light" />
|
||||
<Label htmlFor="light">Light</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="dark" id="dark" />
|
||||
<Label htmlFor="dark">Dark</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="system" id="system" />
|
||||
<Label htmlFor="system">System</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Language</Label>
|
||||
<Select defaultValue="en">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select language" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="en">English</SelectItem>
|
||||
<SelectItem value="fr">French</SelectItem>
|
||||
<SelectItem value="de">German</SelectItem>
|
||||
<SelectItem value="es">Spanish</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Date Format</Label>
|
||||
<Select defaultValue="mdy">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select date format" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="mdy">MM/DD/YYYY</SelectItem>
|
||||
<SelectItem value="dmy">DD/MM/YYYY</SelectItem>
|
||||
<SelectItem value="ymd">YYYY/MM/DD</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>Show Help Tips</Label>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Show contextual help and tooltips throughout the application
|
||||
</div>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="security">
|
||||
<div className="grid gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Security Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure security related settings
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="session-timeout">Session Timeout (minutes)</Label>
|
||||
<Input id="session-timeout" type="number" defaultValue="30" />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>Two-Factor Authentication</Label>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Require two-factor authentication for all users
|
||||
</div>
|
||||
</div>
|
||||
<Switch />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>HTTPS Only</Label>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Enforce HTTPS for all connections
|
||||
</div>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Password Policy</Label>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="min-length" className="text-sm font-normal">Minimum Length</Label>
|
||||
<Input id="min-length" type="number" defaultValue="8" className="w-20" />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="require-uppercase" className="text-sm font-normal">Require Uppercase</Label>
|
||||
<Switch id="require-uppercase" defaultChecked />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="require-numbers" className="text-sm font-normal">Require Numbers</Label>
|
||||
<Switch id="require-numbers" defaultChecked />
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="require-symbols" className="text-sm font-normal">Require Symbols</Label>
|
||||
<Switch id="require-symbols" defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="api">
|
||||
<div className="grid gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>API Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure API related settings
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="rate-limit">Rate Limit (requests per minute)</Label>
|
||||
<Input id="rate-limit" type="number" defaultValue="100" />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>Default Token Expiration</Label>
|
||||
<Select defaultValue="30">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select expiration" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="7">7 days</SelectItem>
|
||||
<SelectItem value="30">30 days</SelectItem>
|
||||
<SelectItem value="60">60 days</SelectItem>
|
||||
<SelectItem value="90">90 days</SelectItem>
|
||||
<SelectItem value="never">Never</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>Enable API Documentation</Label>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Make Swagger documentation publicly accessible
|
||||
</div>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>CORS</Label>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Enable Cross-Origin Resource Sharing
|
||||
</div>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="allowed-origins">Allowed Origins</Label>
|
||||
<Input id="allowed-origins" defaultValue="*" />
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Comma-separated list of allowed origins, or * for all origins
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="notifications">
|
||||
<div className="grid gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Notification Settings</CardTitle>
|
||||
<CardDescription>
|
||||
Configure how notifications are handled
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="space-y-0.5">
|
||||
<Label>Email Notifications</Label>
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Send notifications via email
|
||||
</div>
|
||||
</div>
|
||||
<Switch defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email-address">Email Address</Label>
|
||||
<Input id="email-address" type="email" defaultValue="admin@example.com" />
|
||||
</div>
|
||||
|
||||
<Separator />
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-sm font-medium">Notification Types</h3>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="notify-login" className="text-sm font-normal">Login Attempts</Label>
|
||||
<Switch id="notify-login" defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="notify-api-token" className="text-sm font-normal">API Token Creation/Deletion</Label>
|
||||
<Switch id="notify-api-token" defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="notify-ldap" className="text-sm font-normal">LDAP Connection Changes</Label>
|
||||
<Switch id="notify-ldap" defaultChecked />
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="notify-user" className="text-sm font-normal">User Management</Label>
|
||||
<Switch id="notify-user" defaultChecked />
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
|
||||
<div className="mt-6 flex justify-end">
|
||||
<Button variant="outline" className="mr-2">Cancel</Button>
|
||||
<Button>Save Changes</Button>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,450 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery, useMutation } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Plus, Pencil, Trash2, Shield, ShieldOff } from "lucide-react";
|
||||
import { User } from "@shared/schema";
|
||||
import { format } from "date-fns";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { apiRequest, queryClient } from "@/lib/queryClient";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { z } from "zod";
|
||||
import { insertUserSchema } from "@shared/schema";
|
||||
|
||||
// User form schema
|
||||
const userFormSchema = insertUserSchema.extend({
|
||||
confirmPassword: z.string().optional(),
|
||||
id: z.number().optional(),
|
||||
}).refine(data => {
|
||||
// If password is provided, confirmPassword must match
|
||||
if (data.password && data.confirmPassword) {
|
||||
return data.password === data.confirmPassword;
|
||||
}
|
||||
return true;
|
||||
}, {
|
||||
message: "Passwords do not match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
type UserFormValues = z.infer<typeof userFormSchema>;
|
||||
|
||||
export default function UserManagementPage() {
|
||||
const { toast } = useToast();
|
||||
const [isAddDialogOpen, setIsAddDialogOpen] = useState(false);
|
||||
const [userToEdit, setUserToEdit] = useState<User | null>(null);
|
||||
const [userToDelete, setUserToDelete] = useState<User | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const form = useForm<UserFormValues>({
|
||||
resolver: zodResolver(userFormSchema),
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
email: "",
|
||||
fullName: "",
|
||||
role: "user",
|
||||
},
|
||||
});
|
||||
|
||||
const { data: users = [], isLoading } = useQuery<User[]>({
|
||||
queryKey: ["/api/users"],
|
||||
});
|
||||
|
||||
const createUserMutation = useMutation({
|
||||
mutationFn: async (values: UserFormValues) => {
|
||||
const { confirmPassword, id, ...userData } = values;
|
||||
if (id) {
|
||||
// Update existing user
|
||||
await apiRequest("PUT", `/api/users/${id}`, userData);
|
||||
} else {
|
||||
// Create new user
|
||||
await apiRequest("POST", "/api/register", userData);
|
||||
}
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: userToEdit ? "User updated" : "User created",
|
||||
description: userToEdit
|
||||
? "The user has been successfully updated."
|
||||
: "The user has been successfully created.",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/users"] });
|
||||
setIsAddDialogOpen(false);
|
||||
setUserToEdit(null);
|
||||
form.reset();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to ${userToEdit ? "update" : "create"} user: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const deleteUserMutation = useMutation({
|
||||
mutationFn: async (id: number) => {
|
||||
await apiRequest("DELETE", `/api/users/${id}`);
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast({
|
||||
title: "User deleted",
|
||||
description: "The user has been successfully deleted.",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["/api/users"] });
|
||||
setUserToDelete(null);
|
||||
},
|
||||
onError: (error) => {
|
||||
toast({
|
||||
title: "Error",
|
||||
description: `Failed to delete user: ${error.message}`,
|
||||
variant: "destructive",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleAddUser = () => {
|
||||
form.reset({
|
||||
username: "",
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
email: "",
|
||||
fullName: "",
|
||||
role: "user",
|
||||
});
|
||||
setUserToEdit(null);
|
||||
setIsAddDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleEditUser = (user: User) => {
|
||||
form.reset({
|
||||
id: user.id,
|
||||
username: user.username,
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
email: user.email || "",
|
||||
fullName: user.fullName || "",
|
||||
role: user.role || "user",
|
||||
});
|
||||
setUserToEdit(user);
|
||||
setIsAddDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDeleteUser = (user: User) => {
|
||||
setUserToDelete(user);
|
||||
};
|
||||
|
||||
const confirmDeleteUser = () => {
|
||||
if (userToDelete) {
|
||||
deleteUserMutation.mutate(userToDelete.id);
|
||||
}
|
||||
};
|
||||
|
||||
const onSubmit = (values: UserFormValues) => {
|
||||
createUserMutation.mutate(values);
|
||||
};
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Username",
|
||||
accessorKey: "username",
|
||||
},
|
||||
{
|
||||
header: "Full Name",
|
||||
accessorKey: "fullName",
|
||||
},
|
||||
{
|
||||
header: "Email",
|
||||
accessorKey: "email",
|
||||
},
|
||||
{
|
||||
header: "Role",
|
||||
accessorKey: "role",
|
||||
cell: (row: User) => (
|
||||
<Badge variant={row.role === "admin" ? "default" : "secondary"}>
|
||||
{row.role || "user"}
|
||||
</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Created",
|
||||
accessorKey: "createdAt",
|
||||
cell: (row: User) => row.createdAt ? format(new Date(row.createdAt), 'MMM dd, yyyy') : '',
|
||||
},
|
||||
{
|
||||
header: "Actions",
|
||||
accessorKey: (row: User) => (
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleEditUser(row);
|
||||
}}
|
||||
title="Edit user"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
{row.role === "admin" ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// Make user regular instead of admin
|
||||
}}
|
||||
title="Remove admin privileges"
|
||||
>
|
||||
<ShieldOff className="h-4 w-4 text-amber-600" />
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// Make user admin
|
||||
}}
|
||||
title="Make admin"
|
||||
>
|
||||
<Shield className="h-4 w-4 text-muted-foreground" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleDeleteUser(row);
|
||||
}}
|
||||
title="Delete user"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
</Button>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="User Management" description="Manage application users and permissions">
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Manage users who can access the AD Management admin interface.
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={handleAddUser}>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add User
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={users}
|
||||
columns={columns}
|
||||
isLoading={isLoading}
|
||||
searchable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(users.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
|
||||
<Dialog open={isAddDialogOpen} onOpenChange={setIsAddDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>{userToEdit ? "Edit User" : "Add New User"}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{userToEdit
|
||||
? "Update user information and permissions."
|
||||
: "Fill in the details to create a new user."}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<Form {...form}>
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Username</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
placeholder="Enter username"
|
||||
{...field}
|
||||
disabled={!!userToEdit}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="fullName"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter full name" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="Enter email" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="role"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Role</FormLabel>
|
||||
<FormControl>
|
||||
<select
|
||||
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
||||
{...field}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="admin">Admin</option>
|
||||
</select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{userToEdit ? "New Password (optional)" : "Password"}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder={userToEdit ? "Leave blank to keep current" : "Enter password"}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>{userToEdit ? "Confirm New Password" : "Confirm Password"}</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="Confirm password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setIsAddDialogOpen(false);
|
||||
setUserToEdit(null);
|
||||
form.reset();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button type="submit" disabled={createUserMutation.isPending}>
|
||||
{createUserMutation.isPending
|
||||
? "Saving..."
|
||||
: userToEdit ? "Update User" : "Create User"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<AlertDialog open={!!userToDelete} onOpenChange={() => setUserToDelete(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete User</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to delete the user "{userToDelete?.username}"?
|
||||
This action cannot be undone.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={confirmDeleteUser}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
Delete
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
import { useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { DashboardLayout } from "@/layouts/dashboard-layout";
|
||||
import { DataTable } from "@/components/ui/data-table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { StatusBadge } from "@/components/ui/status-badge";
|
||||
import { Plus, FileDown, FileUp } from "lucide-react";
|
||||
import { AdUser, LdapConnection } from "@shared/schema";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { format } from "date-fns";
|
||||
|
||||
export default function UsersPage() {
|
||||
const [selectedConnection, setSelectedConnection] = useState<number | null>(null);
|
||||
const [pageIndex, setPageIndex] = useState(0);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
|
||||
const { data: connections = [], isLoading: isLoadingConnections } = useQuery<LdapConnection[]>({
|
||||
queryKey: ["/api/ldap-connections"],
|
||||
});
|
||||
|
||||
const { data: users = [], isLoading: isLoadingUsers } = useQuery<AdUser[]>({
|
||||
queryKey: [
|
||||
`/api/connections/${selectedConnection}/ad-users`,
|
||||
{ select: "id,sAMAccountName,distinguishedName,givenName,surname,email,enabled,lastLogon" }
|
||||
],
|
||||
enabled: !!selectedConnection,
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
header: "Username",
|
||||
accessorKey: "sAMAccountName",
|
||||
},
|
||||
{
|
||||
header: "Name",
|
||||
accessorKey: (row: AdUser) =>
|
||||
(row.givenName && row.surname)
|
||||
? `${row.givenName} ${row.surname}`
|
||||
: row.displayName || row.sAMAccountName,
|
||||
},
|
||||
{
|
||||
header: "Email",
|
||||
accessorKey: "email",
|
||||
},
|
||||
{
|
||||
header: "Status",
|
||||
accessorKey: "enabled",
|
||||
cell: (row: AdUser) => (
|
||||
row.enabled ?
|
||||
<StatusBadge status="connected">Enabled</StatusBadge> :
|
||||
<StatusBadge status="disconnected">Disabled</StatusBadge>
|
||||
),
|
||||
},
|
||||
{
|
||||
header: "Last Logon",
|
||||
accessorKey: "lastLogon",
|
||||
cell: (row: AdUser) => row.lastLogon ? format(new Date(row.lastLogon), 'MMM dd, yyyy') : 'Never',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<DashboardLayout title="Users" description="Manage Active Directory Users">
|
||||
<div className="mb-6 flex flex-col sm:flex-row gap-4 justify-between items-start">
|
||||
<div className="flex gap-2 flex-wrap">
|
||||
{connections.map((connection) => (
|
||||
<Badge
|
||||
key={connection.id}
|
||||
variant={selectedConnection === connection.id ? "default" : "outline"}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setSelectedConnection(connection.id)}
|
||||
>
|
||||
{connection.name}
|
||||
</Badge>
|
||||
))}
|
||||
{connections.length === 0 && !isLoadingConnections && (
|
||||
<div className="text-muted-foreground">
|
||||
No LDAP connections available. Add a connection first.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button size="sm" variant="outline">
|
||||
<FileDown className="h-4 w-4 mr-2" />
|
||||
Export
|
||||
</Button>
|
||||
<Button size="sm" variant="outline">
|
||||
<FileUp className="h-4 w-4 mr-2" />
|
||||
Import
|
||||
</Button>
|
||||
<Button size="sm">
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add User
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
data={users}
|
||||
columns={columns}
|
||||
isLoading={isLoadingUsers || isLoadingConnections}
|
||||
searchable
|
||||
filterable
|
||||
pagination={{
|
||||
pageIndex,
|
||||
pageSize,
|
||||
pageCount: Math.ceil(users.length / pageSize),
|
||||
onPageChange: setPageIndex,
|
||||
onPageSizeChange: setPageSize,
|
||||
}}
|
||||
/>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user