feat: add frontend UI for SimpleNote Web
- Vanilla JS frontend with dark theme - Dashboard with sidebar (libraries tree, tags), document grid, search - Document viewer with markdown rendering and metadata panel - Document editor with split write/preview and formatting toolbar - Login screen with token authentication - All styled according to UI/UX specs (dark theme, accent #00d4aa) - API client for all endpoints - Responsive design
This commit is contained in:
29
public/js/views/login.js
Normal file
29
public/js/views/login.js
Normal file
@@ -0,0 +1,29 @@
|
||||
// Login View
|
||||
|
||||
export function renderLogin({ onLogin }) {
|
||||
return `
|
||||
<div class="login-screen">
|
||||
<div class="login-card">
|
||||
<h1>📝 SimpleNote</h1>
|
||||
<p>Enter your API token to continue</p>
|
||||
<form class="login-form" id="login-form">
|
||||
<div class="form-group">
|
||||
<input type="password" id="token-input" placeholder="API Token" autocomplete="off" required>
|
||||
</div>
|
||||
<p class="login-error" id="login-error">Invalid token. Please try again.</p>
|
||||
<button type="submit" class="btn btn-primary" style="width:100%">Login</button>
|
||||
</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>
|
||||
`;
|
||||
}
|
||||
Reference in New Issue
Block a user