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:
64
templates/auth/register.html
Normal file
64
templates/auth/register.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user