76 lines
2.5 KiB
HTML
76 lines
2.5 KiB
HTML
{% extends "layout.html" %}
|
|
{% block content %}
|
|
|
|
<!-- safe to include even if layout already loads it -->
|
|
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
|
|
|
|
<div style="max-width:520px; margin:28px auto;">
|
|
{% with messages = get_flashed_messages() %}
|
|
{% if messages %}
|
|
<ul>
|
|
{% for m in messages %}
|
|
<li>{{ m }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
{% endif %}
|
|
{% endwith %}
|
|
|
|
<div class="card" style="padding:22px;">
|
|
<h2 style="margin-top:0">Login</h2>
|
|
|
|
<form method="post" action="{{ url_for('login') }}" style="display:flex; flex-direction:column; gap:12px;">
|
|
<label>
|
|
<div class="label-muted">Username</div>
|
|
<input name="username" id="username" type="text" placeholder="your username" required>
|
|
</label>
|
|
|
|
<label>
|
|
<div class="label-muted" style="display:flex; justify-content:space-between; align-items:center;">
|
|
<span>Password</span>
|
|
<a href="{{ url_for('register') }}" style="font-size:13px; color:var(--muted); text-decoration:none;">Create account</a>
|
|
</div>
|
|
<div style="position:relative;">
|
|
<input name="password" id="password" type="password" placeholder="your password" required style="padding-right:92px;">
|
|
<button type="button" id="pw-toggle" style="position:absolute; right:6px; top:6px; height:36px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:transparent; color:var(--muted); padding:6px 10px; cursor:pointer;">
|
|
Show
|
|
</button>
|
|
</div>
|
|
</label>
|
|
|
|
<div style="display:flex; gap:10px; align-items:center; justify-content:space-between;">
|
|
<label style="display:flex; gap:8px; align-items:center; font-size:14px; color:var(--muted);">
|
|
<input type="checkbox" name="remember" style="width:16px; height:16px;">
|
|
Remember
|
|
</label>
|
|
|
|
<button class="btn" type="submit" style="min-width:120px;">Login</button>
|
|
</div>
|
|
</form>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// autofocus username
|
|
document.getElementById('username')?.focus();
|
|
|
|
// password toggle
|
|
(function(){
|
|
const pw = document.getElementById('password');
|
|
const btn = document.getElementById('pw-toggle');
|
|
if (!pw || !btn) return;
|
|
btn.addEventListener('click', () => {
|
|
if (pw.type === 'password') {
|
|
pw.type = 'text';
|
|
btn.innerText = 'Hide';
|
|
} else {
|
|
pw.type = 'password';
|
|
btn.innerText = 'Show';
|
|
}
|
|
pw.focus();
|
|
});
|
|
})();
|
|
</script>
|
|
|
|
{% endblock %}
|