From ece75981f33a0369c8a1e3b451d7d3aa6947ec2b Mon Sep 17 00:00:00 2001
From: adamhaley <adamhaley@gmail.com>
Date: Fri, 15 Aug 2025 18:01:20 -0700
Subject: [PATCH] some polish with clean styling on oauth success and oauth
 failure pages. auto-set reconnect field to false to prevent users from
 accidentally clearing their auth

---
 oauth_handler.py     | 133 ++++++++++++++++++++++++++++++++++++++++---
 web/dropbox_oauth.js |  26 ++++++++-
 2 files changed, 150 insertions(+), 9 deletions(-)

diff --git a/oauth_handler.py b/oauth_handler.py
index 031adc9..9370593 100644
--- a/oauth_handler.py
+++ b/oauth_handler.py
@@ -121,10 +121,71 @@ async def handle_oauth_callback(request):
             
             if success:
                 return web.Response(text=f"""
-                <html><body>
-                    <h2>✅ Authorization Successful!</h2>
-                    <p>{message}</p>
-                    <p>This window will close automatically and ComfyUI will refresh...</p>
+                <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <title>Dropbox Authorization Successful</title>
+                    <style>
+                        body {{
+                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+                            margin: 0;
+                            padding: 40px 20px;
+                            min-height: 100vh;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            color: white;
+                        }}
+                        .container {{
+                            background: rgba(255, 255, 255, 0.95);
+                            backdrop-filter: blur(10px);
+                            border-radius: 20px;
+                            padding: 40px;
+                            text-align: center;
+                            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+                            max-width: 400px;
+                            color: #333;
+                        }}
+                        .success-icon {{
+                            font-size: 4rem;
+                            margin-bottom: 20px;
+                            color: #22c55e;
+                        }}
+                        h2 {{
+                            margin: 0 0 20px 0;
+                            color: #1f2937;
+                            font-size: 1.5rem;
+                        }}
+                        p {{
+                            margin: 10px 0;
+                            color: #6b7280;
+                            line-height: 1.5;
+                        }}
+                        .loading {{
+                            display: inline-block;
+                            width: 20px;
+                            height: 20px;
+                            border: 3px solid #f3f3f3;
+                            border-top: 3px solid #667eea;
+                            border-radius: 50%;
+                            animation: spin 1s linear infinite;
+                            margin-left: 10px;
+                        }}
+                        @keyframes spin {{
+                            0% {{ transform: rotate(0deg); }}
+                            100% {{ transform: rotate(360deg); }}
+                        }}
+                    </style>
+                </head>
+                <body>
+                    <div class="container">
+                        <div class="success-icon">✅</div>
+                        <h2>Authorization Successful!</h2>
+                        <p>{message}</p>
+                        <p>ComfyUI will refresh automatically<span class="loading"></span></p>
+                    </div>
                     <script>
                         // Notify parent window (ComfyUI) about successful OAuth
                         if (window.opener) {{
@@ -150,10 +211,66 @@ async def handle_oauth_callback(request):
                 """, content_type='text/html')
             else:
                 return web.Response(text=f"""
-                <html><body>
-                    <h2>❌ Setup Failed</h2>
-                    <p>{message}</p>
-                    <p>You can close this window and try again in ComfyUI.</p>
+                <html>
+                <head>
+                    <meta charset="UTF-8">
+                    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+                    <title>Dropbox Authorization Failed</title>
+                    <style>
+                        body {{
+                            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+                            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+                            margin: 0;
+                            padding: 40px 20px;
+                            min-height: 100vh;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            color: white;
+                        }}
+                        .container {{
+                            background: rgba(255, 255, 255, 0.95);
+                            backdrop-filter: blur(10px);
+                            border-radius: 20px;
+                            padding: 40px;
+                            text-align: center;
+                            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+                            max-width: 400px;
+                            color: #333;
+                        }}
+                        .error-icon {{
+                            font-size: 4rem;
+                            margin-bottom: 20px;
+                            color: #ef4444;
+                        }}
+                        h2 {{
+                            margin: 0 0 20px 0;
+                            color: #1f2937;
+                            font-size: 1.5rem;
+                        }}
+                        p {{
+                            margin: 10px 0;
+                            color: #6b7280;
+                            line-height: 1.5;
+                        }}
+                        .retry-hint {{
+                            background: #f3f4f6;
+                            padding: 15px;
+                            border-radius: 10px;
+                            margin-top: 20px;
+                            font-size: 0.9rem;
+                        }}
+                    </style>
+                </head>
+                <body>
+                    <div class="container">
+                        <div class="error-icon">❌</div>
+                        <h2>Setup Failed</h2>
+                        <p>{message}</p>
+                        <div class="retry-hint">
+                            <p>You can close this window and try again in ComfyUI.</p>
+                        </div>
+                    </div>
                 </body></html>
                 """, content_type='text/html', status=500)
         
diff --git a/web/dropbox_oauth.js b/web/dropbox_oauth.js
index 2d8c2ca..8177768 100644
--- a/web/dropbox_oauth.js
+++ b/web/dropbox_oauth.js
@@ -58,6 +58,9 @@ app.registerExtension({
             console.log("[DropSendNode] Closed OAuth popup window");
         }
         
+        // Reset any reconnect checkboxes before refreshing
+        this.resetReconnectFields();
+        
         // Refresh ComfyUI interface to update node UI
         setTimeout(() => {
             console.log("[DropSendNode] Refreshing ComfyUI interface after OAuth success");
@@ -65,6 +68,27 @@ app.registerExtension({
         }, 1500); // Small delay to ensure OAuth processing is complete
     },
     
+    resetReconnectFields() {
+        try {
+            // Find all DropboxSetupNode instances and reset their reconnect fields
+            const nodes = app.graph.nodes.filter(node => node.type === "DropboxSetupNode");
+            nodes.forEach(node => {
+                if (node.widgets) {
+                    const reconnectWidget = node.widgets.find(w => w.name === "reconnect");
+                    if (reconnectWidget && reconnectWidget.value === true) {
+                        console.log("[DropSendNode] Resetting reconnect field to false");
+                        reconnectWidget.value = false;
+                        if (node.onWidgetChanged) {
+                            node.onWidgetChanged("reconnect", false);
+                        }
+                    }
+                }
+            });
+        } catch (e) {
+            console.log("[DropSendNode] Could not reset reconnect fields:", e);
+        }
+    },
+    
     handleReconnectSuccess() {
         // Refresh ComfyUI interface to show auth fields again
         setTimeout(() => {
@@ -125,7 +149,7 @@ window.openDropboxOAuth = function(url) {
     const popup = window.open(
         url,
         'dropbox_oauth',
-        'width=500,height=600,scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no'
+        'width=500,height=700,scrollbars=yes,resizable=yes,status=no,location=no,toolbar=no,menubar=no'
     );
     
     if (popup) {