| 1 | import { providerAuthReturnUrl } from "@t3tools/shared/providerAuthReturnUrl"; |
| 2 | |
| 3 | export const codexAuthReturnUrl = providerAuthReturnUrl; |
| 4 | |
| 5 | const escapeHtml = (value: string) => |
| 6 | value.replace( |
| 7 | /[&<>"']/gu, |
| 8 | (character) => |
| 9 | ({ "&": "&", "<": "<", ">": ">", '"': """, "'": "'" })[character]!, |
| 10 | ); |
| 11 | |
| 12 | export function codexAuthCallbackPage( |
| 13 | success: boolean, |
| 14 | returnUrl: string | undefined, |
| 15 | nonce: string, |
| 16 | ) { |
| 17 | const destination = codexAuthReturnUrl(returnUrl); |
| 18 | const title = success ? "You're signed in" : "Sign-in couldn't finish"; |
| 19 | const description = success |
| 20 | ? destination |
| 21 | ? "Returning to T3 Code. You're ready to continue." |
| 22 | : "Return to T3 Code to continue. You can close this tab." |
| 23 | : "Return to T3 Code and try signing in again."; |
| 24 | return `<!doctype html> |
| 25 | <html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> |
| 26 | <meta name="color-scheme" content="light dark"><title>${escapeHtml(title)} · T3 Code</title> |
| 27 | ${success && destination ? `<meta http-equiv="refresh" content="1;url=${escapeHtml(destination)}">` : ""} |
| 28 | <style> |
| 29 | :root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18181b;background:#fafafa;color-scheme:light dark} |
| 30 | *{box-sizing:border-box}body{margin:0;min-height:100svh;display:grid;place-items:center;padding:24px} |
| 31 | main{width:100%;max-width:440px;background:#fff;border:1px solid #e4e4e7;border-radius:20px;padding:32px;box-shadow:0 12px 40px #00000008} |
| 32 | .brand{font-size:18px;letter-spacing:-.5px;margin-bottom:36px;color:#71717a}.brand strong{color:#18181b} |
| 33 | .status{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:${success ? "#ecfdf5" : "#fef2f2"};color:${success ? "#059669" : "#dc2626"};margin-bottom:20px} |
| 34 | h1{font-size:24px;font-weight:600;letter-spacing:-.7px;line-height:1.25;margin:0 0 12px}p{font-size:15px;line-height:1.6;color:#71717a;margin:0} |
| 35 | a{display:inline-flex;align-items:center;justify-content:center;margin-top:28px;padding:10px 16px;border-radius:8px;background:#2563eb;color:white;font-size:14px;font-weight:500;text-decoration:none}a:focus-visible{outline:3px solid #93c5fd;outline-offset:3px} |
| 36 | @media(prefers-color-scheme:dark){:root{color:#fafafa;background:#09090b}main{background:#18181b;border-color:#27272a;box-shadow:0 12px 40px #0003}.brand,p{color:#a1a1aa}.brand strong{color:#fafafa}.status{background:${success ? "#064e3b" : "#450a0a"};color:${success ? "#34d399" : "#f87171"}}} |
| 37 | </style></head><body><main><div class="brand"><strong>T3</strong> Code</div> |
| 38 | <div class="status" aria-hidden="true"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${success ? '<path d="m5 12 4 4L19 6"/>' : '<path d="m6 6 12 12M6 18 18 6"/>'}</svg></div> |
| 39 | <h1>${escapeHtml(title)}</h1><p>${description}</p> |
| 40 | ${destination ? `<a href="${escapeHtml(destination)}">Return to T3 Code</a>` : ""} |
| 41 | </main><script nonce="${escapeHtml(nonce)}">history.replaceState(null,"","/auth/callback");</script></body></html>`; |
| 42 | } |