Files
komp_ac/web/templates/pages/register/register.html
2026-08-14 20:35:37 +02:00

37 lines
2.1 KiB
HTML

{# GET /register — crate::pages::register::ui::RegisterPage #}
{% extends "ui/base.html" %}
{% block title %}{{ nav.tr("register-title") }}{% endblock %}
{% block content %}
<main class="login-main">
<form class="login-card" hx-post="/register" hx-target="#register-status" hx-swap="innerHTML"
hx-disabled-elt="button" novalidate>
<h1>{{ nav.tr("register-title") }}</h1>
<label>{{ nav.tr("field-username") }}<input name="username" autocomplete="username"></label>
<label>{{ nav.tr("field-email") }}<input name="email" type="email" autocomplete="email"></label>
<label>{{ nav.tr("login-password") }} <span>{{ nav.tr("login-optional") }}</span><input name="password" type="password" autocomplete="new-password"></label>
<label>{{ nav.tr("register-confirm-password") }}<input name="password_confirmation" type="password" autocomplete="new-password"></label>
{#
The two fields the client offers suggestions for. A datalist keeps the
lists open — the backend, not this form, decides what is accepted — while
still showing the same choices the client's suggestion popup does.
There is no role field: everyone registers as `guest` and an admin
assigns a real role afterwards.
#}
<label>{{ nav.tr("field-timezone") }}<input name="timezone" list="timezone-options" autocomplete="off" placeholder="Europe/Bratislava"></label>
<datalist id="timezone-options">
{% for timezone in timezones %}<option value="{{ timezone }}"></option>{% endfor %}
</datalist>
<label>{{ nav.tr("field-phone-country") }}<input name="phone_country" list="phone-country-options" autocomplete="off" placeholder="SK"></label>
<datalist id="phone-country-options">
{% for country in phone_countries %}<option value="{{ country }}"></option>{% endfor %}
</datalist>
<button type="submit">{{ nav.tr("register-button-register") }}</button>
<p class="login-alt">{{ nav.tr("register-have-account") }} <a href="/login">{{ nav.tr("login-title") }}</a></p>
<div id="register-status" aria-live="polite"></div>
</form>
</main>
{% endblock %}