- ${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'}
`)}`, 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`
`)}
-
+
+ ${this.credentialMessage ? html`
Credential update
${this.credentialMessage}
` : html``}
+ ${this.credentialError ? html`
Credential error
${this.credentialError}
` : html``}
+ ${this.renderSectionCard('Session security', 'Live session data is available and sessions can be revoked from the device list.', html`
+
Active sessions
Review and revoke sessions from the Sessions & Devices page.
+
+
`)}
- ${this.renderSectionCard('Two-factor authentication', '', html`
Authenticator app (TOTP)
Generate one-time codes with an authenticator app.
Enabled
`)}
+ ${this.renderSectionCard('Password', 'Change your password using the existing production password endpoint. All fields are required.', html`
+ ${this.renderFormRow('Current password', '', html`
this.setPasswordField('current', eventArg)} />`, true)}
+ ${this.renderFormRow('New password', 'Minimum 12 characters.', html`
this.setPasswordField('new', eventArg)} />`, true)}
+ ${this.renderFormRow('Confirm password', '', html`
this.setPasswordField('confirm', eventArg)} />`, true)}
+
+
+ `)}
+
+
+
+
Enroll passport device
Creates a signed enrollment challenge for the IDP Passport device flow.
+
+
+ ${this.passportEnrollment ? html`
+
Enrollment challenge ready
Expires ${new Date(this.passportEnrollment.expiresAt).toLocaleString()}. Use the pairing token or payload in a passport client to complete enrollment.
+ ${this.renderFormRow('Pairing token', '', this.renderCodeBlock(this.passportEnrollment.pairingToken))}
+ ${this.renderFormRow('Pairing payload', '', this.renderCodeBlock(this.passportEnrollment.pairingPayload))}
+ ${this.renderFormRow('Signing payload', '', this.renderCodeBlock(this.passportEnrollment.signingPayload))}
+ ` : html`
No active enrollment challenge.
`}
+
+
+ ${this.renderStateCard('TOTP controls not connected', 'No TOTP secret, enrollment, or verification endpoints exist in this backend yet, so no fake TOTP toggle is shown.', 'lock')}
+ ${this.renderStateCard('WebAuthn passkeys not connected', 'No WebAuthn passkey credential model or assertion endpoints exist yet. Passport devices are the available cryptographic credential path.', 'key')}
+
`;
}
private renderSessions(): TemplateResult {
- const sessions = [
- ['MacBook Pro 16"', 'Chrome 124 - macOS 14.4', '185.220.101.42', 'Current session'],
- ['iPhone 15 Pro', 'Safari 17 - iOS 17.4', '185.220.101.42', ''],
- ['iPad Air', 'Safari 17 - iPadOS 17.3', '91.64.18.227', ''],
- ['Windows PC', 'Firefox 125 - Windows 11', '194.31.186.5', ''],
- ];
return html`
- ${this.renderPageHeader('Sessions & Devices', 'Active login sessions across all your devices.', html`
`)}
-
${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`
`}
`)}
+ ${this.renderPageHeader('Sessions & Devices', 'Active login sessions across all your devices.')}
+
+ ${this.sessions.length ? this.sessions.map((sessionArg) => html`
+
+
+
+
${sessionArg.deviceName || 'Unknown device'}${sessionArg.isCurrent ? html`Current session` : html``}
+
${sessionArg.browser || 'Unknown browser'} - ${sessionArg.os || 'Unknown OS'} - IP: ${sessionArg.ip || 'unknown'}
+
Started ${this.formatTimeAgo(sessionArg.createdAt)} - Active ${this.formatTimeAgo(sessionArg.lastActive)}
+
+ ${sessionArg.isCurrent ? html`` : html`
`}
+
+ `) : this.renderDataState('No sessions', 'There are no active sessions for this account or session telemetry is unavailable.', 'monitor')}
+
`;
}
private renderAccountApps(): TemplateResult {
- const apps: TConnectedApp[] = [
- ['foss.global', ['Identity', 'Profile', 'Email'], 'Authorized 3 Apr 2026 - Last used 2h ago'],
- ['task.vc', ['Identity', 'Profile', 'Email', 'Orgs (read)'], 'Authorized 19 Apr 2026 - Last used 1d ago'],
- ['Acme HR Portal', ['Identity', 'Email'], 'Authorized 4 Mar 2026 - Last used 7d ago'],
- ];
+ const apps = this.accountApps;
return html`
${this.renderPageHeader('Connected Apps', 'Third-party apps and services that have OAuth access to your account.')}
-
${apps.map((appArg) => html`
${appArg[0].slice(0, 2).toUpperCase()}${appArg[0]}
${(appArg[1] as string[]).map((scopeArg) => html`${scopeArg}`)}
${appArg[2]}
`)}
+
+ ${apps.length ? apps.map((appArg) => html`
${appArg.name.slice(0, 2).toUpperCase()}${appArg.name}
${(appArg.scopes || []).map((scopeArg) => html`${scopeArg}`)}
${appArg.description || appArg.appUrl || 'Connected application'}
`) : this.renderDataState('Account app grants not connected', 'No account-level OAuth grant endpoint is wired into this app yet. Organisation app connections are managed under Organisation > OAuth Apps.', 'grid')}
+
`;
}
private renderOrgGeneral(): TemplateResult {
const org = this.currentOrg;
+ const connectedAppCount = this.orgApps.filter((appArg) => appArg.isConnected).length;
+ const orgActivities = this.activities
+ .filter((activityArg) => {
+ const searchableText = `${activityArg.targetType || ''} ${activityArg.description || ''}`.toLowerCase();
+ return Boolean(org.slug && searchableText.includes(org.slug.toLowerCase()))
+ || Boolean(org.name && searchableText.includes(org.name.toLowerCase()))
+ || searchableText.includes('org')
+ || searchableText.includes('organization')
+ || searchableText.includes('organisation');
+ })
+ .slice(0, 5);
+ const kpis: TKpi[] = [
+ {
+ label: 'Members',
+ value: String(this.orgMembers.length),
+ delta: `${this.orgInvitations.length} pending`,
+ deltaKind: 'up',
+ spark: [1, 1, 2, Math.max(this.orgMembers.length, 1)],
+ sparkColor: 'var(--idp-spark-up)',
+ accent: 'var(--idp-chart-5)',
+ sub: org.name,
+ },
+ {
+ label: 'Connected apps',
+ value: String(connectedAppCount),
+ delta: `${this.orgApps.length} available`,
+ deltaKind: 'live',
+ spark: [1, 2, 2, Math.max(connectedAppCount, 1)],
+ sparkColor: 'var(--idp-spark-info)',
+ accent: 'var(--idp-info)',
+ sub: 'Organisation OAuth catalogue',
+ },
+ {
+ label: 'Role',
+ value: org.myRole || 'member',
+ delta: 'live',
+ deltaKind: 'live',
+ spark: [1, 1, 1, 1],
+ sparkColor: 'var(--idp-spark-info)',
+ accent: 'var(--idp-chart-1)',
+ sub: 'Your access level',
+ },
+ {
+ label: 'Activity',
+ value: String(orgActivities.length),
+ delta: `${this.activities.length} account events`,
+ deltaKind: 'up',
+ spark: [1, 1, Math.max(orgActivities.length, 1)],
+ sparkColor: 'var(--idp-spark-up)',
+ accent: 'var(--idp-chart-2)',
+ sub: 'Recent org-related events',
+ },
+ ];
+
return html`
- ${this.renderPageHeader('Organisation Settings', 'General configuration for your organisation.')}
+
+
+
Organisation - Generallive
+
${org.name}
+
Selected organisation dashboard for ${org.slug ? `@${org.slug}` : org.id || 'no organisation selected'}.
+
+
+
${kpis.map((kpiArg) => this.renderKpi(kpiArg))}
+ ${this.dataLoading || this.dataError ? this.renderDataState('No organisation data', 'The console has not received live organisation data yet.', 'building') : html``}
+
+
+
Organisation profile${org.myRole || 'member'}
+
+
${org.name.slice(0, 2).toUpperCase()}${org.name}
idp.global/org/${org.slug || 'unassigned'}
+ ${this.renderCodeBlock(org.id || 'No organisation selected')}
+
Rename, slug updates, ownership transfer, and deletion are available from Settings with server-side audited confirmation.
+
+
+
+
Recent organisation activity${orgActivities.length} events
+ ${orgActivities.length ? orgActivities.map((activityArg) => html`
+
${activityArg.action.replace(/_/g, ' ')} - ${activityArg.description}
${this.formatTimeAgo(activityArg.timestamp)}
+ `) : this.renderStateCard('No org activity yet', 'Organisation-related activity will appear here when the backend reports matching activity events.', 'activity')}
+
+
+
+ `;
+ }
+
+ private renderOrgSettings(): TemplateResult {
+ const org = this.currentOrg;
+ this.syncOrgSettingsState();
+ const transferCandidates = this.orgMembers.filter((memberArg) => !memberArg.isCurrentUser);
+ const transferConfirmText = `transfer ${org.slug}`;
+ const deleteConfirmText = `delete ${org.slug}`;
+ const identityChanged = this.orgNameDraft.trim() !== org.name || this.orgSlugDraft.trim().toLowerCase() !== org.slug;
+ return html`
+ ${this.renderPageHeader('Organisation Settings', 'Audited configuration and owner-controlled destructive operations.')}
- ${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/
`)}
`)}
+ ${this.orgSettingsError ? html`
Settings action blocked
${this.orgSettingsError}
` : html``}
+ ${this.renderSectionCard('Organisation identity', `Type ${org.slug} to confirm name or slug changes. The backend verifies this confirmation before saving.`, html`
+
${org.name.slice(0, 2).toUpperCase()}${org.name}
idp.global/org/${org.slug}
+ ${this.renderFormRow('Organisation name', '', html`
this.setOrgSettingsField('name', eventArg)} />`, true)}
+ ${this.renderFormRow('URL slug', "Used in your org's public URLs.", html`
idp.global/org/ this.setOrgSettingsField('slug', eventArg)} />
`)}
+ ${this.renderFormRow('Confirmation', `Type ${org.slug}`, html`
this.setOrgSettingsField('settingsConfirmation', eventArg)} />`)}
+
+
+ `)}
${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' }])}
+ ${this.renderSectionCard('Transfer ownership', `Owner-only operation. Type ${transferConfirmText} to confirm.`, html`
+ ${transferCandidates.length ? html`
+ ${this.renderFormRow('New owner', 'The target user must already be an organisation member.', html`
+
+ `, true)}
+ ${this.renderFormRow('Confirmation', `Type ${transferConfirmText}`, html`
this.setOrgSettingsField('transferConfirmation', eventArg)} />`)}
+
+
+ ` : this.renderStateCard('No transfer candidates loaded', 'Load organisation members before transferring ownership.', 'users')}
+ `)}
+ ${this.renderSectionCard('Delete organisation', `Owner-only destructive operation. Type ${deleteConfirmText} to permanently remove this organisation, its memberships, pending invitations, billing records, and app connections.`, html`
+ ${this.renderFormRow('Confirmation', `Type ${deleteConfirmText}`, html`
this.setOrgSettingsField('deleteConfirmation', eventArg)} />`)}
+
+
+ `)}
`;
}
private renderOrgMembers(): TemplateResult {
- const members: Array<[name: string, email: string, role: string, joined: string]> = [
- ['Alex Mercer', 'alex@lossless.com', 'owner', 'Joined 120d ago'],
- ['Jordan Kim', 'jordan@lossless.com', 'admin', 'Joined 90d ago'],
- ['Sam Rivera', 'sam@lossless.com', 'editor', 'Joined 45d ago'],
- ['Casey Novak', 'casey@lossless.com', 'viewer', 'Joined 10d ago'],
- ['Riley Chen', 'riley@external.io', 'guest', 'Joined 2d ago'],
- ];
- const invites: Array<[email: string, role: string, meta: string]> = [
- ['devops@partner.io', 'editor', 'Invited 3d ago - Expires 30 Jul 2026'],
- ['audit@consulting.de', 'viewer', 'Invited 1d ago - Expires 1 Aug 2026'],
- ];
+ const customRoleRows = this.orgRoleDefinitions.map((roleArg) => ({
+ cells: [
+ html`
+
+
${this.getInitials(roleArg.name)}
+
+
${roleArg.name}
+
${roleArg.description || 'Custom organisation role'}
+
+
+ `,
+ roleArg.key,
+ html`
+
+
+
+
+ `,
+ ],
+ }));
+ const memberRows = this.orgMembers.map((memberArg) => ({
+ cells: [
+ html`
+
+
${this.getInitials(memberArg.name || memberArg.email)}
+
+
${memberArg.name || memberArg.email}
+
${memberArg.email}
+
+
+ `,
+ html`
${memberArg.roles.map((roleArg) => html`${roleArg}`)}
`,
+ memberArg.isCurrentUser ? html`
You` : html`
Member`,
+ memberArg.roles.includes('owner') || memberArg.isCurrentUser
+ ? html`
`
+ : html`
`,
+ ],
+ }));
+ const invitationRows = this.orgInvitations.map((inviteArg) => ({
+ cells: [
+ html`
+
+
${this.getInitials(inviteArg.email)}
+
+
${inviteArg.email}
+
Invited ${this.formatTimeAgo(inviteArg.invitedAt)}
+
+
+ `,
+ html`
${inviteArg.roles.map((roleArg) => html`${roleArg}`)}
`,
+ new Date(inviteArg.expiresAt).toLocaleDateString(),
+ html`
+
+
+
+
+ `,
+ ],
+ }));
+
return html`
- ${this.renderPageHeader('Members', '5 members - 2 pending invitations', html`
`)}
+ ${this.renderPageHeader('Members', `${this.orgMembers.length} members - ${this.orgInvitations.length} pending invitations`, html`
`)}
-
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]}
-
-
- `)}`)}
+ ${this.orgSettingsError ? html`
Role action blocked
${this.orgSettingsError}
` : html``}
+
+
+
+ ${this.orgInvitations.length ? html`
+
+ ` : html``}
`;
}
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.'],
- ];
+ const appRows = this.orgApps.map((appArg) => ({
+ cells: [
+ html`
+
+
${this.getInitials(appArg.name)}
+
+
${appArg.name}
+
${appArg.description || appArg.appUrl || 'Global app'}
+
+
+ `,
+ appArg.clientId || '-',
+ html`
${(appArg.scopes || []).slice(0, 4).map((scopeArg) => html`${scopeArg}`)}
`,
+ html`
${appArg.isConnected ? 'connected' : 'available'}`,
+ html`
${appArg.roleMappings?.length || 0} mappings`,
+ html`
${appArg.isConnected ? html`` : html``}
`,
+ ],
+ }));
+
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')}
`)}
+ ${this.renderPageHeader('Apps', "Global apps connected to this organisation.")}
+
+ ${this.orgSettingsError ? html`
App mapping blocked
${this.orgSettingsError}
` : html``}
+
+
`;
}
@@ -1633,39 +2546,102 @@ export class IdpAdminShell extends DeesElement {
];
return html`
${this.renderPageHeader('Support', 'idp.global is free for everyone. Paid options cover hands-on recovery and consulting work.')}
-
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]}
`)}
+
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]}
`)}
`;
}
private renderGAUsers(): TemplateResult {
- const users = [
- ['Alex Mercer', 'alex@lossless.com', '2', 'active', 'Admin', '200d ago'],
- ['Jordan Kim', 'jordan@lossless.com', '1', 'active', '', '100d ago'],
- ['Sam Rivera', 'sam@lossless.com', '1', 'active', '', '45d ago'],
- ['Dana Walsh', 'dana@suspended.de', '0', 'suspended', '', '60d ago'],
- ['Morgan Lee', 'morgan@newuser.com', '0', 'new', '', '1d ago'],
- ];
- return html`${this.renderPageHeader('All Users', '6 users on the platform')}
`;
+ return html`${this.renderPageHeader('All Users', 'Platform-wide user administration.')}
${this.renderDataState('User directory not connected', 'The shell is ready for global user data, but no platform user-list endpoint is wired into this app yet. No demo users are shown in production mode.', 'users')}
`;
}
private renderGAOrgs(): TemplateResult {
- const orgs = [['Lossless GmbH', 'lossless', '5', 'Pro', 'active', '200d ago'], ['Task VC', 'task', '3', 'Pro', 'active', '140d ago'], ['Demo Org', 'demo', '1', 'FairUsageFree', 'active', '5d ago'], ['Suspended Co.', 'suspended', '2', 'Pro', 'suspended', '80d ago']];
- return html`${this.renderPageHeader('All Organisations', '4 organisations')}
| 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]} | |
`)}
`;
+ const orgRows = this.orgs.map((orgArg) => ({
+ cells: [
+ html`
+
+
${this.getInitials(orgArg.name)}
+
+
${orgArg.name}
+
${orgArg.slug ? `idp.global/org/${orgArg.slug}` : 'No slug'}
+
+
+ `,
+ orgArg.slug || '-',
+ html`
${orgArg.myRole || 'member'}`,
+ orgArg.id,
+ ],
+ }));
+
+ return html`
+ ${this.renderPageHeader('All Organisations', `${this.orgs.length} organisations visible to this admin session`)}
+
+
+
+ `;
}
private renderGAApps(): TemplateResult {
- const apps = [['foss.global', 'global', 'Productivity', '-', 'active'], ['task.vc', 'global', 'Productivity', '-', 'active'], ['Acme HR', 'partner', 'HR', '412', 'approved'], ['DevOps Suite', 'partner', 'DevOps', '87', 'pending_review']];
- return html`${this.renderPageHeader('Platform Apps', 'Global and partner apps across the platform.')}
| 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('_', ' ')} | |
`)}
`;
+ const apps = this.adminApps.length ? this.adminApps : this.orgApps;
+ const appRows = apps.map((appArg) => ({
+ cells: [
+ html`
+
+
${this.getInitials(appArg.name)}
+
+
${appArg.name}
+
${appArg.description || appArg.appUrl || 'Platform app'}
+
+
+ `,
+ html`
${appArg.type || 'global'}`,
+ appArg.category || '-',
+ appArg.connectionCount ?? '-',
+ html`
${appArg.status || 'active'}`,
+ ],
+ }));
+
+ return html`
+ ${this.renderPageHeader('Platform Apps', 'Global and partner apps across the platform.')}
+
+
+
+ `;
}
private renderMainContent(): TemplateResult {
- const renderers: Record
TemplateResult> = {
+ const renderers: Record TemplateResult> = {
overview: () => this.renderOverview(),
profile: () => this.renderProfile(),
security: () => this.renderSecurity(),
sessions: () => this.renderSessions(),
apps: () => this.renderAccountApps(),
'org-general': () => this.renderOrgGeneral(),
+ 'org-settings': () => this.renderOrgSettings(),
'org-members': () => this.renderOrgMembers(),
'org-apps': () => this.renderOrgApps(),
support: () => this.renderSupport(),
@@ -1678,10 +2654,11 @@ export class IdpAdminShell extends DeesElement {
public render(): TemplateResult {
return html`
-
+
${this.renderSidebar()}
${this.renderMainContent()}
+ ${this.renderDialog()}
`;
}
}
diff --git a/ts_web/elements/idp-button.ts b/ts_web/elements/idp-button.ts
index dde14a0..9b4a96a 100644
--- a/ts_web/elements/idp-button.ts
+++ b/ts_web/elements/idp-button.ts
@@ -40,9 +40,15 @@ export class IdpButton extends DeesElement {
@property({ type: String })
public accessor icon = '';
+ @property({ type: String })
+ public accessor type: 'button' | 'submit' | 'reset' = 'button';
+
@property({ type: Boolean, reflect: true })
public accessor disabled = false;
+ @property({ type: Boolean, reflect: true })
+ public accessor loading = false;
+
public static styles = [
...idpElementStyles,
css`
@@ -101,7 +107,7 @@ export class IdpButton extends DeesElement {
}
.accent {
background: var(--idp-accent);
- color: #fff;
+ color: var(--idp-accent-fg);
box-shadow: 0 4px 14px color-mix(in srgb, var(--idp-accent), transparent 64%);
}
.accent:hover:not(:disabled) {
@@ -126,18 +132,33 @@ export class IdpButton extends DeesElement {
}
.destructive {
background: var(--idp-destructive);
- color: #fff;
+ color: var(--idp-accent-fg);
}
idp-icon {
flex: 0 0 auto;
}
+ .spinner {
+ width: 13px;
+ height: 13px;
+ border: 2px solid currentColor;
+ border-right-color: transparent;
+ border-radius: 999px;
+ animation: spin 700ms linear infinite;
+ }
+ @keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+ }
`,
];
public render(): TemplateResult {
return html`
-