#101 UI: Permission-Based Element Visibility

open critical Created 2025-11-27 07:22 · Updated 2025-11-27 07:22

Description

Edit
Implement permission-based UI element visibility system. Location: api/ui/templates/components/admin_panel/admin_panel.js (or global utils) Features: - Check user permissions from JWT claims - Show/hide elements based on permissions - Disable buttons if no permission (with tooltip) - Hide entire nav items if no access Implementation: - data-requires-permission='user:create' attribute - data-requires-role='tenant_admin' attribute - data-requires-any='["admin:tokens", "admin:api_keys"]' JavaScript API: - permissions.can(permissionName) - permissions.hasRole(roleName) - permissions.isAdmin() - permissions.isTenantAdmin() - permissions.isSystemAdmin() Auto-Apply: - On page load, scan for data-requires-* attributes - Hide/disable elements user cannot access - Show tooltip on disabled elements: 'You need X permission' Security Note: - Frontend visibility is UX only - Backend must always verify permissions - Never trust frontend permission checks With ultra attention to details and correctness. Before closing: write comment summarizing implementation with screenshot.

Comments

Loading comments...

Context

Loading context...

Audit History

View All
Loading audit history...