remove backend

templates/cotton/auth_modal.html

@@ -0,0 +1,397 @@
+{% comment %}
+Auth Modal Component - Django Cotton Version
+Enhanced Authentication Modal Component that matches React frontend AuthDialog functionality
+Preserves EXACT Alpine.js behavior, styling, and functionality
+
+Usage: <c-auth_modal login_title="Sign In" register_title="Create Account" />
+
+Critical: ALL Alpine.js directives, transitions, and behaviors are preserved exactly
+{% endcomment %}
+
+{% load static %}
+{% load i18n %}
+{% load account socialaccount %}
+
+<c-vars 
+    login_title="Sign In"
+    login_subtitle="Enter your credentials to access your account"
+    register_title="Create Account"
+    register_subtitle="Join ThrillWiki to start exploring theme parks"
+    modal_classes=""
+    overlay_classes=""
+    content_classes=""
+    close_button_classes=""
+    form_classes=""
+    social_divider_text_login="Or continue with"
+    social_divider_text_register="Or continue with email"
+    forgot_password_url=""
+    x_data_override=""
+    window_key="authModal"
+    show_social_providers="true"
+    show_forgot_password="true"
+/>
+
+<!-- Auth Modal Component -->
+<div 
+  x-data="{{ x_data_override|default:'authModal' }}" 
+  x-show="open" 
+  x-cloak
+  x-init="window.{{ window_key }} = $data"
+  class="fixed inset-0 z-50 flex items-center justify-center {{ modal_classes }}"
+  @keydown.escape.window="close()"
+>
+  <!-- Modal Overlay -->
+  <div 
+    x-show="open"
+    x-transition:enter="transition-opacity ease-linear duration-300"
+    x-transition:enter-start="opacity-0"
+    x-transition:enter-end="opacity-100"
+    x-transition:leave="transition-opacity ease-linear duration-300"
+    x-transition:leave-start="opacity-100"
+    x-transition:leave-end="opacity-0"
+    class="fixed inset-0 bg-background/80 backdrop-blur-sm {{ overlay_classes }}"
+    @click="close()"
+  ></div>
+
+  <!-- Modal Content -->
+  <div 
+    x-show="open"
+    x-transition:enter="transition ease-out duration-300"
+    x-transition:enter-start="transform opacity-0 scale-95"
+    x-transition:enter-end="transform opacity-100 scale-100"
+    x-transition:leave="transition ease-in duration-200"
+    x-transition:leave-start="transform opacity-100 scale-100"
+    x-transition:leave-end="transform opacity-0 scale-95"
+    class="relative w-full max-w-md mx-4 bg-background border rounded-lg shadow-lg {{ content_classes }}"
+    @click.stop
+  >
+    <!-- Close Button -->
+    <button 
+      @click="close()"
+      class="absolute top-4 right-4 p-2 text-muted-foreground hover:text-foreground rounded-md hover:bg-accent transition-colors {{ close_button_classes }}"
+    >
+      <i class="fas fa-times w-4 h-4"></i>
+    </button>
+
+    <!-- Login Form -->
+    <div x-show="mode === 'login'" class="p-6">
+      <div class="text-center mb-6">
+        <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-700">
+          {{ login_title }}
+        </h2>
+        <p class="text-sm text-muted-foreground mt-2">
+          {{ login_subtitle }}
+        </p>
+      </div>
+
+      <!-- Social Login Buttons -->
+      {% if show_social_providers == "true" %}
+      <div x-show="socialProviders.length > 0" class="mb-6">
+        <div class="grid grid-cols-2 gap-4" x-show="!socialLoading">
+          <template x-for="provider in socialProviders" :key="provider.id">
+            <button
+              @click="handleSocialLogin(provider.id)"
+              class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-md transition-colors"
+              :class="{
+                'bg-[#4285F4] hover:bg-[#357AE8]': provider.id === 'google',
+                'bg-[#5865F2] hover:bg-[#4752C4]': provider.id === 'discord',
+                'bg-primary hover:bg-primary/90': !['google', 'discord'].includes(provider.id)
+              }"
+            >
+              <i 
+                class="mr-2 w-4 h-4"
+                :class="{
+                  'fab fa-google': provider.id === 'google',
+                  'fab fa-discord': provider.id === 'discord'
+                }"
+              ></i>
+              <span x-text="provider.name"></span>
+            </button>
+          </template>
+        </div>
+        
+        <div x-show="socialLoading" class="grid grid-cols-2 gap-4">
+          <div class="h-10 bg-muted animate-pulse rounded-md"></div>
+          <div class="h-10 bg-muted animate-pulse rounded-md"></div>
+        </div>
+
+        <!-- Divider -->
+        <div class="relative my-6">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-muted"></div>
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-background px-2 text-muted-foreground">
+              {{ social_divider_text_login }}
+            </span>
+          </div>
+        </div>
+      </div>
+      {% endif %}
+
+      <!-- Login Form -->
+      <form 
+        @submit.prevent="handleLogin()"
+        class="space-y-4 {{ form_classes }}"
+      >
+        <div class="space-y-2">
+          <label for="login-username" class="text-sm font-medium">
+            Email or Username
+          </label>
+          <input
+            id="login-username"
+            type="text"
+            x-model="loginForm.username"
+            placeholder="Enter your email or username"
+            class="input w-full"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="login-password" class="text-sm font-medium">
+            Password
+          </label>
+          <div class="relative">
+            <input
+              id="login-password"
+              :type="showPassword ? 'text' : 'password'"
+              x-model="loginForm.password"
+              placeholder="Enter your password"
+              class="input w-full pr-10"
+              required
+            />
+            <button
+              type="button"
+              @click="showPassword = !showPassword"
+              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" class="w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+
+        {% if show_forgot_password == "true" %}
+        <div class="flex items-center justify-between">
+          <a
+            href="{% if forgot_password_url %}{{ forgot_password_url }}{% else %}{% url 'account_reset_password' %}{% endif %}"
+            class="text-sm text-primary hover:text-primary/80 underline-offset-4 hover:underline font-medium"
+          >
+            Forgot password?
+          </a>
+        </div>
+        {% endif %}
+
+        <!-- Error Messages -->
+        <div x-show="loginError" class="p-3 text-sm text-destructive-foreground bg-destructive/10 border border-destructive/20 rounded-md">
+          <span x-text="loginError"></span>
+        </div>
+
+        <button 
+          type="submit" 
+          :disabled="loginLoading"
+          class="btn btn-default w-full bg-gradient-to-r from-blue-600 to-purple-700 hover:from-blue-700 hover:to-purple-800 text-white"
+        >
+          <span x-show="!loginLoading">{{ login_title }}</span>
+          <span x-show="loginLoading" class="flex items-center">
+            <i class="fas fa-spinner fa-spin mr-2"></i>
+            Signing in...
+          </span>
+        </button>
+      </form>
+
+      <!-- Switch to Register -->
+      <div class="text-center text-sm text-muted-foreground mt-6">
+        Don't have an account?
+        <button
+          @click="switchToRegister()"
+          class="text-primary hover:underline font-medium ml-1"
+          type="button"
+        >
+          Sign up
+        </button>
+      </div>
+    </div>
+
+    <!-- Register Form -->
+    <div x-show="mode === 'register'" class="p-6">
+      <div class="text-center mb-6">
+        <h2 class="text-2xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-purple-700">
+          {{ register_title }}
+        </h2>
+        <p class="text-sm text-muted-foreground mt-2">
+          {{ register_subtitle }}
+        </p>
+      </div>
+
+      <!-- Social Registration Buttons -->
+      {% if show_social_providers == "true" %}
+      <div x-show="socialProviders.length > 0" class="mb-6">
+        <div class="grid grid-cols-2 gap-4" x-show="!socialLoading">
+          <template x-for="provider in socialProviders" :key="provider.id">
+            <button
+              @click="handleSocialLogin(provider.id)"
+              class="flex items-center justify-center px-4 py-2 text-sm font-medium text-white rounded-md transition-colors"
+              :class="{
+                'bg-[#4285F4] hover:bg-[#357AE8]': provider.id === 'google',
+                'bg-[#5865F2] hover:bg-[#4752C4]': provider.id === 'discord',
+                'bg-primary hover:bg-primary/90': !['google', 'discord'].includes(provider.id)
+              }"
+            >
+              <i 
+                class="mr-2 w-4 h-4"
+                :class="{
+                  'fab fa-google': provider.id === 'google',
+                  'fab fa-discord': provider.id === 'discord'
+                }"
+              ></i>
+              <span x-text="provider.name"></span>
+            </button>
+          </template>
+        </div>
+
+        <!-- Divider -->
+        <div class="relative my-6">
+          <div class="absolute inset-0 flex items-center">
+            <div class="w-full border-t border-muted"></div>
+          </div>
+          <div class="relative flex justify-center text-xs uppercase">
+            <span class="bg-background px-2 text-muted-foreground">
+              {{ social_divider_text_register }}
+            </span>
+          </div>
+        </div>
+      </div>
+      {% endif %}
+
+      <!-- Register Form -->
+      <form 
+        @submit.prevent="handleRegister()"
+        class="space-y-4 {{ form_classes }}"
+      >
+        <div class="grid grid-cols-2 gap-4">
+          <div class="space-y-2">
+            <label for="register-first-name" class="text-sm font-medium">
+              First Name
+            </label>
+            <input
+              id="register-first-name"
+              type="text"
+              x-model="registerForm.first_name"
+              placeholder="First name"
+              class="input w-full"
+              required
+            />
+          </div>
+          <div class="space-y-2">
+            <label for="register-last-name" class="text-sm font-medium">
+              Last Name
+            </label>
+            <input
+              id="register-last-name"
+              type="text"
+              x-model="registerForm.last_name"
+              placeholder="Last name"
+              class="input w-full"
+              required
+            />
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <label for="register-email" class="text-sm font-medium">
+            Email
+          </label>
+          <input
+            id="register-email"
+            type="email"
+            x-model="registerForm.email"
+            placeholder="Enter your email"
+            class="input w-full"
+            required
+          />
+        </div>
+
+        <div class="space-y-2">
+          <label for="register-username" class="text-sm font-medium">
+            Username
+          </label>
+          <input
+            id="register-username"
+            type="text"
+            x-model="registerForm.username"
+            placeholder="Choose a username"
+            class="input w-full"
+            required
+          />
+        </div>
+        
+        <div class="space-y-2">
+          <label for="register-password" class="text-sm font-medium">
+            Password
+          </label>
+          <div class="relative">
+            <input
+              id="register-password"
+              :type="showPassword ? 'text' : 'password'"
+              x-model="registerForm.password1"
+              placeholder="Create a password"
+              class="input w-full pr-10"
+              required
+            />
+            <button
+              type="button"
+              @click="showPassword = !showPassword"
+              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground"
+            >
+              <i :class="showPassword ? 'fas fa-eye-slash' : 'fas fa-eye'" class="w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+
+        <div class="space-y-2">
+          <label for="register-password2" class="text-sm font-medium">
+            Confirm Password
+          </label>
+          <input
+            id="register-password2"
+            :type="showPassword ? 'text' : 'password'"
+            x-model="registerForm.password2"
+            placeholder="Confirm your password"
+            class="input w-full"
+            required
+          />
+        </div>
+
+        <!-- Error Messages -->
+        <div x-show="registerError" class="p-3 text-sm text-destructive-foreground bg-destructive/10 border border-destructive/20 rounded-md">
+          <span x-text="registerError"></span>
+        </div>
+
+        <button 
+          type="submit" 
+          :disabled="registerLoading"
+          class="btn btn-default w-full bg-gradient-to-r from-blue-600 to-purple-700 hover:from-blue-700 hover:to-purple-800 text-white"
+        >
+          <span x-show="!registerLoading">{{ register_title }}</span>
+          <span x-show="registerLoading" class="flex items-center">
+            <i class="fas fa-spinner fa-spin mr-2"></i>
+            Creating account...
+          </span>
+        </button>
+      </form>
+
+      <!-- Switch to Login -->
+      <div class="text-center text-sm text-muted-foreground mt-6">
+        Already have an account?
+        <button
+          @click="switchToLogin()"
+          class="text-primary hover:underline font-medium ml-1"
+          type="button"
+        >
+          Sign in
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

templates/cotton/button.html

@@ -0,0 +1,72 @@
+{% comment %}
+Button Component - Django Cotton Version of shadcn/ui Button  
+Usage: <c-button variant="default" size="default">Click me</c-button>
+Preserves EXACT same HTML output as the original include version
+{% endcomment %}
+
+<c-vars 
+    variant="default" 
+    size="default"
+    icon_left=""
+    icon_right=""
+    type=""
+    onclick=""
+    hx_get=""
+    hx_post=""
+    hx_target=""
+    hx_swap=""
+    x_data=""
+    x_on=""
+    disabled=""
+/>
+
+<button 
+  class="
+    inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium 
+    ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 
+    focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50
+    {% if variant == 'default' %}
+      bg-primary text-primary-foreground hover:bg-primary/90
+    {% elif variant == 'destructive' %}
+      bg-destructive text-destructive-foreground hover:bg-destructive/90
+    {% elif variant == 'outline' %}
+      border border-input bg-background hover:bg-accent hover:text-accent-foreground
+    {% elif variant == 'secondary' %}
+      bg-secondary text-secondary-foreground hover:bg-secondary/80
+    {% elif variant == 'ghost' %}
+      hover:bg-accent hover:text-accent-foreground
+    {% elif variant == 'link' %}
+      text-primary underline-offset-4 hover:underline
+    {% endif %}
+    {% if size == 'default' %}
+      h-10 px-4 py-2
+    {% elif size == 'sm' %}
+      h-9 rounded-md px-3
+    {% elif size == 'lg' %}
+      h-11 rounded-md px-8
+    {% elif size == 'icon' %}
+      h-10 w-10
+    {% endif %}
+    {{ class|default:'' }}
+  "
+  {% if type %}type="{{ type }}"{% endif %}
+  {% if onclick %}onclick="{{ onclick }}"{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+  {% if x_data %}x-data="{{ x_data }}"{% endif %}
+  {% if x_on %}{{ x_on }}{% endif %}
+  {% if disabled %}disabled{% endif %}
+  {{ attrs }}
+>
+  {% if icon_left %}
+    <i class="{{ icon_left }} w-4 h-4"></i>
+  {% endif %}
+  
+  {{ slot }}
+  
+  {% if icon_right %}
+    <i class="{{ icon_right }} w-4 h-4"></i>
+  {% endif %}
+</button>

templates/cotton/card.html

@@ -0,0 +1,50 @@
+{% comment %}
+Card Component - Django Cotton Version of shadcn/ui Card
+Usage: <c-card title="Card Title" description="Card description">Card content</c-card>
+Preserves EXACT same HTML output as the original include version
+{% endcomment %}
+
+<c-vars 
+    title=""
+    description=""
+    content=""
+    header_content=""
+    body_content=""
+    footer_content=""
+/>
+
+<div class="rounded-lg border bg-card text-card-foreground shadow-sm {{ class|default:'' }}">
+  {% if title or header_content %}
+  <div class="flex flex-col space-y-1.5 p-6">
+    {% if title %}
+    <h3 class="text-2xl font-semibold leading-none tracking-tight">{{ title }}</h3>
+    {% endif %}
+    {% if description %}
+    <p class="text-sm text-muted-foreground">{{ description }}</p>
+    {% endif %}
+    {% if header_content %}
+    {{ header_content|safe }}
+    {% endif %}
+  </div>
+  {% endif %}
+  
+  {% if content or body_content or slot %}
+  <div class="p-6 pt-0">
+    {% if content %}
+    {{ content|safe }}
+    {% endif %}
+    {% if body_content %}
+    {{ body_content|safe }}
+    {% endif %}
+    {% if slot %}
+    {{ slot }}
+    {% endif %}
+  </div>
+  {% endif %}
+  
+  {% if footer_content %}
+  <div class="flex items-center p-6 pt-0">
+    {{ footer_content|safe }}
+  </div>
+  {% endif %}
+</div>

templates/cotton/input.html

@@ -0,0 +1,47 @@
+{% comment %}
+Input Component - Django Cotton Version of shadcn/ui Input
+Usage: <c-input type="text" placeholder="Enter text..." name="field_name" />
+Preserves EXACT same HTML output as the original include version
+{% endcomment %}
+
+<c-vars 
+    type="text"
+    name=""
+    id=""
+    placeholder=""
+    value=""
+    required=""
+    disabled=""
+    readonly=""
+    autocomplete=""
+    x_model=""
+    x_on=""
+    hx_get=""
+    hx_post=""
+    hx_target=""
+    hx_trigger=""
+    hx_swap=""
+    hx_include=""
+/>
+
+<input 
+  type="{{ type|default:'text' }}"
+  class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 {{ class|default:'' }}"
+  {% if name %}name="{{ name }}"{% endif %}
+  {% if id %}id="{{ id }}"{% endif %}
+  {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
+  {% if value %}value="{{ value }}"{% endif %}
+  {% if required %}required{% endif %}
+  {% if disabled %}disabled{% endif %}
+  {% if readonly %}readonly{% endif %}
+  {% if autocomplete %}autocomplete="{{ autocomplete }}"{% endif %}
+  {% if x_model %}x-model="{{ x_model }}"{% endif %}
+  {% if x_on %}{{ x_on }}{% endif %}
+  {% if hx_get %}hx-get="{{ hx_get }}"{% endif %}
+  {% if hx_post %}hx-post="{{ hx_post }}"{% endif %}
+  {% if hx_target %}hx-target="{{ hx_target }}"{% endif %}
+  {% if hx_trigger %}hx-trigger="{{ hx_trigger }}"{% endif %}
+  {% if hx_swap %}hx-swap="{{ hx_swap }}"{% endif %}
+  {% if hx_include %}hx-include="{{ hx_include }}"{% endif %}
+  {{ attrs }}
+/>

templates/cotton/toast_container.html

@@ -0,0 +1,93 @@
+{% comment %}
+Toast Notification Container Component - Cotton Version
+Matches React frontend toast functionality with Sonner-like behavior
+Preserves exact Alpine.js functionality and styling
+
+Usage: <c-toast_container />
+{% endcomment %}
+
+<!-- Toast Container -->
+<div 
+  x-data="{}"
+  x-show="$store.toast.toasts.length > 0"
+  class="fixed top-4 right-4 z-50 space-y-2"
+  x-cloak
+>
+  <template x-for="toast in $store.toast.toasts" :key="toast.id">
+    <div 
+      x-show="toast.visible"
+      x-transition:enter="transition ease-out duration-300"
+      x-transition:enter-start="transform opacity-0 translate-x-full"
+      x-transition:enter-end="transform opacity-100 translate-x-0"
+      x-transition:leave="transition ease-in duration-200"
+      x-transition:leave-start="transform opacity-100 translate-x-0"
+      x-transition:leave-end="transform opacity-0 translate-x-full"
+      class="relative max-w-sm w-full bg-background border rounded-lg shadow-lg overflow-hidden"
+      :class="{
+        'border-green-200 bg-green-50 dark:bg-green-900/20 dark:border-green-800': toast.type === 'success',
+        'border-red-200 bg-red-50 dark:bg-red-900/20 dark:border-red-800': toast.type === 'error',
+        'border-yellow-200 bg-yellow-50 dark:bg-yellow-900/20 dark:border-yellow-800': toast.type === 'warning',
+        'border-blue-200 bg-blue-50 dark:bg-blue-900/20 dark:border-blue-800': toast.type === 'info'
+      }"
+    >
+      <!-- Progress Bar -->
+      <div 
+        class="absolute top-0 left-0 h-1 bg-current opacity-30 transition-all duration-100 ease-linear"
+        :style="`width: ${toast.progress}%`"
+        :class="{
+          'text-green-500': toast.type === 'success',
+          'text-red-500': toast.type === 'error',
+          'text-yellow-500': toast.type === 'warning',
+          'text-blue-500': toast.type === 'info'
+        }"
+      ></div>
+
+      <div class="p-4">
+        <div class="flex items-start">
+          <!-- Icon -->
+          <div class="flex-shrink-0 mr-3">
+            <i 
+              class="w-5 h-5"
+              :class="{
+                'fas fa-check-circle text-green-500': toast.type === 'success',
+                'fas fa-exclamation-circle text-red-500': toast.type === 'error',
+                'fas fa-exclamation-triangle text-yellow-500': toast.type === 'warning',
+                'fas fa-info-circle text-blue-500': toast.type === 'info'
+              }"
+            ></i>
+          </div>
+
+          <!-- Message -->
+          <div class="flex-1 min-w-0">
+            <p 
+              class="text-sm font-medium"
+              :class="{
+                'text-green-800 dark:text-green-200': toast.type === 'success',
+                'text-red-800 dark:text-red-200': toast.type === 'error',
+                'text-yellow-800 dark:text-yellow-200': toast.type === 'warning',
+                'text-blue-800 dark:text-blue-200': toast.type === 'info'
+              }"
+              x-text="toast.message"
+            ></p>
+          </div>
+
+          <!-- Close Button -->
+          <div class="flex-shrink-0 ml-3">
+            <button
+              @click="$store.toast.hide(toast.id)"
+              class="inline-flex rounded-md p-1.5 focus:outline-none focus:ring-2 focus:ring-offset-2 transition-colors"
+              :class="{
+                'text-green-500 hover:bg-green-100 focus:ring-green-500 dark:hover:bg-green-800': toast.type === 'success',
+                'text-red-500 hover:bg-red-100 focus:ring-red-500 dark:hover:bg-red-800': toast.type === 'error',
+                'text-yellow-500 hover:bg-yellow-100 focus:ring-yellow-500 dark:hover:bg-yellow-800': toast.type === 'warning',
+                'text-blue-500 hover:bg-blue-100 focus:ring-blue-500 dark:hover:bg-blue-800': toast.type === 'info'
+              }"
+            >
+              <i class="fas fa-times w-4 h-4"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </template>
+</div>