Edit ABAC

Name

Also known as (comma separated)

Brief definition Attribute-Based Access Control.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "resourceLabel", "type": "text", "label": "Resource", "default": "Q3 budget report" }, { "id": "resourceDept", "type": "select", "label": "Resource attribute: department", "default": "finance", "options": [ "finance", "engineering", "sales" ] }, { "id": "userDept", "type": "select", "label": "User attribute: department", "default": "finance", "options": [ "finance", "engineering", "sales" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#A8E6C1", "presets": [ "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] } ]

Templates (JSON object keyed by format) { "html": "<div class=\"abac abac--user-{{userDept}} abac--res-{{resourceDept}}\">\n <p class=\"abac__rule\">Rule: allow if user.department == resource.department</p>\n <div class=\"abac__pair\">\n <div class=\"abac__box\">resource.department<br/><strong>{{resourceDept}}</strong></div>\n <div class=\"abac__box\">user.department<br/><strong>{{userDept}}</strong></div>\n </div>\n <div class=\"abac__result abac__result--granted\" style=\"background:{{accent}};\">&#10003; Access granted to &ldquo;{{resourceLabel}}&rdquo;</div>\n <div class=\"abac__result abac__result--denied\">&#10005; Access denied to &ldquo;{{resourceLabel}}&rdquo;</div>\n</div>\n<style>\n.abac { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.abac__rule { margin: 0 0 12px; font-size: 11px; color: #24143099; }\n.abac__pair { display: flex; gap: 8px; margin-bottom: 12px; }\n.abac__box { flex: 1; padding: 10px; border-radius: 8px; background: #24143010; text-align: center; font-size: 11px; }\n.abac__box strong { display: block; margin-top: 2px; text-transform: capitalize; }\n.abac__result { padding: 12px; border-radius: 8px; text-align: center; font-weight: 700; }\n.abac__result--denied { background: #24143014; color: #24143099; }\n.abac__result--granted { display: none; color: #241430; }\n.abac--user-finance.abac--res-finance .abac__result--granted, .abac--user-engineering.abac--res-engineering .abac__result--granted, .abac--user-sales.abac--res-sales .abac__result--granted { display: block; }\n.abac--user-finance.abac--res-finance .abac__result--denied, .abac--user-engineering.abac--res-engineering .abac__result--denied, .abac--user-sales.abac--res-sales .abac__result--denied { display: none; }\n</style>", "tailwind": "<div class=\"abactw abactw--user-{{userDept}} abactw--res-{{resourceDept}} font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border\">\n <p class=\"m-0 mb-3 text-[11px] text-[#24143099]\">Rule: allow if user.department == resource.department</p>\n <div class=\"flex gap-2 mb-3\">\n <div class=\"flex-1 p-2.5 rounded-lg bg-[#24143010] text-center text-[11px]\">resource.department<br/><strong class=\"block mt-0.5 capitalize\">{{resourceDept}}</strong></div>\n <div class=\"flex-1 p-2.5 rounded-lg bg-[#24143010] text-center text-[11px]\">user.department<br/><strong class=\"block mt-0.5 capitalize\">{{userDept}}</strong></div>\n </div>\n <div class=\"abactw__result abactw__result--granted hidden p-3 rounded-lg text-center font-bold\" style=\"background:{{accent}};\">&#10003; Access granted to &ldquo;{{resourceLabel}}&rdquo;</div>\n <div class=\"abactw__result abactw__result--denied p-3 rounded-lg text-center font-bold bg-[#24143014] text-[#24143099]\">&#10005; Access denied to &ldquo;{{resourceLabel}}&rdquo;</div>\n</div>\n<style>\n.abactw--user-finance.abactw--res-finance .abactw__result--granted, .abactw--user-engineering.abactw--res-engineering .abactw__result--granted, .abactw--user-sales.abactw--res-sales .abactw__result--granted { display: block; }\n.abactw--user-finance.abactw--res-finance .abactw__result--denied, .abactw--user-engineering.abactw--res-engineering .abactw__result--denied, .abactw--user-sales.abactw--res-sales .abactw__result--denied { display: none; }\n</style>", "react": "export function Abac({\n resourceLabel = \"{{resourceLabel}}\",\n resourceDept = \"{{resourceDept}}\",\n userDept = \"{{userDept}}\",\n accent = \"{{accent}}\",\n}) {\n const granted = resourceDept === userDept;\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 <p style={{ margin: \"0 0 12px\", fontSize: 11, color: \"#24143099\" }}>Rule: allow if user.department == resource.department</p>\n <div style={{ display: \"flex\", gap: 8, marginBottom: 12 }}>\n <div style={{ flex: 1, padding: 10, borderRadius: 8, background: \"#24143010\", textAlign: \"center\", fontSize: 11 }}>resource.department<br /><strong style={{ display: \"block\", marginTop: 2, textTransform: \"capitalize\" }}>{resourceDept}</strong></div>\n <div style={{ flex: 1, padding: 10, borderRadius: 8, background: \"#24143010\", textAlign: \"center\", fontSize: 11 }}>user.department<br /><strong style={{ display: \"block\", marginTop: 2, textTransform: \"capitalize\" }}>{userDept}</strong></div>\n </div>\n {granted\n ? <div style={{ padding: 12, borderRadius: 8, textAlign: \"center\", fontWeight: 700, background: accent }}>&#10003; Access granted to &ldquo;{resourceLabel}&rdquo;</div>\n : <div style={{ padding: 12, borderRadius: 8, textAlign: \"center\", fontWeight: 700, background: \"#24143014\", color: \"#24143099\" }}>&#10005; Access denied to &ldquo;{resourceLabel}&rdquo;</div>}\n </div>\n );\n}" }