const PAGE_STYLES = ` body { background: rgb(251,252,254); font-family: 'Open Sans', sans-serif; padding: 10px; margin: auto; max-width: 700px; } h1 { font-size: 16px; font-weight: 400; margin: 0 0 10px 0; } h2 { color: rgb(0, 0, 0); font-size: 12px; font-weight: 400; margin: 0 0 10px 0; } button { border: 1px solid rgb(219, 223, 231); background: rgb(255, 255, 255); border-radius: 4px; padding: 10px; cursor: pointer; font: inherit; } ul { border: 1px solid rgb(219, 223, 231); border-radius: 4px; padding: 10px; } li { list-style: none; margin: 0; color: rgb(125, 125, 125); font-size: 12px; } details { margin-top: 24px; text-align: left; border: 1px solid rgb(219, 223, 231); border-radius: 4px; padding: 8px 12px; } summary { cursor: pointer; font-size: 12px; color: rgb(70, 70, 70); padding: 4px 0; } .claims-section { margin-top: 12px; } .claims-section h3 { font-size: 12px; font-weight: 600; margin: 0 0 6px 0; color: rgb(0, 0, 0); } .claims-section pre { background: white; border: 1px solid rgb(219, 223, 231); border-radius: 4px; padding: 10px; margin: 0; max-height: 320px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; white-space: pre; } .claims-warning { color: rgb(125, 125, 125); font-size: 11px; margin: 0 0 12px 0; } `; function escapeHtml(value: unknown): string { return String(value ?? '(n/a)') .replace(/&/g, '&') .replace(//g, '>') .replace(/"/g, '"'); } function renderClaimsSection(label: string, payload: Record): string { const json = JSON.stringify(payload, null, 2); return `

${escapeHtml(label)}

${escapeHtml(json)}
`; } export function renderOidcTestSuccess({ claims, userInfo, }: { claims: Record; userInfo: Record; }): string { const email = escapeHtml(userInfo.email); const firstName = escapeHtml(userInfo.given_name); const lastName = escapeHtml(userInfo.family_name); const sub = escapeHtml(userInfo.sub); return ` n8n - OIDC Connection Test Result

OIDC Connection Test was successful

Here are the attributes returned by your OIDC provider:

  • Email: ${email}
  • First Name: ${firstName}
  • Last Name: ${lastName}
  • Subject: ${sub}
Show full claims (for debugging role mapping)

Contains identity data from your IdP. Avoid sharing publicly.

${renderClaimsSection('ID token claims', claims)} ${renderClaimsSection('Userinfo endpoint response', userInfo)}
`; } export function renderOidcTestFailure(error: unknown): string { const message = escapeHtml(error instanceof Error ? error.message : String(error)); return ` n8n - OIDC Connection Test Result

OIDC Connection Test failed

${message}

`; }