11 files changed, 722 insertions, 54 deletions

diff --git a/authentication/endpoints.py b/authentication/endpoints.py
index 6877383..3af49fc 100644
--- a/authentication/endpoints.py
+++ b/authentication/endpoints.py
@@ -6,6 +6,7 @@ from uuid import uuid7
 
 from fastapi import FastAPI, Request, Form, Query
 from pydantic import BaseModel, ValidationError, model_validator, EmailStr
+from sqlalchemy import func
 from sqlmodel import select
 from starlette.authentication import requires
 from starlette.middleware.authentication import AuthenticationMiddleware
@@ -106,10 +107,17 @@ class RegisterForm(BaseModel):
         return self
 
 
+def is_first_run() -> bool:
+    with get_session_context() as session:
+        user_count = session.exec(select(func.count(User.id)))
+        return user_count.first() == 0
+
+
 async def base_register(request: Request, form: RegisterForm | None = None, errors: dict[str, str] | None = None):
     return templates.TemplateResponse(request, 'register.html', context={
         'form': form,
         'errors': errors,
+        'is_first_run': is_first_run(),
     })
 
 
@@ -145,7 +153,7 @@ async def post_register(request: Request, email: Annotated[str, Form()] = '', pa
             return RedirectResponse(next, status_code=303)
 
     except ValidationError as exc:
-        errors.update({e['loc'][0]: e['msg'] for e in exc.errors()})
+        errors.update({(e['loc'][0] if e['loc'] else 'verify_password'): e['msg'] for e in exc.errors()})
 
     return await base_register(request, form, errors)
 
diff --git a/authentication/templates/base.html b/authentication/templates/base.html
index 9874313..ae6cb64 100644
--- a/authentication/templates/base.html
+++ b/authentication/templates/base.html
@@ -1,4 +1,20 @@
 {% extends 'global.html' %}
+{% import 'macros.html' as ui %}
 {% block template %}
-    {% block content %}{% endblock %}
+<div class="auth-page">
+    <div class="auth-shell">
+        <div class="auth-hero">
+            <div class="auth-hero__brand">{{ ui.connector_icon(20) }} ttun</div>
+            <div class="auth-hero__diagram">
+                <span class="mono">local:3000</span>
+                <span class="connector">{{ ui.connector_icon(20) }}</span>
+                <span class="mono">your-app.ttun.dev</span>
+            </div>
+            <p class="auth-hero__tagline">Self-hosted tunnel proxy. Expose a local port through a public URL you control.</p>
+        </div>
+        <div class="auth-form">
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+</div>
 {% endblock %}
diff --git a/authentication/templates/login.html b/authentication/templates/login.html
index 2db2512..dcc0efd 100644
--- a/authentication/templates/login.html
+++ b/authentication/templates/login.html
@@ -1,18 +1,13 @@
 {% extends "./base.html" %}
+{% import 'macros.html' as ui %}
 
 {% block content %}
+    <h1>Sign in</h1>
+    <p class="auth-form__intro">Enter your credentials to manage this server.</p>
     <form method="post">
-
-        <input type="text" name="username" {% if form %}value="{{ form.username }}"{% endif %} placeholder="username" />
-        {% if errors and errors.username %}
-            {{ errors.username }}
-        {% endif %}
-
-
-        <input type="password" name="password" />
-        {% if errors and errors.password%}
-            {{ errors.password }}
-        {% endif %}
-        <button type="submit">Login</button>
+        {{ ui.field('username', label='Username', value=form.username if form else '', error=errors.username if errors else '') }}
+        {{ ui.field('password', type='password', label='Password', error=errors.password if errors else '') }}
+        {{ ui.button('Sign in') }}
     </form>
-{%  endblock %}
+    <p class="auth-switch">New here? <a href="/auth/register/">Create an account</a></p>
+{% endblock %}
diff --git a/authentication/templates/register.html b/authentication/templates/register.html
index 576db78..a1959eb 100644
--- a/authentication/templates/register.html
+++ b/authentication/templates/register.html
@@ -1,24 +1,19 @@
 {% extends "./base.html" %}
+{% import 'macros.html' as ui %}
 
 {% block content %}
+    {% if is_first_run %}
+        <h1>Set up your ttun server</h1>
+        <p class="auth-form__intro">This will be the first account, with full access to manage this server.</p>
+    {% else %}
+        <h1>Create your account</h1>
+        <p class="auth-form__intro">This account will be able to sign in and manage this server.</p>
+    {% endif %}
     <form method="post">
-
-        <input type="email" name="email" {% if form %}value="{{ form.email }}"{% endif %} placeholder="email" />
-        {% if errors and errors.email%}
-            {{ errors.email }}
-        {% endif %}
-
-
-        <input type="password" name="password" />
-        {% if errors and errors.password%}
-            {{ errors.password }}
-        {% endif %}
-
-        <input type="password" name="verify_password" />
-        {% if errors and errors.password%}
-            {{ errors.verify_password }}
-        {% endif %}
-
-        <button type="submit">Register</button>
+        {{ ui.field('email', type='email', label='Email', value=form.email if form else '', error=errors.email if errors else '') }}
+        {{ ui.field('password', type='password', label='Password', error=errors.password if errors else '') }}
+        {{ ui.field('verify_password', type='password', label='Confirm password', error=errors.verify_password if errors else '') }}
+        {{ ui.button('Create account') }}
     </form>
-{%  endblock %}
+    <p class="auth-switch">Already have an account? <a href="/auth/login/">Sign in</a></p>
+{% endblock %}
diff --git a/management/endpoints.py b/management/endpoints.py
index 47602d6..ef44114 100644
--- a/management/endpoints.py
+++ b/management/endpoints.py
@@ -1,7 +1,9 @@
+from functools import wraps
+from urllib.parse import urlencode
+
 from fastapi import FastAPI, Request
 from sqlalchemy import func
 from sqlmodel import select
-from starlette.authentication import requires
 from starlette.middleware.authentication import AuthenticationMiddleware
 from starlette.middleware.sessions import SessionMiddleware
 from starlette.responses import RedirectResponse
@@ -21,6 +23,20 @@ templates = Jinja2Templates(directory=[
     'management/templates'
 ])
 
+
+def requires_session(func):
+    """Redirects to an absolute login URL instead of Starlette's `requires(redirect=...)`,
+    which resolves the redirect target via `request.url_for()` against whichever router is
+    bound into `request.scope` -- a lookup that only reaches `authentication`'s routes when
+    `management` happens to be mounted under a shared root app."""
+    @wraps(func)
+    async def wrapper(request: Request, *args, **kwargs):
+        if not {'authenticated', 'session'}.issubset(request.auth.scopes):
+            next_param = urlencode({'next': str(request.url)})
+            return RedirectResponse(f'/auth/login/?{next_param}', status_code=303)
+        return await func(request, *args, **kwargs)
+    return wrapper
+
 @management.get('/')
 async def index(request: Request):
     with get_session_context() as session:
@@ -34,12 +50,12 @@ async def index(request: Request):
 
 
 @management.get('/dashboard/')
-@requires(['authenticated', 'session'], redirect='get_login')
+@requires_session
 async def dashboard(request: Request):
     return templates.TemplateResponse(request, 'dashboard.html')
 
 @management.get('/users/')
-@requires(['authenticated', 'session'], redirect='get_login')
+@requires_session
 async def users(request: Request):
     with get_session_context() as session:
         query = select(User)
diff --git a/management/templates/base.html b/management/templates/base.html
index 0b9da11..7ba0adb 100644
--- a/management/templates/base.html
+++ b/management/templates/base.html
@@ -1,7 +1,18 @@
 {% extends 'global.html' %}
+{% import 'macros.html' as ui %}
 {% block template %}
-    <nav>
-        <a href="/auth/logout/">Logout</a>
+    <nav class="nav">
+        <div class="nav__brand">{{ ui.connector_icon(18) }} ttun</div>
+        <div class="nav__links">
+            <a class="nav__link{% if request.url.path == '/management/dashboard/' %} nav__link--active{% endif %}" href="/management/dashboard/">Dashboard</a>
+            <a class="nav__link{% if request.url.path == '/management/users/' %} nav__link--active{% endif %}" href="/management/users/">Users</a>
+        </div>
+        <div class="nav__actions">
+            {{ ui.status_badge('Session active', 'good') }}