Add SSO login options to desktop app (#4954)

# Description of Changes Add SSO login options to desktop app
2026-07-16 11:23:10 +02:00 · 2025-11-25 11:56:25 +00:00
parent 2534c532b7
commit 64d343b765
12 changed files with 753 additions and 29 deletions
@@ -0,0 +1,154 @@
+/**
+ * Builds HTML for OAuth callback pages with i18n and dark mode support
+ */
+
+interface OAuthCallbackHtmlOptions {
+  title: string;
+  message: string;
+  isError?: boolean;
+  errorPlaceholder?: boolean;
+}
+
+/**
+ * Generates OAuth callback HTML with automatic dark mode support
+ */
+export function buildOAuthCallbackHtml({
+  title,
+  message,
+  isError = false,
+  errorPlaceholder = false,
+}: OAuthCallbackHtmlOptions): string {
+  const iconColor = isError ? '#d32f2f' : '#2e7d32';
+  const iconColorDark = isError ? '#ef5350' : '#66bb6a';
+  const icon = isError ? '✗' : '✓';
+
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${title}</title>
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+      text-align: center;
+      padding: 50px 20px;
+      background: #f5f5f5;
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .container {
+      background: white;
+      border-radius: 12px;
+      padding: 40px;
+      max-width: 420px;
+      width: 100%;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+
+    .icon {
+      font-size: 48px;
+      margin-bottom: 16px;
+      color: ${iconColor};
+    }
+
+    h1 {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      color: #1a1a1a;
+    }
+
+    p {
+      color: #666;
+      line-height: 1.6;
+      font-size: 15px;
+    }
+
+    ${errorPlaceholder ? `
+    .error-details {
+      background: #ffebee;
+      border: 1px solid #ffcdd2;
+      padding: 16px;
+      border-radius: 8px;
+      margin-top: 20px;
+      font-size: 14px;
+      color: #c62828;
+      word-break: break-word;
+      text-align: left;
+      line-height: 1.5;
+    }
+    ` : ''}
+
+    /* Dark mode support */
+    @media (prefers-color-scheme: dark) {
+      body {
+        background: #1a1a1a;
+        color: #e0e0e0;
+      }
+
+      .container {
+        background: #2d2d2d;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+      }
+
+      .icon {
+        color: ${iconColorDark};
+      }
+
+      h1 {
+        color: #f5f5f5;
+      }
+
+      p {
+        color: #b0b0b0;
+      }
+
+      ${errorPlaceholder ? `
+      .error-details {
+        background: #3d2020;
+        border: 1px solid #5d3030;
+        color: #ef9a9a;
+      }
+      ` : ''}
+    }
+
+    /* Mobile responsive */
+    @media (max-width: 480px) {
+      body {
+        padding: 20px 16px;
+      }
+
+      .container {
+        padding: 32px 24px;
+      }
+
+      h1 {
+        font-size: 20px;
+      }
+
+      .icon {
+        font-size: 40px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="icon">${icon}</div>
+    <h1>${title}</h1>
+    <p>${message}</p>
+    ${errorPlaceholder ? '<div class="error-details">{error}</div>' : ''}
+  </div>
+</body>
+</html>`;
+}