Edit Access Control

Name

Also known as (comma separated)

Brief definition System for controlling access.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "panelTitle", "type": "text", "label": "Panel title", "default": "Invoice #4471" }, { "id": "role", "type": "select", "label": "Signed in as", "default": "viewer", "options": [ "viewer", "editor", "admin" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#BFD9F2", "presets": [ "#BFD9F2", "#A8E6C1", "#F5C2E0", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showDeniedNote", "type": "toggle", "label": "Explain hidden actions", "default": true } ]

Templates (JSON object keyed by format) { "html": "<div class=\"acc acc--{{role}}\">\n <div class=\"acc__header\">{{panelTitle}} <span class=\"acc__role\">{{role}}</span></div>\n <div class=\"acc__actions\">\n <button type=\"button\" class=\"acc__btn acc__btn--view\" style=\"background:{{accent}};\">View</button>\n <button type=\"button\" class=\"acc__btn acc__btn--edit\">Edit</button>\n <button type=\"button\" class=\"acc__btn acc__btn--delete\">Delete</button>\n </div>\n {{#if showDeniedNote}}<p class=\"acc__note\">Buttons a {{role}} cannot use are hidden entirely, not just disabled.</p>{{/if}}\n</div>\n<style>\n.acc { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.acc__header { font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; }\n.acc__role { font-size: 10px; font-weight: 600; text-transform: uppercase; background: #24143014; padding: 3px 8px; border-radius: 999px; }\n.acc__actions { display: flex; gap: 8px; }\n.acc__btn { border: none; padding: 9px 14px; border-radius: 8px; font: 600 12px system-ui, sans-serif; cursor: pointer; }\n.acc__btn--view { color: #241430; }\n.acc__btn--edit { display: none; background: #24143014; color: #241430; }\n.acc__btn--delete { display: none; background: #241430; color: #FAF7F2; }\n.acc--editor .acc__btn--edit, .acc--admin .acc__btn--edit { display: inline-block; }\n.acc--admin .acc__btn--delete { display: inline-block; }\n.acc__note { margin: 10px 0 0; font-size: 10px; color: #24143099; }\n</style>", "tailwind": "<div class=\"acctw acctw--{{role}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <div class=\"font-bold mb-3 flex items-center justify-between\">{{panelTitle}} <span class=\"text-[10px] font-semibold uppercase bg-[#24143014] py-0.5 px-2 rounded-full\">{{role}}</span></div>\n <div class=\"flex gap-2\">\n <button type=\"button\" class=\"border-none py-2 px-3.5 rounded-lg font-semibold text-xs cursor-pointer\" style=\"background:{{accent}};\">View</button>\n <button type=\"button\" class=\"acctw__edit hidden border-none py-2 px-3.5 rounded-lg font-semibold text-xs cursor-pointer bg-[#24143014] text-[#241430]\">Edit</button>\n <button type=\"button\" class=\"acctw__delete hidden border-none py-2 px-3.5 rounded-lg font-semibold text-xs cursor-pointer bg-[#241430] text-[#FAF7F2]\">Delete</button>\n </div>\n {{#if showDeniedNote}}<p class=\"mt-2.5 text-[10px] text-[#24143099]\">Buttons a {{role}} cannot use are hidden entirely, not just disabled.</p>{{/if}}\n</div>\n<style>\n.acctw--editor .acctw__edit, .acctw--admin .acctw__edit { display: inline-block; }\n.acctw--admin .acctw__delete { display: inline-block; }\n</style>", "react": "export function AccessControl({\n panelTitle = \"{{panelTitle}}\",\n role = \"{{role}}\",\n accent = \"{{accent}}\",\n showDeniedNote = {{showDeniedNote}},\n}) {\n const canEdit = role === \"editor\" || role === \"admin\";\n const canDelete = role === \"admin\";\n return (\n <div style={{ font: \"13px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 18, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <div style={{ fontWeight: 700, marginBottom: 12, display: \"flex\", alignItems: \"center\", justifyContent: \"space-between\" }}>\n {panelTitle} <span style={{ fontSize: 10, fontWeight: 600, textTransform: \"uppercase\", background: \"#24143014\", padding: \"3px 8px\", borderRadius: 999 }}>{role}</span>\n </div>\n <div style={{ display: \"flex\", gap: 8 }}>\n <button type=\"button\" style={{ border: \"none\", padding: \"9px 14px\", borderRadius: 8, fontWeight: 600, fontSize: 12, cursor: \"pointer\", background: accent }}>View</button>\n {canEdit && <button type=\"button\" style={{ border: \"none\", padding: \"9px 14px\", borderRadius: 8, fontWeight: 600, fontSize: 12, cursor: \"pointer\", background: \"#24143014\", color: \"#241430\" }}>Edit</button>}\n {canDelete && <button type=\"button\" style={{ border: \"none\", padding: \"9px 14px\", borderRadius: 8, fontWeight: 600, fontSize: 12, cursor: \"pointer\", background: \"#241430\", color: \"#FAF7F2\" }}>Delete</button>}\n </div>\n {showDeniedNote && <p style={{ margin: \"10px 0 0\", fontSize: 10, color: \"#24143099\" }}>Buttons a {role} cannot use are hidden entirely, not just disabled.</p>}\n </div>\n );\n}" }