registration

web/templates/pages/login/login.html

@@ -11,6 +11,7 @@
     <label>Username or email<input name="identifier" autocomplete="username"></label>
     <label>Password <span>(optional)</span><input name="password" type="password" autocomplete="current-password"></label>
     <button type="submit">Login</button>
+    <p class="login-alt">No account yet? <a href="/register">Register</a></p>
     <div id="login-status" aria-live="polite"></div>
   </form>
 </main>

web/templates/pages/register/register.html

@@ -0,0 +1,37 @@
+{# GET /register — crate::pages::register::ui::RegisterPage #}
+{% extends "ui/base.html" %}
+
+{% block title %}Register{% 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>Register</h1>
+    <label>Username<input name="username" autocomplete="username"></label>
+    <label>Email<input name="email" type="email" autocomplete="email"></label>
+    <label>Password <span>(optional)</span><input name="password" type="password" autocomplete="new-password"></label>
+    <label>Confirm password<input name="password_confirmation" type="password" autocomplete="new-password"></label>
+    {#
+      The three 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.
+    #}
+    <label>Role<input name="role" list="role-options" autocomplete="off"></label>
+    <datalist id="role-options">
+      {% for role in roles %}<option value="{{ role }}"></option>{% endfor %}
+    </datalist>
+    <label>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>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">Register</button>
+    <p class="login-alt">Already have an account? <a href="/login">Sign in</a></p>
+    <div id="register-status" aria-live="polite"></div>
+  </form>
+</main>
+{% endblock %}