67 lines
2.2 KiB
HTML
67 lines
2.2 KiB
HTML
{% extends "layout.html" %}
|
|
{% block content %}
|
|
|
|
<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">Register</h2>
|
|
|
|
<form method="post" action="{{ url_for('register') }}" style="display:flex; flex-direction:column; gap:12px;">
|
|
<label>
|
|
<div class="label-muted">Username</div>
|
|
<input name="username" id="reg-username" type="text" placeholder="choose a username" required>
|
|
</label>
|
|
|
|
<label>
|
|
<div class="label-muted">Password</div>
|
|
<div style="position:relative;">
|
|
<input name="password" id="reg-password" type="password" placeholder="create a password" required style="padding-right:92px;">
|
|
<button type="button" id="reg-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:flex-end;">
|
|
<a href="{{ url_for('login') }}" class="label-muted" style="text-decoration:none; color:var(--muted);">Already have an account?</a>
|
|
<button class="btn" type="submit" style="min-width:120px;">Register</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// autofocus username
|
|
document.getElementById('reg-username')?.focus();
|
|
|
|
// password toggle
|
|
(function(){
|
|
const pw = document.getElementById('reg-password');
|
|
const btn = document.getElementById('reg-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 %}
|