fix: login form handlers not executing on innerHTML injection
This commit is contained in:
@@ -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';
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user