import { DeesElement, html, property, state, customElement, css, type TemplateResult } from '@design.estate/dees-element';
import { idpElementStyles } from './tokens.js';
import './idp-badge.js';
import './idp-icon.js';
declare global {
interface HTMLElementTagNameMap {
'idp-admin-shell': IdpAdminShell;
}
}
type TNavItem = {
id: string;
label: string;
icon: string;
badge?: string;
};
type TKpi = {
label: string;
value: string;
unit?: string;
delta: string;
deltaKind: 'up' | 'live';
sub: string;
accent: string;
spark: number[];
sparkColor: string;
};
type TApproval = {
user: string;
email: string;
hue: string;
action: string;
device: string;
status: 'ok' | 'warn' | 'error' | 'accent';
label: string;
when: string;
};
type TFeedItem = {
dot: 'bl' | 'ok' | 'wn';
title: string;
detail: string;
meta: string;
};
type TAdminPage =
| 'overview'
| 'profile'
| 'security'
| 'sessions'
| 'apps'
| 'org-general'
| 'org-members'
| 'org-apps'
| 'support'
| 'ga-users'
| 'ga-orgs'
| 'ga-apps';
type TOrg = {
id: string;
name: string;
slug: string;
myRole: string;
};
type TConnectedApp = [name: string, scopes: string[], meta: string];
type TOAuthApp = [name: string, clientId: string, grants: string[], description: string];
@customElement('idp-admin-shell')
export class IdpAdminShell extends DeesElement {
public static demo = () => html`
${items.map((item) => html`
this.setPage(item.id as TAdminPage)}>
${item.badge} ` : html``}
`)}
`;
}
private renderSidebar(): TemplateResult {
const currentOrg = this.currentOrg;
return html`
`;
}
private renderSparkline(data: number[], color: string): TemplateResult {
const max = Math.max(...data);
const min = Math.min(...data);
const range = max - min || 1;
const width = 100;
const height = 22;
const points = data.map((valueArg, indexArg) => {
const x = (indexArg / (data.length - 1)) * width;
const y = height - ((valueArg - min) / range) * (height - 4) - 2;
return `${x},${y}`;
}).join(' ');
const area = `0,${height} ${points} ${width},${height}`;
return html`
`;
}
private renderKpi(kpi: TKpi): TemplateResult {
return html`
${kpi.label}
${kpi.value}${kpi.unit ? html`${kpi.unit} ` : html``}
${kpi.sub}
`;
}
private renderApprovalsChart(): TemplateResult {
return html`
${[0, 20, 40, 60, 80].map((tickArg, indexArg) => {
const y = 194 - (tickArg / 80) * 182;
return html`${tickArg} ${labelArg} `;
})}
`;
}
private renderChartCard(): TemplateResult {
return html`
Approval activity
Hourly - last 24 hours
${this.renderApprovalsChart()}
`;
}
private renderThreatsCard(): TemplateResult {
return html`
Needs attention 4 open View all →
${this.attention.map((itemArg) => html`
${itemArg.title}
${itemArg.meta}
${itemArg.action}
`)}
`;
}
private renderApprovalsTable(): TemplateResult {
return html`
Recent approvals 142 total All Pending Denied
User Action Device Status When
${this.approvals.map((approvalArg) => html`
${approvalArg.user.split(' ').map((partArg) => partArg[0]).slice(0, 2).join('').toUpperCase()} ${approvalArg.user}
${approvalArg.email}
${approvalArg.action}
${approvalArg.device} ${approvalArg.label} ${approvalArg.when}
`)}
`;
}
private feedDotStyle(kind: TFeedItem['dot']): string {
if (kind === 'ok') return '--dot-color:var(--idp-ok);--dot-glow:0 0 6px var(--idp-ok-border)';
if (kind === 'wn') return '--dot-color:var(--idp-warn)';
return '--dot-color:var(--idp-info);--dot-glow:0 0 6px var(--idp-info-border)';
}
private renderFeedCard(): TemplateResult {
return html`
Cardano feed live - #9 841 222
${this.feed.map((itemArg) => html`
${itemArg.title} - ${itemArg.detail}
${itemArg.meta}
`)}
`;
}
private renderGeoCard(): TemplateResult {
const regions = [
{ name: 'Berlin, DE', code: 'DE', count: '1,284', share: '100%', kind: 'home' },
{ name: 'Amsterdam, NL', code: 'NL', count: '642', share: '50%' },
{ name: 'San Francisco, US', code: 'US', count: '521', share: '41%' },
{ name: 'London, GB', code: 'GB', count: '384', share: '30%' },
{ name: 'Tokyo, JP', code: 'JP', count: '218', share: '17%' },
{ name: 'Lagos, NG', code: 'NG', count: '12', share: '1%', kind: 'risk' },
];
return html`
Sign-ins by region last 24h
${regions.map((regionArg) => {
const style = regionArg.kind === 'risk'
? '--region-color:var(--idp-error);--region-border:var(--idp-error-border);--region-bg:var(--idp-error-bg);--bar-color:var(--idp-error)'
: regionArg.kind === 'home'
? '--region-color:var(--idp-accent);--region-border:var(--idp-info-border);--region-bg:var(--idp-accent-soft);--bar-color:var(--idp-accent)'
: '';
return html`
${regionArg.code}
${regionArg.name}${regionArg.kind === 'risk' ? html`flagged ` : regionArg.kind === 'home' ? html`primary ` : html``}
${regionArg.count}
`;
})}
`;
}
private renderPageHeader(titleArg: string, descriptionArg: string, actionArg?: TemplateResult): TemplateResult {
return html`
${titleArg} ${descriptionArg}
${actionArg}
` : html``}
`;
}
private renderSectionCard(titleArg: string, descriptionArg: string, contentArg: TemplateResult, actionArg?: TemplateResult): TemplateResult {
return html`
${titleArg || actionArg ? html`
${titleArg}
${descriptionArg ? html`
${descriptionArg}
` : html``}
${actionArg}
` : html``}
${contentArg}
`;
}
private renderFormRow(labelArg: string, hintArg: string, contentArg: TemplateResult, requiredArg = false): TemplateResult {
return html`
`;
}
private renderCodeBlock(valueArg: string): TemplateResult {
return html`${valueArg}
`;
}
private renderDangerZone(itemsArg: Array<{ title: string; description: string; action: string }>): TemplateResult {
return html`
Danger Zone
${itemsArg.map((itemArg) => html`
${itemArg.title}
${itemArg.description}
${itemArg.action}
`;
}
private renderOverview(): TemplateResult {
return html`
Workspace - Overview
Good morning, Aegir.
Identity activity across @lossless - 142 identities, 9.1k devices online
24h 7d 30d 90d
Export + New identity
${this.heroKpis.map((kpiArg) => this.renderKpi(kpiArg))}
${this.renderChartCard()}${this.renderThreatsCard()}
${this.renderApprovalsTable()}${this.renderFeedCard()}
${this.renderGeoCard()}
`;
}
private renderProfile(): TemplateResult {
return html`
${this.renderPageHeader('Profile', 'Your personal identity details visible to connected apps.')}
${this.renderSectionCard('Avatar', 'Shown to apps that request your profile.', html`
AM Upload photo JPG, PNG, GIF up to 2 MB
`)}
${this.renderSectionCard('Personal information', '', html`
${this.renderFormRow('Full name', '', html`
`, true)}
${this.renderFormRow('Username', 'Used in your public profile URL', html`
idp.global/user/
`)}
${this.renderFormRow('Email', 'Primary address for login and notifications', html`
`)}
${this.renderFormRow('Mobile number', 'Used for SMS verification', html`
`)}
Save changes
`)}
${this.renderSectionCard('Account status', '', html`
Status
Your account is currently active.
Active
Global admin
You have platform-wide administrative access.
Admin `)}
${this.renderDangerZone([{ title: 'Delete account', description: 'Permanently delete your account and all associated data. This cannot be undone.', action: 'Delete account' }])}
${this.renderSectionCard('Passkeys', 'Biometric or hardware-key authentication - phishing-resistant and passwordless.', html`${passkeys.map((passkeyArg, indexArg) => html`
${passkeyArg}
Added ${indexArg ? '3 days ago' : '10 days ago'} - Last used ${indexArg ? '1h ago' : '5m ago'}
Remove `)}`, html`
`)}
${this.renderSectionCard('Password', 'Update your login password. Use a strong, unique password.', html`
${this.renderFormRow('Current password', '', html`
`)}
${this.renderFormRow('New password', 'Minimum 8 characters', html`
`)}
${this.renderFormRow('Confirm password', '', html`
`)}
Update password
`)}
${this.renderSectionCard('Two-factor authentication', '', html`
Authenticator app (TOTP)
Generate one-time codes with an authenticator app.
Enabled
`)}
Revoke all others `)}
${sessions.map((sessionArg) => html`
${sessionArg[0]} ${sessionArg[3] ? html`${sessionArg[3]} ` : html``}
${sessionArg[1]} - IP: ${sessionArg[2]}
Started 5m ago - Active just now
${sessionArg[3] ? html`` : html`
Revoke `}
`)}
${apps.map((appArg) => html`
${appArg[0].slice(0, 2).toUpperCase()} ${appArg[0]}
${(appArg[1] as string[]).map((scopeArg) => html`${scopeArg} `)}
${appArg[2]}
Revoke `)}
${this.renderSectionCard('', '', html`
${org.name.slice(0, 2).toUpperCase()} ${org.name}
idp.global/${org.slug}
${this.renderFormRow('Organisation name', '', html`
`, true)}${this.renderFormRow('URL slug', "Used in your org's public URLs. Changing this may break existing links.", html`
idp.global/org/
`)}
Save changes
`)}
${this.renderSectionCard('Organisation ID', 'Use this identifier when making API calls.', this.renderCodeBlock(org.id))}
${this.renderDangerZone([{ title: 'Transfer ownership', description: 'Transfer this organisation to another user. You will lose admin access.', action: 'Transfer' }, { title: 'Delete organisation', description: 'Permanently deletes this organisation, its members, apps and billing. Cannot be undone.', action: 'Delete org' }])}
Members (5) Pending (2)
${this.renderSectionCard('', '', html`${members.map((memberArg, indexArg) => html`
${memberArg[0].split(' ').map((partArg) => partArg[0]).join('')}
${memberArg[0]}
${memberArg[1]}
${memberArg[3]}
${memberArg[2]}
`)}`)}
${this.renderSectionCard('Pending invitations', '', html`${invites.map((inviteArg, indexArg) => html`
${inviteArg[0]}
${inviteArg[2]}
${inviteArg[1]}
Cancel
`)}`)}
`;
}
private renderOrgApps(): TemplateResult {
const apps: TOAuthApp[] = [
['Internal Dev Portal', 'ci_lossless_devportal_7Xa9', ['auth code'], 'OAuth client for our internal developer tools.'],
['CI Pipeline Auth', 'ci_lossless_ci_4Kp2', ['client credentials'], 'Machine-to-machine auth for deployment pipelines.'],
];
return html`
${this.renderPageHeader('OAuth Apps', "Custom OIDC clients for your organisation's own apps and services.", html`${apps.map((appArg) => html`
${appArg[0].slice(0, 2).toUpperCase()} ${appArg[0]}
${appArg[3]}
${appArg[1]}
${(appArg[2] as string[]).map((grantArg) => html`${grantArg} `)}
`)}
${this.renderSectionCard('OAuth credentials', 'Use these to configure your application.', html`
Client ID
${this.renderCodeBlock('ci_lossless_devportal_7Xa9')}
Redirect URI
${this.renderCodeBlock('https://dev.lossless.com/auth/callback')}
`)}
idp.global is free, forever
All platform features - authentication, passkeys, OIDC apps, team management - are included at no cost.
${services.map((serviceArg) => html`
${serviceArg[0]} - ${serviceArg[5]}
${serviceArg[1]}
${serviceArg[2]} ${serviceArg[3]}
Request this service `)}
Organisation Slug Members Plan Status Created ${orgs.map((orgArg) => html`${orgArg[0].slice(0,2).toUpperCase()} ${orgArg[0]}
${orgArg[1]} ${orgArg[2]} ${orgArg[3]} ${orgArg[4]} ${orgArg[5]} ${orgArg[4] === 'suspended' ? 'Unsuspend' : 'Suspend'}
App Type Category Installs Status ${apps.map((appArg) => html`${appArg[0].slice(0,2).toUpperCase()} ${appArg[0]}
${appArg[1]} ${appArg[2]} ${appArg[3]} ${appArg[4].replace('_', ' ')} ${appArg[4] === 'pending_review' ? 'Approve' : 'Suspend'}
TemplateResult> = {
overview: () => this.renderOverview(),
profile: () => this.renderProfile(),
security: () => this.renderSecurity(),
sessions: () => this.renderSessions(),
apps: () => this.renderAccountApps(),
'org-general': () => this.renderOrgGeneral(),
'org-members': () => this.renderOrgMembers(),
'org-apps': () => this.renderOrgApps(),
support: () => this.renderSupport(),
'ga-users': () => this.renderGAUsers(),
'ga-orgs': () => this.renderGAOrgs(),
'ga-apps': () => this.renderGAApps(),
};
return (renderers[this.page] || renderers.overview)();
}
public render(): TemplateResult {
return html`
${this.renderSidebar()}
${this.renderMainContent()}
`;
}
}