From af7f639c208dc1524a004c3eab8a7af32f7657e3 Mon Sep 17 00:00:00 2001
From: Hiro <hiro@openclaw.ai>
Date: Sat, 28 Mar 2026 11:56:21 +0000
Subject: [PATCH] fix: login form handlers not executing on innerHTML injection

---
 public/js/app.js         | 21 ++++++++++-----------
 public/js/views/login.js | 27 ++++++++++++++++-----------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/public/js/app.js b/public/js/app.js
index c7c8833..db6426e 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -1,7 +1,7 @@
 // SimpleNote Web - Main Application
 
 import { api } from './api.js';
-import { renderLogin } from './views/login.js';
+import { renderLogin, initLoginHandlers } from './views/login.js';
 import { renderDashboard } from './views/dashboard.js';
 import { renderDocument } from './views/document.js';
 import { renderEditor } from './views/editor.js';
@@ -36,16 +36,15 @@ class App {
 
   renderLogin() {
     const app = document.getElementById('app');
-    app.innerHTML = renderLogin({
-      onLogin: async (token) => {
-        try {
-          await api.login(token);
-          this.state.token = token;
-          this.state.view = 'dashboard';
-          this.render();
-        } catch (e) {
-          return 'Invalid token';
-        }
+    app.innerHTML = renderLogin();
+    initLoginHandlers(async (token) => {
+      try {
+        await api.login(token);
+        this.state.token = token;
+        this.state.view = 'dashboard';
+        this.render();
+      } catch (e) {
+        return 'Invalid token';
       }
     });
   }
diff --git a/public/js/views/login.js b/public/js/views/login.js
index 274283e..dde7b2d 100644
--- a/public/js/views/login.js
+++ b/public/js/views/login.js
@@ -1,6 +1,6 @@
 // Login View
 
-export function renderLogin({ onLogin }) {
+export function renderLogin() {
   return `
     <div class="login-screen">
       <div class="login-card">
@@ -15,15 +15,20 @@ export function renderLogin({ onLogin }) {
         </form>
       </div>
     </div>
-    <script>
-      document.getElementById('login-form').onsubmit = async (e) => {
-        e.preventDefault();
-        const token = document.getElementById('token-input').value;
-        const error = await onLogin(token);
-        if (error) {
-          document.getElementById('login-error').classList.add('visible');
-        }
-      };
-    </script>
   `;
 }
+
+export function initLoginHandlers(onLogin) {
+  const form = document.getElementById('login-form');
+  const errorEl = document.getElementById('login-error');
+  
+  form.onsubmit = async (e) => {
+    e.preventDefault();
+    errorEl.classList.remove('visible');
+    const token = document.getElementById('token-input').value;
+    const error = await onLogin(token);
+    if (error) {
+      errorEl.classList.add('visible');
+    }
+  };
+}