ieeeColors = ({
navy: "#2C3E50",
teal: "#16A085",
orange: "#E67E22",
gray: "#7F8C8D",
lightGray: "#ECF0F1",
darkGray: "#34495E",
green: "#27AE60",
red: "#E74C3C",
purple: "#9B59B6",
blue: "#3498DB",
yellow: "#F1C40F"
})
credentialTypesRef = {
const credentialTypes = [
{
name: "X.509 Certificate",
icon: "Cert",
description: "Asymmetric PKI credential with public/private key pair",
security: "High",
lifecycle: "Months to years",
storage: "Secure Element, TPM",
rotation: "Certificate renewal via EST/CMP"
},
{
name: "Pre-Shared Key (PSK)",
icon: "PSK",
description: "Symmetric key shared between device and server",
security: "Medium",
lifecycle: "Until manually rotated",
storage: "Flash, secure storage",
rotation: "Manual re-provisioning"
},
{
name: "Device Token",
icon: "Tkn",
description: "Short-lived authentication token for API access",
security: "Medium-High",
lifecycle: "Hours to days",
storage: "RAM, secure enclave",
rotation: "Automatic refresh"
},
{
name: "Bootstrap Credential",
icon: "Boot",
description: "Factory-programmed credential for initial provisioning",
security: "High",
lifecycle: "One-time use",
storage: "One-time programmable memory",
rotation: "Replaced by operational credential"
},
{
name: "Session Key",
icon: "Sess",
description: "Ephemeral key for single session encryption",
security: "High",
lifecycle: "Session duration",
storage: "RAM only",
rotation: "Per-session derivation"
},
{
name: "Setup Code",
icon: "Code",
description: "Short numeric/alphanumeric code for pairing",
security: "Low-Medium",
lifecycle: "One-time use",
storage: "Printed label, QR code",
rotation: "N/A (one-time)"
}
];
return html`
<div style="
background: white;
border: 1px solid ${ieeeColors.gray};
border-radius: 12px;
padding: 20px;
margin-top: 20px;
">
<h3 style="margin: 0 0 20px 0; color: ${ieeeColors.navy}; font-size: 16px;">
Credential Types Reference
</h3>
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px;">
${credentialTypes.map(cred => html`
<div style="
background: ${ieeeColors.lightGray};
border-radius: 10px;
padding: 15px;
">
<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
<span style="
font-size: 14px;
font-weight: bold;
background: ${ieeeColors.navy};
color: white;
padding: 4px 8px;
border-radius: 4px;
">${cred.icon}</span>
<span style="font-weight: 700; color: ${ieeeColors.navy}; font-size: 13px;">
${cred.name}
</span>
</div>
<div style="font-size: 11px; color: ${ieeeColors.darkGray}; margin-bottom: 10px;">
${cred.description}
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 10px;">
<div>
<span style="color: ${ieeeColors.gray};">Security:</span>
<span style="color: ${ieeeColors.navy}; font-weight: 600;"> ${cred.security}</span>
</div>
<div>
<span style="color: ${ieeeColors.gray};">Lifecycle:</span>
<span style="color: ${ieeeColors.navy}; font-weight: 600;"> ${cred.lifecycle}</span>
</div>
<div>
<span style="color: ${ieeeColors.gray};">Storage:</span>
<span style="color: ${ieeeColors.navy}; font-weight: 600;"> ${cred.storage}</span>
</div>
<div>
<span style="color: ${ieeeColors.gray};">Rotation:</span>
<span style="color: ${ieeeColors.navy}; font-weight: 600;"> ${cred.rotation}</span>
</div>
</div>
</div>
`)}
</div>
</div>
`;
}
credentialTypesRef