4 files changed, 48 insertions, 34 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 %}