Update website to use new reusable components for common elements

Refactor HTML templates to incorporate Django Cotton components for buttons, forms, and other UI elements.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: eff39de1-3afa-446d-a965-acaf61837fc7
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/eff39de1-3afa-446d-a965-acaf61837fc7/55dLPZG

backend/templates/cotton/auth/login_form.html

@@ -0,0 +1,131 @@
+{% comment %}
+Cotton Login Form Component
+Converts existing login form to use Django Cotton's component system
+{% endcomment %}
+
+{% load i18n %}
+{% load account socialaccount %}
+{% load turnstile_tags %}
+
+<!-- Cotton Login Form Component -->
+<c-vars
+  form_classes="form_classes|default:'space-y-6'"
+  show_remember="show_remember|default:'true'"
+  show_forgot_password="show_forgot_password|default:'true'"
+  button_text="button_text|default:'Sign In'"
+  hx_target="hx_target|default:'this'"
+  hx_swap="hx_swap|default:'outerHTML'"
+/>
+
+<form 
+  class="{{ form_classes }}" 
+  hx-post="{% url 'account_login' %}"
+  hx-target="{{ hx_target }}"
+  hx-swap="{{ hx_swap }}"
+  hx-indicator="#login-indicator"
+>
+  {% csrf_token %}
+  
+  <!-- Form Errors -->
+  {% if form.non_field_errors %}
+  <div class="alert alert-error">
+    <div class="text-sm">{{ form.non_field_errors }}</div>
+  </div>
+  {% endif %}
+
+  <!-- Username/Email Field -->
+  <div>
+    <label for="id_login" class="form-label">
+      {% trans "Username or Email" %}
+    </label>
+    <input
+      type="text"
+      name="login"
+      id="id_login"
+      required
+      autocomplete="username email"
+      class="form-input"
+    />
+    {% if form.login.errors %}
+    <p class="form-error">{{ form.login.errors }}</p>
+    {% endif %}
+  </div>
+
+  <!-- Password Field -->
+  <div>
+    <label for="id_password" class="form-label">
+      {% trans "Password" %}
+    </label>
+    <input
+      type="password"
+      name="password"
+      id="id_password"
+      required
+      autocomplete="current-password"
+      class="form-input"
+    />
+    {% if form.password.errors %}
+    <p class="form-error">{{ form.password.errors }}</p>
+    {% endif %}
+  </div>
+
+  <!-- Remember Me & Forgot Password -->
+  <div class="flex items-center justify-between">
+    {% if show_remember and show_remember != '' %}
+    <div class="flex items-center">
+      <input
+        type="checkbox"
+        name="remember"
+        id="id_remember"
+        class="w-4 h-4 border-gray-300 rounded text-primary focus:ring-primary/50 dark:border-gray-700"
+      />
+      <label
+        for="id_remember"
+        class="block ml-2 text-sm text-gray-700 dark:text-gray-300"
+      >
+        {% trans "Remember me" %}
+      </label>
+    </div>
+    {% endif %}
+
+    {% if show_forgot_password and show_forgot_password != '' %}
+    <div class="text-sm">
+      <a
+        href="{% url 'account_reset_password' %}"
+        class="font-medium transition-colors text-primary hover:text-primary/80 focus:outline-hidden focus:underline"
+      >
+        {% trans "Forgot Password?" %}
+      </a>
+    </div>
+    {% endif %}
+  </div>
+
+  <!-- Turnstile Widget -->
+  <c-auth.turnstile_widget site_key="{{ site_key|default:'' }}" />
+  
+  <!-- Redirect Field -->
+  {% if redirect_field_value %}
+  <input
+    type="hidden"
+    name="{{ redirect_field_name }}"
+    value="{{ redirect_field_value }}"
+  />
+  {% endif %}
+
+  <!-- Submit Button -->
+  <c-slot name="submit-button">
+    <div>
+      <button type="submit" class="w-full btn-primary">
+        <i class="mr-2 fas fa-sign-in-alt"></i>
+        {{ button_text }}
+      </button>
+    </div>
+  </c-slot>
+</form>
+
+<!-- Loading Indicator -->
+<div id="login-indicator" class="htmx-indicator">
+  <div class="flex items-center justify-center w-full py-4">
+    <div class="w-8 h-8 border-4 rounded-full border-primary border-t-transparent animate-spin"></div>
+  </div>
+</div>

backend/templates/cotton/auth/turnstile_empty.html

@@ -0,0 +1,17 @@
+{% comment %}
+Cotton Turnstile Empty Widget Component
+Empty template when DEBUG is True - converts to Cotton format
+{% endcomment %}
+
+<!-- Cotton Turnstile Empty Component -->
+<c-vars
+  debug_message="debug_message|default:'Turnstile widget disabled in DEBUG mode'"
+  show_debug_message="show_debug_message|default:''"
+/>
+
+<!-- Empty template when DEBUG is True -->
+{% if show_debug_message and show_debug_message != '' %}
+<div class="text-xs text-gray-500 text-center py-2">
+  {{ debug_message }}
+</div>
+{% endif %}

backend/templates/cotton/auth/turnstile_widget.html

@@ -0,0 +1,36 @@
+{% comment %}
+Cotton Turnstile Widget Component
+Converts existing Cloudflare Turnstile widget to use Django Cotton's component system
+{% endcomment %}
+
+<!-- Cotton Turnstile Widget Component -->
+<c-vars
+  site_key="site_key"
+  widget_classes="widget_classes|default:'turnstile'"
+  widget_id="widget_id|default:'turnstile-widget'"
+  theme="theme|default:'auto'"
+/>
+
+<script
+  src="https://challenges.cloudflare.com/turnstile/v0/api.js"
+  async
+  defer
+></script>
+
+<div class="{{ widget_classes }}">
+  <div
+    id="{{ widget_id }}"
+    class="cf-turnstile"
+    data-sitekey="{{ site_key }}"
+  ></div>
+</div>
+
+<script>
+  // Apply theme to the Turnstile widget based on the retrieved theme
+  document.addEventListener("DOMContentLoaded", function () {
+    const turnstileWidget = document.getElementById("{{ widget_id }}");
+    if (turnstileWidget) {
+      turnstileWidget.setAttribute("data-theme", "{{ theme }}");
+    }
+  });
+</script>