mirror of
https://github.com/freedbygrace/DynamoDNS.git
synced 2026-08-31 20:58:05 +00:00
Enhance API token management and role display. Improved token expiration options and made role cards collapsible.
Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/ce8616db-dc72-462d-9d34-1ac938bbce4c.jpg
This commit is contained in:
@@ -76,6 +76,8 @@ const tokenFormSchema = z.object({
|
|||||||
name: z.string().min(1, "Token name is required"),
|
name: z.string().min(1, "Token name is required"),
|
||||||
role: z.string().min(1, "Role is required"),
|
role: z.string().min(1, "Role is required"),
|
||||||
expiresIn: z.string().optional(),
|
expiresIn: z.string().optional(),
|
||||||
|
customDate: z.date().optional(),
|
||||||
|
customTime: z.string().optional(),
|
||||||
});
|
});
|
||||||
|
|
||||||
export default function ApiTokensPage() {
|
export default function ApiTokensPage() {
|
||||||
|
|||||||
+83
-57
@@ -18,6 +18,11 @@ import {
|
|||||||
CardHeader,
|
CardHeader,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
} from "@/components/ui/card";
|
} from "@/components/ui/card";
|
||||||
|
import {
|
||||||
|
Collapsible,
|
||||||
|
CollapsibleContent,
|
||||||
|
CollapsibleTrigger,
|
||||||
|
} from "@/components/ui/collapsible";
|
||||||
import {
|
import {
|
||||||
Dialog,
|
Dialog,
|
||||||
DialogContent,
|
DialogContent,
|
||||||
@@ -141,30 +146,38 @@ type RoleFormValues = z.infer<typeof roleFormSchema>;
|
|||||||
|
|
||||||
// System role card component
|
// System role card component
|
||||||
const SystemRoleCard = ({ roleName }: { roleName: SystemRole }) => {
|
const SystemRoleCard = ({ roleName }: { roleName: SystemRole }) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className="mb-4">
|
<Card className="mb-4">
|
||||||
<CardHeader>
|
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
||||||
<CardTitle className="flex items-center gap-2">
|
<CardHeader className="pb-2">
|
||||||
<ShieldAlert className="h-5 w-5 text-primary" />
|
<CollapsibleTrigger className="w-full text-left">
|
||||||
{roleName.charAt(0).toUpperCase() + roleName.slice(1)}
|
<CardTitle className="flex items-center gap-2">
|
||||||
<Badge variant="outline" className="ml-2">System</Badge>
|
<ShieldAlert className="h-5 w-5 text-primary" />
|
||||||
</CardTitle>
|
{roleName.charAt(0).toUpperCase() + roleName.slice(1)}
|
||||||
<CardDescription>
|
<Badge variant="outline" className="ml-2">System</Badge>
|
||||||
{roleName === "admin" && "Full access to all system features and settings"}
|
</CardTitle>
|
||||||
{roleName === "manager" && "Manage domains, records, and access to organizational resources"}
|
<CardDescription>
|
||||||
{roleName === "user" && "Standard user with ability to view and modify specific resources"}
|
{roleName === "admin" && "Full access to all system features and settings"}
|
||||||
{roleName === "readonly" && "View-only access to resources without modification permissions"}
|
{roleName === "manager" && "Manage domains, records, and access to organizational resources"}
|
||||||
</CardDescription>
|
{roleName === "user" && "Standard user with ability to view and modify specific resources"}
|
||||||
</CardHeader>
|
{roleName === "readonly" && "View-only access to resources without modification permissions"}
|
||||||
<CardContent>
|
</CardDescription>
|
||||||
<div className="flex flex-wrap gap-2">
|
</CollapsibleTrigger>
|
||||||
{systemRolePermissions[roleName].map((permission) => (
|
</CardHeader>
|
||||||
<Badge key={permission} variant="secondary" className="mb-1">
|
<CollapsibleContent>
|
||||||
{availablePermissions.find(p => p.id === permission)?.label || permission}
|
<CardContent>
|
||||||
</Badge>
|
<div className="flex flex-wrap gap-2">
|
||||||
))}
|
{systemRolePermissions[roleName].map((permission) => (
|
||||||
</div>
|
<Badge key={permission} variant="secondary" className="mb-1">
|
||||||
</CardContent>
|
{availablePermissions.find(p => p.id === permission)?.label || permission}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
@@ -350,41 +363,54 @@ export default function RolesPage() {
|
|||||||
</Card>
|
</Card>
|
||||||
) : (
|
) : (
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
{customRoles.map((role: CustomRole) => (
|
{customRoles.map((role: CustomRole) => {
|
||||||
<Card key={role.id} className="mb-4">
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
<CardHeader>
|
return (
|
||||||
<div className="flex justify-between items-start">
|
<Card key={role.id} className="mb-4">
|
||||||
<div>
|
<Collapsible open={isOpen} onOpenChange={setIsOpen}>
|
||||||
<CardTitle className="flex items-center gap-2">
|
<CardHeader className="pb-2">
|
||||||
<ShieldCheck className="h-5 w-5 text-primary" />
|
<div className="flex justify-between items-start">
|
||||||
{role.name}
|
<CollapsibleTrigger className="text-left flex-1">
|
||||||
<Badge variant="secondary" className="ml-2">Custom</Badge>
|
<CardTitle className="flex items-center gap-2">
|
||||||
</CardTitle>
|
<ShieldCheck className="h-5 w-5 text-primary" />
|
||||||
{role.description && (
|
{role.name}
|
||||||
<CardDescription>{role.description}</CardDescription>
|
<Badge variant="secondary" className="ml-2">Custom</Badge>
|
||||||
)}
|
</CardTitle>
|
||||||
</div>
|
{role.description && (
|
||||||
<div className="flex space-x-2">
|
<CardDescription>{role.description}</CardDescription>
|
||||||
<Button variant="ghost" size="icon" onClick={() => handleEditRole(role)}>
|
)}
|
||||||
<Edit className="h-4 w-4" />
|
</CollapsibleTrigger>
|
||||||
</Button>
|
<div className="flex space-x-2">
|
||||||
<Button variant="ghost" size="icon" onClick={() => handleDeleteRole(role)}>
|
<Button variant="ghost" size="icon" onClick={(e) => {
|
||||||
<Trash2 className="h-4 w-4 text-destructive" />
|
e.stopPropagation();
|
||||||
</Button>
|
handleEditRole(role);
|
||||||
</div>
|
}}>
|
||||||
</div>
|
<Edit className="h-4 w-4" />
|
||||||
</CardHeader>
|
</Button>
|
||||||
<CardContent>
|
<Button variant="ghost" size="icon" onClick={(e) => {
|
||||||
<div className="flex flex-wrap gap-2">
|
e.stopPropagation();
|
||||||
{role.permissions.map((permission) => (
|
handleDeleteRole(role);
|
||||||
<Badge key={permission} variant="secondary" className="mb-1">
|
}}>
|
||||||
{availablePermissions.find(p => p.id === permission)?.label || permission}
|
<Trash2 className="h-4 w-4 text-destructive" />
|
||||||
</Badge>
|
</Button>
|
||||||
))}
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</CardContent>
|
</CardHeader>
|
||||||
</Card>
|
<CollapsibleContent>
|
||||||
))}
|
<CardContent>
|
||||||
|
<div className="flex flex-wrap gap-2">
|
||||||
|
{role.permissions.map((permission) => (
|
||||||
|
<Badge key={permission} variant="secondary" className="mb-1">
|
||||||
|
{availablePermissions.find(p => p.id === permission)?.label || permission}
|
||||||
|
</Badge>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</CollapsibleContent>
|
||||||
|
</Collapsible>
|
||||||
|
</Card>
|
||||||
|
);
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user