Update app.py

app.py

@@ -130,22 +130,64 @@ input[type="text"], input[type="password"], textarea {
 }
 """
 
-# Function to generate a login URL
-def get_login_url():
-    # Get the space host from environment variable
+# JavaScript login implementation
+def js_login_script():
     space_host = os.environ.get("SPACE_HOST", "localhost:7860")
-    print(f"Space host: {space_host}")
+    redirect_uri = f"https://{space_host}"
     
-    # Construct the full redirect URL
-    redirect_uri = f"https://{space_host}/auth/callback"
-    
-    # Create the complete authorization URL
-    auth_url = f"https://huggingface.co/oauth/authorize?client_id=hf&redirect_uri={redirect_uri}&scope=openid%20profile&response_type=code"
-    
-    # Return JavaScript to open the login page
     return f"""
+    <script src="https://unpkg.com/@huggingface/[email protected]/dist/index.umd.min.js"></script>
     <script>
-    window.open("{auth_url}", "_blank");
+    (async function() {{
+        const HfHub = window.HfHub;
+        try {{
+            // Check if we're returning from OAuth redirect
+            const oauthResult = await HfHub.oauthHandleRedirectIfPresent();
+            
+            if (oauthResult) {{
+                console.log("User logged in:", oauthResult);
+                
+                // Store the user info in localStorage
+                localStorage.setItem("hf_user", JSON.stringify(oauthResult.userInfo));
+                localStorage.setItem("hf_token", oauthResult.accessToken);
+                
+                // Update the UI to show logged in state
+                document.getElementById("login-status").textContent = "Logged in as: " + oauthResult.userInfo.name;
+                document.getElementById("login-button").style.display = "none";
+                
+                // Refresh the page to update server-side state
+                setTimeout(() => window.location.reload(), 1000);
+            }}
+        }} catch (error) {{
+            console.error("OAuth error:", error);
+        }}
+        
+        // Check if user is already logged in from localStorage
+        const storedUser = localStorage.getItem("hf_user");
+        if (storedUser) {{
+            try {{
+                const userInfo = JSON.parse(storedUser);
+                document.getElementById("login-status").textContent = "Logged in as: " + userInfo.name;
+                document.getElementById("login-button").style.display = "none";
+            }} catch (e) {{
+                console.error("Error parsing stored user:", e);
+            }}
+        }}
+        
+        // Setup login button
+        document.getElementById("login-button").addEventListener("click", async function() {{
+            try {{
+                const loginUrl = await HfHub.oauthLoginUrl({{
+                    redirectUrl: "{redirect_uri}",
+                    scopes: ["openid", "profile"]
+                }});
+                window.location.href = loginUrl;
+            }} catch (error) {{
+                console.error("Error generating login URL:", error);
+                alert("Error starting login process. Please try again.");
+            }}
+        }});
+    }})();
     </script>
     """
 
@@ -163,8 +205,8 @@ def check_user(request: gr.Request):
                 is_admin = (username == "Quazim0t0")
                 db.add_user(username, username, is_admin)
                 user = db.get_user_by_username(username)
-            return f"Logged in as: {username}", username, gr.update(visible=False), gr.update(visible=True)
-    return "Not logged in", None, gr.update(visible=True), gr.update(visible=False)
+            return username
+    return None
 
 # Start evaluation queue worker
 def start_queue_worker():
@@ -182,15 +224,17 @@ with gr.Blocks(css=css, title="Dynamic Highscores") as app:
     user_state = gr.State(None)
     
     # Login section
-    with gr.Row(visible=True, elem_classes=["login-section"]) as login_section:
+    with gr.Row(elem_classes=["login-section"]):
         with gr.Column():
-            status_display = gr.Markdown("Checking login status...")
-            login_button = gr.Button("Login with HuggingFace", variant="primary", visible=True, elem_classes=["login-button"])
+            gr.HTML("""
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+                <div id="login-status">Not logged in</div>
+                <button id="login-button" style="padding: 8px 16px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;">Login with HuggingFace</button>
+            </div>
+            """)
     
-    # User info section
-    with gr.Row(visible=False, elem_classes=["login-section"]) as user_section:
-        with gr.Column():
-            user_info = gr.Markdown("User information")
+    # Add the JS login script
+    gr.HTML(js_login_script())
     
     gr.Markdown("# 🏆 Dynamic Highscores", elem_classes=["header"])
     gr.Markdown("""
@@ -223,14 +267,11 @@ with gr.Blocks(css=css, title="Dynamic Highscores") as app:
     Created by Quazim0t0
     """, elem_classes=["footer"])
     
-    # Connect login handler
-    login_button.click(fn=get_login_url, inputs=[], outputs=[gr.HTML()])
-    
     # Check login on page load
     app.load(
         fn=check_user,
         inputs=[],
-        outputs=[status_display, user_state, login_section, user_section]
+        outputs=[user_state]
     )
 
 # Launch the app