feat(frontend): T44 setup FastAPI static files and templates

- Mount static files on /static endpoint
- Configure Jinja2Templates with directory structure
- Create base template with Pico.css, HTMX, Chart.js
- Create all template subdirectories (auth, dashboard, keys, tokens, profile, components)
- Create initial CSS and JS files
- Add tests for static files and templates configuration

Tests: 12 passing
Coverage: 100% on new configuration code
This commit is contained in:
Luca Sacchi Ricciardi
2026-04-07 17:58:03 +02:00
parent 3ae5d736ce
commit c1f47c897f
16 changed files with 1592 additions and 4 deletions

View File

@@ -0,0 +1,64 @@
{% extends "base.html" %}
{% block title %}Register - OpenRouter Monitor{% endblock %}
{% block content %}
<article class="grid">
<div>
<h1>Create Account</h1>
<p>Register to start monitoring your OpenRouter API keys.</p>
</div>
<div>
<form action="/register" method="POST" hx-post="/register" hx-swap="outerHTML" hx-target="this">
{% if error %}
<div class="alert alert-danger" role="alert">
{{ error }}
</div>
{% endif %}
<label for="email">
Email
<input type="email" id="email" name="email" placeholder="your@email.com" required>
</label>
<label for="password">
Password
<input
type="password"
id="password"
name="password"
placeholder="Password"
required
minlength="8"
pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).+$"
title="Password must contain at least one lowercase letter, one uppercase letter, and one number"
>
<small>Minimum 8 characters with uppercase, lowercase, and number</small>
</label>
<label for="password_confirm">
Confirm Password
<input type="password" id="password_confirm" name="password_confirm" placeholder="Confirm password" required>
</label>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="/login">Login here</a>.</p>
</div>
</article>
<script>
// Client-side password match validation
document.getElementById('password_confirm').addEventListener('input', function() {
const password = document.getElementById('password').value;
const confirm = this.value;
if (password !== confirm) {
this.setCustomValidity('Passwords do not match');
} else {
this.setCustomValidity('');
}
});
</script>
{% endblock %}