minne/templates/auth/signup_form.html

{% extends "head_base.html" %}

{% block body %}
<style>
  form.htmx-request {
    opacity: 0.5;
  }
</style>

<div class="min-h-screen container mx-auto px-4 sm:px-0 sm:max-w-md flex justify-center flex-col">
  <h1
    class="text-5xl sm:text-6xl py-4 pt-10 font-bold bg-gradient-to-r from-primary to-secondary text-center text-transparent bg-clip-text">
    Minne
  </h1>
  <h2 class="text-2xl font-bold text-center mb-8">Create your account</h2>

  <form hx-post="/signup" hx-target="#signup-result" class="">
    <div class="form-control">
      <label class="label">
        <span class="label-text">Email</span>
      </label>
      <input type="email" name="email" placeholder="Enter your email" class="input input-bordered w-full" required />
    </div>

    <div class="form-control">
      <label class="label">
        <span class="label-text">Password</span>
      </label>
      <input type="password" name="password" placeholder="Create a password" class="input input-bordered w-full"
        required minlength="8" />
    </div>
    <div class="mt-4" id="signup-result"></div>
    <div class="form-control mt-6">
      <button id="submit-btn" class="btn btn-primary w-full">
        Create Account
      </button>
    </div>

  </form>

  <div class="divider">OR</div>

  <div class="text-center text-sm">
    Already have an account?
    <a href="/signin" hx-boost="true" class="link link-primary">Sign in</a>
  </div>
</div>
{% endblock %}