john-okeefe
533f8747e3
- Add defer attribute to <script src="/static/main.js"> in 21 template files - Improves page load performance by allowing HTML parsing to continue without blocking - Maintains script execution order while enabling parallel resource loading - Remove duplicate defer attribute from header.templ line 264 - Add websocket.ts import to main.ts for module registration This optimization reduces page render blocking and improves perceived load times by allowing the browser to continue parsing HTML while the main.js bundle loads. The defer attribute ensures scripts execute in order after HTML parsing completes. Affected templates include: - Admin pages: admin, admin_library, admin_settings, admin_users - Content pages: analytics, bookshelf, collections, conflicts, custom_section - User pages: dashboard, devices, docs, index, login, profile, progress, queue, register - System pages: header, unlinked_books
67 lines
3.1 KiB
Templ
67 lines
3.1 KiB
Templ
package templates
|
|
|
|
templ Login(sessionExpired bool, deleted bool) {
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8"/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<title>Login</title>
|
|
<script src="/static/htmx.min.js"></script>
|
|
<script src="/static/main.js" defer></script>
|
|
<link href="/static/style.css" rel="stylesheet"/>
|
|
</head>
|
|
<body class="theme-tokyo-night min-h-screen" x-data="login" x-init="initLoginTheme()">
|
|
<div class="container mx-auto px-4 py-8 max-w-md">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<h1 class="text-3xl font-bold">Login to Bookhoard</h1>
|
|
<select id="theme-select" @change="changeTheme()" class="px-3 py-2 border rounded" style="background-color: var(--bg-secondary); color: var(--text-primary); border-color: var(--border)">
|
|
<option value="tokyo-night">Tokyo Night</option>
|
|
<option value="dracula">Dracula</option>
|
|
<option value="nord">Nord</option>
|
|
<option value="solarized-dark">Solarized Dark</option>
|
|
<option value="monokai">Monokai</option>
|
|
<option value="one-dark-pro">One Dark Pro</option>
|
|
<option value="material-dark">Material Dark</option>
|
|
<option value="catppuccin-mocha">Catppuccin Mocha</option>
|
|
<option value="catppuccin-macchiato">Catppuccin Macchiato</option>
|
|
<option value="catppuccin-frappe">Catppuccin Frappé</option>
|
|
<option value="catppuccin-latte">Catppuccin Latte</option>
|
|
</select>
|
|
</div>
|
|
if sessionExpired {
|
|
<div class="mb-4 p-3 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--accent);">
|
|
<p style="color: var(--text-primary);">
|
|
Your session has expired. Please log in again to continue.
|
|
</p>
|
|
</div>
|
|
}
|
|
if deleted {
|
|
<div class="mb-4 p-3 rounded-lg border" style="background-color: var(--bg-secondary); border-color: var(--accent);">
|
|
<p style="color: var(--text-primary);">
|
|
Your account has been deleted successfully.
|
|
</p>
|
|
</div>
|
|
}
|
|
<form hx-post="/api/auth/login" hx-target="#result" hx-swap="innerHTML" class="card p-6 rounded-lg shadow-md border">
|
|
<div class="mb-4">
|
|
<label class="block mb-2" style="color: var(--text-secondary)">Email or Username</label>
|
|
<input type="text" name="login" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
|
|
</div>
|
|
<div class="mb-4">
|
|
<label class="block mb-2" style="color: var(--text-secondary)">Password</label>
|
|
<input type="password" name="password" class="w-full px-3 py-2 border rounded" style="background-color: var(--bg-primary); color: var(--text-primary); border-color: var(--border)" required/>
|
|
</div>
|
|
<button type="submit" class="btn-primary w-full py-2 rounded">
|
|
Sign In
|
|
</button>
|
|
</form>
|
|
<div id="result" class="mt-4 text-center"></div>
|
|
<p class="text-center mt-4">
|
|
<a href="/register" class="text-blue-500 hover:underline">Don't have an account? Sign Up</a>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
}
|