fix: login form handlers not executing on innerHTML injection

This commit is contained in:
Hiro
2026-03-28 11:56:21 +00:00
parent 538e99adab
commit af7f639c20
2 changed files with 26 additions and 22 deletions

View File

@@ -1,7 +1,7 @@
// SimpleNote Web - Main Application // SimpleNote Web - Main Application
import { api } from './api.js'; 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 { renderDashboard } from './views/dashboard.js';
import { renderDocument } from './views/document.js'; import { renderDocument } from './views/document.js';
import { renderEditor } from './views/editor.js'; import { renderEditor } from './views/editor.js';
@@ -36,16 +36,15 @@ class App {
renderLogin() { renderLogin() {
const app = document.getElementById('app'); const app = document.getElementById('app');
app.innerHTML = renderLogin({ app.innerHTML = renderLogin();
onLogin: async (token) => { initLoginHandlers(async (token) => {
try { try {
await api.login(token); await api.login(token);
this.state.token = token; this.state.token = token;
this.state.view = 'dashboard'; this.state.view = 'dashboard';
this.render(); this.render();
} catch (e) { } catch (e) {
return 'Invalid token'; return 'Invalid token';
}
} }
}); });
} }

View File

@@ -1,6 +1,6 @@
// Login View // Login View
export function renderLogin({ onLogin }) { export function renderLogin() {
return ` return `
<div class="login-screen"> <div class="login-screen">
<div class="login-card"> <div class="login-card">
@@ -15,15 +15,20 @@ export function renderLogin({ onLogin }) {
</form> </form>
</div> </div>
</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');
}
};
}