feat: implement request handling and dashboard features with new tags and utilities

3 files changed, 96 insertions, 33 deletions

diff --git a/templates/auth/login.django b/templates/auth/login.django
index 3981abd..babff22 100644
--- a/templates/auth/login.django
+++ b/templates/auth/login.django
@@ -1,45 +1,41 @@
 {% extends "layouts/base.django" %}
 
 {% block content %}
-<div class="min-h-screen flex items-center justify-center bg-gray-950">
-    <div class="w-full max-w-sm space-y-8">
-        <div class="text-center">
-            <h1 class="text-4xl font-bold text-white tracking-tight">Dove</h1>
-            <p class="mt-2 text-sm text-gray-400">Local SMTP server for peaceful email testing</p>
+<div class="min-h-screen flex items-center justify-center px-4">
+    <div class="w-full max-w-sm slide-up">
+        <div class="text-center mb-10">
+            <div class="inline-flex items-center justify-center w-14 h-14 rounded-2xl glass glow-border mb-5">
+                <svg class="w-7 h-7 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+                </svg>
+            </div>
+            <h1 class="text-3xl font-bold gradient-text tracking-tight">Dove</h1>
+            <p class="mt-2 text-sm text-zinc-500">Local SMTP server for peaceful email testing</p>
         </div>
 
         {% if ErrorMessage %}
-        <div class="rounded-lg bg-red-500/10 border border-red-500/20 px-4 py-3 text-sm text-red-400">
+        <div class="mb-6 rounded-xl bg-red-500/5 border border-red-500/15 px-4 py-3 text-sm text-red-400 fade-in">
             {{ ErrorMessage }}
         </div>
         {% endif %}
 
-        <form method="POST" action="/auth/login" class="space-y-5">
-            <div>
-                <input
-                    type="text"
-                    name="username"
-                    placeholder="Username"
-                    required
-                    class="w-full rounded-lg border border-gray-700 bg-gray-900 px-4 py-3 text-sm text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition"
-                >
-            </div>
-            <div>
-                <input
-                    type="password"
-                    name="password"
-                    placeholder="Password"
-                    required
-                    class="w-full rounded-lg border border-gray-700 bg-gray-900 px-4 py-3 text-sm text-white placeholder-gray-500 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 transition"
-                >
-            </div>
-            <button
-                type="submit"
-                class="w-full rounded-lg bg-blue-600 px-4 py-3 text-sm font-medium text-white hover:bg-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-gray-950 transition"
-            >
-                Sign in
-            </button>
-        </form>
+        <div class="glass rounded-2xl p-6 glow-border">
+            <form method="POST" action="/auth/login" class="space-y-4">
+                <div>
+                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Username</label>
+                    <input type="text" name="username" required autocomplete="username" class="input-field">
+                </div>
+                <div>
+                    <label class="block text-xs font-medium text-zinc-400 mb-1.5 ml-1">Password</label>
+                    <input type="password" name="password" required autocomplete="current-password" class="input-field">
+                </div>
+                <div class="pt-2">
+                    <button type="submit" class="btn-primary">Sign in</button>
+                </div>
+            </form>
+        </div>
+
+        <p class="mt-6 text-center text-xs text-zinc-600">Credentials are configured in config.toml</p>
     </div>
 </div>
 {% endblock %}
diff --git a/templates/layouts/base.django b/templates/layouts/base.django
index 567b81d..1ccc991 100644
--- a/templates/layouts/base.django
+++ b/templates/layouts/base.django
@@ -7,7 +7,11 @@
     <link rel="stylesheet" href="/static/css/style.css">
     {% block head %}{% endblock %}
 </head>
-<body class="antialiased">
+<body class="antialiased bg-surface-950 text-zinc-200">
+    <div class="fixed inset-0 -z-10 overflow-hidden">
+        <div class="absolute -top-40 -right-40 h-[500px] w-[500px] rounded-full bg-accent-500/[0.03] blur-[120px]"></div>
+        <div class="absolute -bottom-40 -left-40 h-[400px] w-[400px] rounded-full bg-accent-400/[0.02] blur-[100px]"></div>
+    </div>
     {% block content %}{% endblock %}
     <script src="/static/js/htmx.min.js"></script>
     {% block scripts %}{% endblock %}
diff --git a/templates/layouts/dashboard.django b/templates/layouts/dashboard.django
new file mode 100644
index 0000000..22f03bc
--- /dev/null
+++ b/templates/layouts/dashboard.django
@@ -0,0 +1,63 @@
+{% extends "layouts/base.django" %}
+
+{% block content %}
+<div class="min-h-screen flex fade-in">
+    <aside class="w-60 shrink-0 border-r border-white/[0.04] glass">
+        <div class="flex items-center gap-3 px-5 h-14 border-b border-white/[0.04]">
+            <div class="flex items-center justify-center w-8 h-8 rounded-lg bg-accent-500/10">
+                <svg class="w-4 h-4 text-accent-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 0 1-2.25 2.25h-15a2.25 2.25 0 0 1-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25m19.5 0v.243a2.25 2.25 0 0 1-1.07 1.916l-7.5 4.615a2.25 2.25 0 0 1-2.36 0L3.32 8.91a2.25 2.25 0 0 1-1.07-1.916V6.75" />
+                </svg>
+            </div>
+            <span class="text-sm font-semibold text-zinc-100 tracking-tight">Dove</span>
+        </div>
+
+        <nav class="flex flex-col gap-1 p-3">
+            <a href="/dashboard" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.04] transition-colors duration-150 {% if ActiveNav == 'overview' %}bg-white/[0.06] text-zinc-100{% endif %}">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25a2.25 2.25 0 0 1-2.25-2.25v-2.25Z" />
+                </svg>
+                Overview
+            </a>
+            <a href="/dashboard/mailboxes" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.04] transition-colors duration-150 {% if ActiveNav == 'mailboxes' %}bg-white/[0.06] text-zinc-100{% endif %}">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 13.5h3.86a2.25 2.25 0 0 1 2.012 1.244l.256.512a2.25 2.25 0 0 0 2.013 1.244h2.21a2.25 2.25 0 0 0 2.013-1.244l.256-.512a2.25 2.25 0 0 1 2.013-1.244h3.859m-19.5.338V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18v-4.162c0-.224-.034-.447-.1-.661L19.24 5.338a2.25 2.25 0 0 0-2.15-1.588H6.911a2.25 2.25 0 0 0-2.15 1.588L2.35 13.177a2.25 2.25 0 0 0-.1.661Z" />
+                </svg>
+                Mailboxes
+            </a>
+            <a href="/dashboard/users" class="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-zinc-400 hover:text-zinc-200 hover:bg-white/[0.04] transition-colors duration-150 {% if ActiveNav == 'users' %}bg-white/[0.06] text-zinc-100{% endif %}">
+                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 0 0 2.625.372 9.337 9.337 0 0 0 4.121-.952 4.125 4.125 0 0 0-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 0 1 8.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0 1 11.964-3.07M12 6.375a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0Zm8.25 2.25a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
+                </svg>
+                Users
+            </a>
+        </nav>
+
+        <div class="mt-auto p-3 border-t border-white/[0.04]">
+            <div class="flex items-center gap-2 px-3 py-2 text-xs text-zinc-600">
+                <span class="inline-block w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>
+                SMTP listening
+            </div>
+            {% if AuthEnabled %}
+            <a href="/auth/logout" class="flex items-center gap-3 px-3 py-2 rounded-lg text-xs text-zinc-500 hover:text-zinc-300 hover:bg-white/[0.04] transition-colors duration-150">
+                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 9V5.25A2.25 2.25 0 0 0 13.5 3h-6a2.25 2.25 0 0 0-2.25 2.25v13.5A2.25 2.25 0 0 0 7.5 21h6a2.25 2.25 0 0 0 2.25-2.25V15m3 0 3-3m0 0-3-3m3 3H9" />
+                </svg>
+                Logout
+            </a>
+            {% endif %}
+        </div>
+    </aside>
+
+    <div class="flex-1 flex flex-col min-h-screen">
+        <header class="h-14 flex items-center justify-between px-8 border-b border-white/[0.04]">
+            <h1 class="text-sm font-medium text-zinc-100">{{ PageTitle }}</h1>
+            {% block header_actions %}{% endblock %}
+        </header>
+
+        <main class="flex-1 p-8">
+            {% block dashboard %}{% endblock %}
+        </main>
+    </div>
+</div>
+{% endblock %}