tailwindcss + wip auth

src/server/templates/auth/signup.html

@@ -0,0 +1,62 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="min-h-screen bg-base-200 flex items-center justify-center">
+  <div class="card w-96 bg-base-100 shadow-xl">
+    <div class="card-body">
+      <h2 class="card-title text-2xl font-bold text-center mb-4">Sign Up</h2>
+
+      <form hx-post="/signup" hx-target="#signup-result" class="space-y-4">
+
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">Email</span>
+          </label>
+          <input type="text" name="email" placeholder="Enter username" class="input input-bordered w-full" required />
+        </div>
+
+        <div class="form-control w-full">
+          <label class="label">
+            <span class="label-text">Password</span>
+          </label>
+          <input type="password" name="password" placeholder="Enter password" class="input input-bordered w-full"
+            required />
+        </div>
+
+        <div class="form-control mt-6">
+          <button class="btn btn-primary">
+            Sign Up
+            <span class="loading loading-spinner hidden"></span>
+          </button>
+        </div>
+
+        <div id="signup-result"></div>
+
+        <div class="divider">OR</div>
+
+        <div class="text-center text-sm">
+          Already have an account?
+          <a href="/login" class="link link-primary">Login</a>
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+<!-- Add loading indicator when form is submitting -->
+<script>
+  document.body.addEventListener('htmx:beforeRequest', function (evt) {
+    if (evt.target.tagName === 'FORM') {
+      evt.target.querySelector('.loading-spinner').classList.remove('hidden');
+      evt.target.querySelector('button').disabled = true;
+    }
+  });
+
+  document.body.addEventListener('htmx:afterRequest', function (evt) {
+    if (evt.target.tagName === 'FORM') {
+      evt.target.querySelector('.loading-spinner').classList.add('hidden');
+      evt.target.querySelector('button').disabled = false;
+    }
+  });
+</script>
+{% endblock %}