From b7e29bfd79aee154246fe5b785514c476f170236 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 14 Feb 2026 03:00:42 +0000 Subject: [PATCH] feat: apply McpMux branding to OAuth authorization pages MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace generic cyan/teal colors and emoji icon on the browser-facing authorization request page with the McpMux brand logo (inline SVG) and orange-rust gradient (#DA7756 → #B8553A). Redesign the authorization complete page from a plain light-theme stub to a fully branded dark page matching the authorization request page, with the McpMux logo and a green checkmark indicator. Signed-off-by: Claude https://claude.ai/code/session_01Du7pRJtNqgW8SU2yitXEDM Signed-off-by: Claude --- crates/mcpmux-gateway/src/pool/oauth.rs | 94 ++++++++++++++++---- crates/mcpmux-gateway/src/server/handlers.rs | 50 +++++------ 2 files changed, 100 insertions(+), 44 deletions(-) diff --git a/crates/mcpmux-gateway/src/pool/oauth.rs b/crates/mcpmux-gateway/src/pool/oauth.rs index e3d39c42..6f597707 100644 --- a/crates/mcpmux-gateway/src/pool/oauth.rs +++ b/crates/mcpmux-gateway/src/pool/oauth.rs @@ -533,33 +533,89 @@ impl OutboundOAuthManager { } } - // Return a nice HTML page that auto-closes - Html( - r#" - - + // Return a branded HTML page that auto-closes + let app_name = branding::DISPLAY_NAME; + Html(format!( + r##" + - Authorization Complete + + + {app_name} - Authorization Complete
-

✓ Authorization Complete

-

You can close this window and return to McpMux.

- + +
+ +
+

Authorization Complete

+

+ You can close this window and return to {app_name}. +

+

This window will close automatically.

+ - - "#, - ) +"## + )) }, ), ) diff --git a/crates/mcpmux-gateway/src/server/handlers.rs b/crates/mcpmux-gateway/src/server/handlers.rs index fa91f4f6..71035e3f 100644 --- a/crates/mcpmux-gateway/src/server/handlers.rs +++ b/crates/mcpmux-gateway/src/server/handlers.rs @@ -304,7 +304,7 @@ pub async fn oauth_authorize( // The page shows a brief message while the app opens // Industry standard: Don't auto-close, let user close after approval let html = format!( - r#" + r##" @@ -318,7 +318,7 @@ pub async fn oauth_authorize( display: flex; align-items: center; justify-content: center; - background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 50%, #16213e 100%); + background: linear-gradient(135deg, #1a1210 0%, #2a1c17 50%, #1e1412 100%); color: #e6e6e6; padding: 1rem; }} @@ -326,16 +326,10 @@ pub async fn oauth_authorize( text-align: center; max-width: 400px; }} - .icon {{ + .logo {{ width: 64px; height: 64px; margin: 0 auto 1.5rem; - background: linear-gradient(135deg, #64ffda 0%, #00bcd4 100%); - border-radius: 16px; - display: flex; - align-items: center; - justify-content: center; - font-size: 2rem; }} h1 {{ font-size: 1.5rem; @@ -344,25 +338,25 @@ pub async fn oauth_authorize( color: #fff; }} .subtitle {{ - color: #8892b0; + color: #a0917e; margin-bottom: 2rem; line-height: 1.5; }} .client-info {{ - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); + background: rgba(218,119,86,0.06); + border: 1px solid rgba(218,119,86,0.15); border-radius: 12px; padding: 1rem; margin-bottom: 1.5rem; }} .client-name {{ font-weight: 500; - color: #64ffda; + color: #DA7756; margin-bottom: 0.25rem; }} .client-id {{ font-size: 0.75rem; - color: #6a7394; + color: #7a6e62; word-break: break-all; }} .action {{ @@ -370,8 +364,8 @@ pub async fn oauth_authorize( }} .btn {{ display: inline-block; - background: linear-gradient(135deg, #64ffda 0%, #00bcd4 100%); - color: #0f0f23; + background: linear-gradient(135deg, #DA7756 0%, #B8553A 100%); + color: #fff; padding: 0.75rem 2rem; border-radius: 8px; text-decoration: none; @@ -383,12 +377,12 @@ pub async fn oauth_authorize( }} .btn:hover {{ transform: translateY(-2px); - box-shadow: 0 4px 20px rgba(100, 255, 218, 0.3); + box-shadow: 0 4px 20px rgba(218, 119, 86, 0.35); }} .btn-secondary {{ background: transparent; border: 1px solid rgba(255,255,255,0.2); - color: #8892b0; + color: #a0917e; margin-top: 1rem; }} .btn-secondary:hover {{ @@ -400,28 +394,34 @@ pub async fn oauth_authorize( .note {{ margin-top: 2rem; font-size: 0.875rem; - color: #6a7394; + color: #7a6e62; }}
-
🔐
+

Authorization Request

Complete authorization in {app_name}

- +
{display_name}
wants to connect
- +
Open {app_name}
- +

If prompted by your browser, click "Open" to allow.

@@ -434,7 +434,7 @@ pub async fn oauth_authorize( iframe.style.display = 'none'; iframe.src = "{deep_link_url}"; document.body.appendChild(iframe); - + // Fallback: remove iframe after a short delay // The protocol handler should have fired by then setTimeout(function() {{ @@ -445,7 +445,7 @@ pub async fn oauth_authorize( }})(); -"# +"## ); axum::response::Html(html).into_response()