48hr.email/infrastructure/web/views/login-auth.twig
ClaraCrazy 598cea9b9c
[Feat]: Add User Registration
Add User table to sql, add user-repository, add registration and login routes, update config
2026-01-02 16:27:43 +01:00

85 lines
3.2 KiB
Twig

{% extends 'layout.twig' %}
{% block header %}
<div class="action-links">
<a href="/" aria-label="Return to home">← Home</a>
<a href="/register" aria-label="Register">Register</a>
<button class="theme-toggle" id="themeToggle" aria-label="Toggle dark/light mode">
<svg class="theme-icon theme-icon-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
<svg class="theme-icon theme-icon-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
</svg>
</button>
</div>
{% endblock %}
{% block body %}
<div id="login-auth" class="auth-container">
<div class="auth-card">
<h1>Welcome Back</h1>
<p class="auth-subtitle">Login to access your account</p>
{% if errorMessage %}
<div class="unlock-error">
{{ errorMessage }}
</div>
{% endif %}
{% if successMessage %}
<div class="success-message">
{{ successMessage }}
</div>
{% endif %}
<form method="POST" action="/login">
<fieldset>
<label for="username">Username</label>
<input
type="text"
id="username"
name="username"
placeholder="Enter your username"
required
autocomplete="username"
>
<label for="password">Password</label>
<input
type="password"
id="password"
name="password"
placeholder="Enter your password"
required
autocomplete="current-password"
>
<div class="auth-actions">
<button class="button button-primary" type="submit">Login</button>
</div>
</fieldset>
</form>
<div class="auth-footer">
<p>Don't have an account? <a href="/register">Register here</a></p>
</div>
</div>
<div class="auth-features">
<h3>Account Features</h3>
<ul>
<li>✓ Forward emails to verified addresses</li>
<li>✓ Lock and protect up to 5 inboxes</li>
<li>✓ Manage forwarding destinations</li>
<li>✓ Access from any device</li>
</ul>
<div class="auth-guest-section">
<h4>Guest Access</h4>
<p>You can still use temporary inboxes without an account, but forwarding and locking require registration.</p>
<a href="/" class="button">Browse as Guest</a>
</div>
</div>
</div>
{% endblock %}