ApiKeyTokenCard
Domain · API DocCard for a single API key — reveal/hide, copy-to-clipboard, env badge, last-used metadata.
Production key
production
••••••••••••••••a1b2
- Created
- Jan 12, 2026
- Last used
- May 20, 2026
read:products
write:orders
<%- include('modules/domain/api-doc/ApiKeyTokenCard', {
name: 'Production key',
token: 'demo_production_token_REDACTED',
environment: 'production',
createdAt: '2026-01-12',
lastUsedAt: '2026-05-20',
scopes: ['read:products', 'write:orders']
}) %>
Staging key
staging
••••••••••••9z8y
- Created
- Apr 1, 2026
- Last used
- Never
<%- include('modules/domain/api-doc/ApiKeyTokenCard', {
name: 'Staging key',
token: 'demo_staging_token_REDACTED',
environment: 'staging',
createdAt: '2026-04-01',
lastUsedAt: null,
onRevoke: true
}) %>
<%
var _name = locals.name || '';
var _token = locals.token || '';
var _masked = locals.masked || null;
var _scopes = locals.scopes || null;
var _createdAt = locals.createdAt || null;
var _lastUsedAt = (typeof locals.lastUsedAt !== 'undefined') ? locals.lastUsedAt : null;
var _environment = locals.environment || null;
var _onRevoke = !!locals.onRevoke;
var _revokeLabel = locals.revokeLabel || ('Revoke ' + _name);
var _className = locals.className || '';
var envBadgeVariant = {
production: 'success',
staging: 'warning',
development: 'neutral',
};
function maskToken(token) {
if (!token) return '';
var tail = token.slice(-4);
var bulletCount = Math.max(0, token.length - 4);
var bullets = '';
for (var i = 0; i < bulletCount; i++) bullets += '•';
return bullets + tail;
}
function formatDate(d) {
if (!d) return '—';
try {
var date = (typeof d === 'string' || typeof d === 'number') ? new Date(d) : d;
if (isNaN(date.getTime())) return '—';
return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' });
} catch (e) { return '—'; }
}
var displayMasked = _masked != null ? _masked : maskToken(_token);
// Unique id per render so multiple instances on a page don't collide.
var _uid = 'aktc_' + Math.random().toString(36).slice(2, 10);
%>
<%= _name %>
<% if (_environment) { %>
<%- include('../../ui/Badge', { variant: envBadgeVariant[_environment] || 'neutral', size: 'sm', children: _environment }) %>
<% } %>
<% if (_onRevoke) { %>
<% } %>
<%= displayMasked %>
- Created
- <%= formatDate(_createdAt) %>
- Last used
- <%= _lastUsedAt ? formatDate(_lastUsedAt) : 'Never' %>
<% if (_scopes && _scopes.length > 0) { %>
<% _scopes.forEach(function(scope) { %>
<%= scope %>
<% }); %>
<% } %>