login register

assets/i18n/en/main.ftl

@@ -57,12 +57,28 @@ album-by = by
 album-play-full = Play full album
 album-queue-all = queue all tracks in order
 album-no-tracks = no tracks yet
-login-title = Admin login
+login-title = Sign in
 login-error = Access denied - invalid email or password.
+login-error-unverified = Your account isn't verified yet. Check your email and click the verification link.
 login-root = root
-login-auth = Authenticate
+login-auth = Sign in
 login-email = Email
 login-password = Password
+login-no-account = Don't have an account?
+login-have-account = Already have an account?
+nav-login = Sign in
+nav-register = Register
+register-title = Create account
+register-name = Name
+register-submit = Create account
+register-error-exists = An account with this email already exists.
+register-error-invalid = Please check the details you entered and try again.
+verify-sent-title = Check your email
+verify-sent-body = We've sent a verification link to
+verify-ok-title = Account verified
+verify-ok-body = Your account is verified. You can now sign in.
+verify-fail-title = Verification failed
+verify-fail-body = This link is invalid or has expired.
 auth = Auth
 admin-session = Session
 readonly = readonly

assets/i18n/sk/main.ftl

@@ -57,12 +57,28 @@ album-by = od
 album-play-full = Prehrať celý album
 album-queue-all = zoradiť všetky skladby v poradí
 album-no-tracks = zatiaľ žiadne skladby
-login-title = Prihlásenie admina
+login-title = Prihlásenie
 login-error = Prístup odmietnutý - nesprávny e-mail alebo heslo.
+login-error-unverified = Účet ešte nie je overený. Skontrolujte si e-mail a kliknite na overovací odkaz.
 login-root = root
 login-auth = Prihlásiť sa
 login-email = E-mail
 login-password = Heslo
+login-no-account = Nemáte účet?
+login-have-account = Už máte účet?
+nav-login = Prihlásiť sa
+nav-register = Registrácia
+register-title = Vytvoriť účet
+register-name = Meno
+register-submit = Zaregistrovať sa
+register-error-exists = Účet s týmto e-mailom už existuje.
+register-error-invalid = Skontrolujte zadané údaje a skúste to znova.
+verify-sent-title = Skontrolujte si e-mail
+verify-sent-body = Poslali sme overovací odkaz na adresu
+verify-ok-title = Účet overený
+verify-ok-body = Váš účet je overený. Teraz sa môžete prihlásiť.
+verify-fail-title = Overenie zlyhalo
+verify-fail-body = Tento odkaz je neplatný alebo mu vypršala platnosť.
 auth = Overenie
 admin-session = Relácia
 readonly = iba na čítanie

assets/views/admin/base.html

@@ -95,7 +95,7 @@
         <a href="/" class="flex items-center gap-2 rounded-radius px-2 py-1.5 text-sm font-medium text-info underline-offset-2 transition hover:bg-info/5 focus:outline-hidden focus-visible:underline">
           {{ t(key="admin-exit", lang=lang | default(value='sk')) }}
         </a>
-        <form method="post" action="/admin/logout">
+        <form method="post" action="/logout">
           <button type="submit" class="flex w-full items-center gap-2 rounded-radius px-2 py-1.5 text-left text-sm font-medium text-danger underline-offset-2 transition hover:bg-danger/5 focus:outline-hidden focus-visible:underline">
             {{ t(key="logout", lang=lang | default(value='sk')) }}
           </button>

assets/views/auth/login.html

@@ -10,21 +10,23 @@
     <div
       class="flex items-center justify-between border-b border-outline px-5 py-3 dark:border-outline-dark">
       <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
-        {{ t(key="nav-admin", lang=lang | default(value='sk')) }}
+        {{ t(key="brand", lang=lang | default(value='sk')) }}
       </span>
-      {{ ui::badge(label=t(key="auth", lang=lang | default(value='sk')), variant="danger") }}
+      {{ ui::badge(label=t(key="auth", lang=lang | default(value='sk')), variant="primary") }}
     </div>
 
     <div class="p-5">
       <h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
-        {{ t(key="login-auth", lang=lang | default(value='sk')) }}
+        {{ t(key="login-title", lang=lang | default(value='sk')) }}
       </h1>
 
-      {% if error %}
+      {% if error == "unverified" %}
+      {{ ui::alert_danger(message=t(key="login-error-unverified", lang=lang | default(value='sk')), extra="mt-3") }}
+      {% elif error %}
       {{ ui::alert_danger(message=t(key="login-error", lang=lang | default(value='sk')), extra="mt-3") }}
       {% endif %}
 
-      <form method="post" action="/admin/login" hx-boost="false" class="mt-4 flex flex-col gap-4">
+      <form method="post" action="/login" hx-boost="false" class="mt-4 flex flex-col gap-4">
         <div class="flex flex-col gap-1">
           <label for="email"
             class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
@@ -43,6 +45,12 @@
 
         {{ ui::button(label=t(key="login-auth", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full") }}
       </form>
+
+      <p class="mt-4 text-sm text-on-surface dark:text-on-surface-dark">
+        {{ t(key="login-no-account", lang=lang | default(value='sk')) }}
+        <a href="/register"
+          class="font-medium text-primary underline-offset-2 hover:underline dark:text-primary-dark">{{ t(key="nav-register", lang=lang | default(value='sk')) }}</a>
+      </p>
     </div>
   </div>
 </div>

assets/views/auth/register.html

@@ -0,0 +1,65 @@
+{% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
+
+{% block title %}{{ t(key="register-title", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<div class="mx-auto mt-8 max-w-sm">
+  <div
+    class="rounded-radius border border-outline bg-surface-alt shadow-sm dark:border-outline-dark dark:bg-surface-dark-alt">
+    <div
+      class="flex items-center justify-between border-b border-outline px-5 py-3 dark:border-outline-dark">
+      <span class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
+        {{ t(key="brand", lang=lang | default(value='sk')) }}
+      </span>
+      {{ ui::badge(label=t(key="auth", lang=lang | default(value='sk')), variant="primary") }}
+    </div>
+
+    <div class="p-5">
+      <h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+        {{ t(key="register-title", lang=lang | default(value='sk')) }}
+      </h1>
+
+      {% if error == "exists" %}
+      {{ ui::alert_danger(message=t(key="register-error-exists", lang=lang | default(value='sk')), extra="mt-3") }}
+      {% elif error %}
+      {{ ui::alert_danger(message=t(key="register-error-invalid", lang=lang | default(value='sk')), extra="mt-3") }}
+      {% endif %}
+
+      <form method="post" action="/register" hx-boost="false" class="mt-4 flex flex-col gap-4">
+        <div class="flex flex-col gap-1">
+          <label for="name"
+            class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
+            {{ t(key="register-name", lang=lang | default(value='sk')) }}
+          </label>
+          {{ ui::input(name="name", id="name", required=true, autocomplete="name", attrs="autofocus") }}
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="email"
+            class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
+            {{ t(key="login-email", lang=lang | default(value='sk')) }}
+          </label>
+          {{ ui::input(name="email", id="email", type="email", required=true, autocomplete="email") }}
+        </div>
+
+        <div class="flex flex-col gap-1">
+          <label for="password"
+            class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">
+            {{ t(key="login-password", lang=lang | default(value='sk')) }}
+          </label>
+          {{ ui::input(name="password", id="password", type="password", required=true, autocomplete="new-password") }}
+        </div>
+
+        {{ ui::button(label=t(key="register-submit", lang=lang | default(value='sk')), type="submit", extra="mt-1 w-full") }}
+      </form>
+
+      <p class="mt-4 text-sm text-on-surface dark:text-on-surface-dark">
+        {{ t(key="login-have-account", lang=lang | default(value='sk')) }}
+        <a href="/login"
+          class="font-medium text-primary underline-offset-2 hover:underline dark:text-primary-dark">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</a>
+      </p>
+    </div>
+  </div>
+</div>
+{% endblock content %}

assets/views/auth/verified.html

@@ -0,0 +1,27 @@
+{% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
+
+{% block title %}{% if ok %}{{ t(key="verify-ok-title", lang=lang | default(value='sk')) }}{% else %}{{ t(key="verify-fail-title", lang=lang | default(value='sk')) }}{% endif %}{% endblock title %}
+
+{% block content %}
+<div class="mx-auto mt-8 max-w-sm">
+  <div
+    class="rounded-radius border border-outline bg-surface-alt p-5 shadow-sm dark:border-outline-dark dark:bg-surface-dark-alt">
+    {% if ok %}
+    <h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+      {{ t(key="verify-ok-title", lang=lang | default(value='sk')) }}
+    </h1>
+    <p class="mt-3 text-sm text-on-surface dark:text-on-surface-dark">
+      {{ t(key="verify-ok-body", lang=lang | default(value='sk')) }}
+    </p>
+    {{ ui::button(label=t(key="login-auth", lang=lang | default(value='sk')), href="/login", extra="mt-4 w-full") }}
+    {% else %}
+    <h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+      {{ t(key="verify-fail-title", lang=lang | default(value='sk')) }}
+    </h1>
+    {{ ui::alert_danger(message=t(key="verify-fail-body", lang=lang | default(value='sk')), extra="mt-3") }}
+    {{ ui::button(label=t(key="nav-login", lang=lang | default(value='sk')), href="/login", variant="outline-primary", extra="mt-4 w-full") }}
+    {% endif %}
+  </div>
+</div>
+{% endblock content %}

assets/views/auth/verify_sent.html

@@ -0,0 +1,20 @@
+{% extends "base.html" %}
+{% import "macros/ui.html" as ui %}
+
+{% block title %}{{ t(key="verify-sent-title", lang=lang | default(value='sk')) }}{% endblock title %}
+
+{% block content %}
+<div class="mx-auto mt-8 max-w-sm">
+  <div
+    class="rounded-radius border border-outline bg-surface-alt p-5 shadow-sm dark:border-outline-dark dark:bg-surface-dark-alt">
+    <h1 class="text-xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">
+      {{ t(key="verify-sent-title", lang=lang | default(value='sk')) }}
+    </h1>
+    <p class="mt-3 text-sm text-on-surface dark:text-on-surface-dark">
+      {{ t(key="verify-sent-body", lang=lang | default(value='sk')) }}
+      <span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ email }}</span>
+    </p>
+    {{ ui::button(label=t(key="nav-login", lang=lang | default(value='sk')), href="/login", variant="outline-primary", extra="mt-4 w-full") }}
+  </div>
+</div>
+{% endblock content %}

assets/views/base.html

@@ -81,12 +81,13 @@
           {% if logged_in_admin %}
           <li>{{ ui::nav_link(label=t(key="admin-title", lang=lang | default(value='sk')), href="/admin/dashboard", data_nav="/admin", variant="warning", attrs='hx-boost="false"') }}</li>
           <li>
-            <form method="post" action="/admin/logout" hx-boost="false">
+            <form method="post" action="/logout" hx-boost="false">
               <button type="submit" class="text-sm font-medium text-danger underline-offset-2 transition hover:opacity-75 focus:outline-hidden focus-visible:underline">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
             </form>
           </li>
           {% else %}
-          <li>{{ ui::nav_link(label=t(key="nav-admin", lang=lang | default(value='sk')), href="/admin/login", data_nav="/admin/login") }}</li>
+          <li>{{ ui::nav_link(label=t(key="nav-login", lang=lang | default(value='sk')), href="/login", data_nav="/login") }}</li>
+          <li>{{ ui::nav_link(label=t(key="nav-register", lang=lang | default(value='sk')), href="/register", data_nav="/register") }}</li>
           {% endif %}
         </ul>
 
@@ -126,12 +127,13 @@
           {% if logged_in_admin %}
           <li><a href="/admin/dashboard" hx-boost="false" data-nav="/admin" class="block rounded-radius px-3 py-2 text-sm font-medium text-warning underline-offset-2 transition hover:bg-primary/5 focus:outline-hidden focus-visible:underline">{{ t(key="admin-title", lang=lang | default(value='sk')) }}</a></li>
           <li>
-            <form method="post" action="/admin/logout" hx-boost="false">
+            <form method="post" action="/logout" hx-boost="false">
               <button type="submit" class="block w-full rounded-radius px-3 py-2 text-left text-sm font-medium text-danger underline-offset-2 transition hover:bg-primary/5 focus:outline-hidden focus-visible:underline">{{ t(key="logout", lang=lang | default(value='sk')) }}</button>
             </form>
           </li>
           {% else %}
-          <li><a href="/admin/login" data-nav="/admin/login" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-admin", lang=lang | default(value='sk')) }}</a></li>
+          <li><a href="/login" data-nav="/login" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-login", lang=lang | default(value='sk')) }}</a></li>
+          <li><a href="/register" data-nav="/register" class="block rounded-radius px-3 py-2 text-sm font-medium text-on-surface underline-offset-2 transition hover:bg-primary/5 hover:text-primary focus:outline-hidden focus-visible:underline aria-[current=page]:font-semibold aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary dark:text-on-surface-dark dark:hover:text-primary-dark dark:aria-[current=page]:text-primary-dark">{{ t(key="nav-register", lang=lang | default(value='sk')) }}</a></li>
           {% endif %}
         </ul>
       </nav>