ABAC

Attribute-Based Access Control.

html

<div class="abac abac--user-finance abac--res-finance">
  <p class="abac__rule">Rule: allow if user.department == resource.department</p>
  <div class="abac__pair">
    <div class="abac__box">resource.department<br/><strong>finance</strong></div>
    <div class="abac__box">user.department<br/><strong>finance</strong></div>
  </div>
  <div class="abac__result abac__result--granted" style="background:#A8E6C1;">&#10003; Access granted to &ldquo;Q3 budget report&rdquo;</div>
  <div class="abac__result abac__result--denied">&#10005; Access denied to &ldquo;Q3 budget report&rdquo;</div>
</div>
<style>
.abac { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.abac__rule { margin: 0 0 12px; font-size: 11px; color: #24143099; }
.abac__pair { display: flex; gap: 8px; margin-bottom: 12px; }
.abac__box { flex: 1; padding: 10px; border-radius: 8px; background: #24143010; text-align: center; font-size: 11px; }
.abac__box strong { display: block; margin-top: 2px; text-transform: capitalize; }
.abac__result { padding: 12px; border-radius: 8px; text-align: center; font-weight: 700; }
.abac__result--denied { background: #24143014; color: #24143099; }
.abac__result--granted { display: none; color: #241430; }
.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; }
.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; }
</style>

tailwind

<div class="abactw abactw--user-finance abactw--res-finance font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-3 text-[11px] text-[#24143099]">Rule: allow if user.department == resource.department</p>
  <div class="flex gap-2 mb-3">
    <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">finance</strong></div>
    <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">finance</strong></div>
  </div>
  <div class="abactw__result abactw__result--granted hidden p-3 rounded-lg text-center font-bold" style="background:#A8E6C1;">&#10003; Access granted to &ldquo;Q3 budget report&rdquo;</div>
  <div class="abactw__result abactw__result--denied p-3 rounded-lg text-center font-bold bg-[#24143014] text-[#24143099]">&#10005; Access denied to &ldquo;Q3 budget report&rdquo;</div>
</div>
<style>
.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; }
.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; }
</style>

react

export function Abac({
  resourceLabel = "Q3 budget report",
  resourceDept = "finance",
  userDept = "finance",
  accent = "#A8E6C1",
}) {
  const granted = resourceDept === userDept;
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontSize: 11, color: "#24143099" }}>Rule: allow if user.department == resource.department</p>
      <div style={{ display: "flex", gap: 8, marginBottom: 12 }}>
        <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>
        <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>
      </div>
      {granted
        ? <div style={{ padding: 12, borderRadius: 8, textAlign: "center", fontWeight: 700, background: accent }}>&#10003; Access granted to &ldquo;{resourceLabel}&rdquo;</div>
        : <div style={{ padding: 12, borderRadius: 8, textAlign: "center", fontWeight: 700, background: "#24143014", color: "#24143099" }}>&#10005; Access denied to &ldquo;{resourceLabel}&rdquo;</div>}
    </div>
  );
}