configure htmx on search and paginators html

Author: RustamovAkrom

apps/users/forms.py

@@ -40,17 +40,19 @@ class RegisterForm(forms.ModelForm):
         widget=forms.PasswordInput(attrs={"id": "password", "type": "password"}),
     )
 
-    def save(self, commit=True):
-        user = super().save(commit)
-
+    def clean_password2(self):
         password1 = self.cleaned_data.get("password1")
         password2 = self.cleaned_data.get("password2")
+        if password1 and password2 and password1 != password2:
+            raise ValidationError("Passwords must be match!")
+        return password2
+    
+    def save(self, commit=True):
+        user = super().save(commit=False)
 
-        if password1 == password2:
-            user.set_password(password1)
-            user.save()
-        else:
-            return ValidationError("Passwords must be match!")
+        user.set_password(self.cleaned_data["password1"])
+        user.save()
+        return user
 
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
@@ -59,9 +61,4 @@ def __init__(self, *args, **kwargs):
 
     class Meta:
         model = User
-        fields = (
-            "username",
-            "password1",
-            "password2",
-            "email",
-        )
+        fields = ("username", "password1", "password2", "email", )

apps/users/views.py

@@ -19,7 +19,7 @@ class RegisterPageView(CustomHtmxMixin, View):
     def get(self, request):
         context = {
             "title": "Registration",
-            "tempate_htmx": self.template_htmx,
+            "template_htmx": self.template_htmx,
             "form": RegisterForm()
         }
         return render(request, self.template_name, context)

templates/auth/register.html

@@ -6,6 +6,9 @@ <h2>Register</h2>
 
                 <form 
                 action="{% url 'users:register' %}"
+                hx-post="{% url 'users:register' %}"
+                hx-push-url="true"
+                hx-target="#main-content"
                 method="post" 
                 enctype="multipart/form-data">
                     {% csrf_token %}

templates/components/headers.html

@@ -128,20 +128,24 @@
         </ul>
 
         <!-- Search posts -->
-        <form action="{% url 'blog:home' %}" >
+        <form 
+        action="{% url 'blog:home' %}" 
+        hx-get="{% url 'blog:home' %}" 
+        hx-push-url="true" 
+        hx-target="#main-content">
           <input 
-          class="form-control" 
-          type="text" 
+          class="form-control me-2" 
+          type="search" 
           name="search_query" 
           id="search-posts" 
           placeholder="Search" 
           value="{% if search_query_value %}{{ search_query_value }}{% endif %}" 
           aria-label="Search"
+          hx-get="{% url 'blog:home' %}"
+          hx-trigger="keyup changed delay:150ms"
+          hx-triget="#main-content"
           >
         </form>
-        <!-- hx-get="{% url 'blog:home' %}"
-        hx-trigger="keyup changed delay:150ms"
-        hx-triget="#main-content" -->
 
       </div>
     </div>

templates/components/paginators.html

@@ -5,7 +5,13 @@
             <!-- Кнопка "Назад" -->
             {% if page_obj.has_previous %}
             <li class="page-item">
-                <a class="page-link" href="{% url 'blog:home' %}?page={{ page_obj.previous_page_number }}&size={{ size_value }}" aria-label="Previous">
+                <a 
+                class="page-link" 
+                href="{% url 'blog:home' %}?page={{ page_obj.previous_page_number }}&size={{ size_value }}" 
+                hx-get="{% url 'blog:home' %}?page={{ page_obj.previous_page_number }}&size={{ size_value }}" 
+                hx-push-url="true"
+                hx-target="#main-content"
+                aria-label="Previous">
                     <span aria-hidden="true">&laquo;</span>
                 </a>
             </li>
@@ -23,11 +29,23 @@
                     </li>
                 {% elif i >= page_obj.number|add:'-2' and i <= page_obj.number|add:'2' %}
                     <li class="page-item">
-                        <a class="page-link" href="{% url 'blog:home' %}?page={{ i }}&size={{ size_value }}">{{ i }}</a>
+                        <a 
+                        class="page-link" 
+                        href="{% url 'blog:home' %}?page={{ i }}&size={{ size_value }}"
+                        hx-get="{% url 'blog:home' %}?page={{ i }}&size={{ size_value }}"
+                        hx-push-url="true"
+                        hx-target="#main-content"
+                        >{{ i }}</a>
                     </li>
                 {% elif i == 1 or i == page_obj.paginator.num_pages %}
                     <li class="page-item">
-                        <a class="page-link" href="{% url 'blog:home' %}?page={{ i }}&size={{ size_value }}">{{ i }}</a>
+                        <a 
+                        class="page-link" 
+                        href="{% url 'blog:home' %}?page={{ i }}&size={{ size_value }}"
+                        hx-get="{% url 'blog:home' %}?page={{ i }}&size={{ size_value }}"
+                        hx-push-url="true"
+                        hx-target="#main-content"
+                        >{{ i }}</a>
                     </li>
                 {% elif i == page_obj.number|add:'-3' or i == page_obj.number|add:'3' %}
                     <li class="page-item disabled"><span class="page-link">...</span></li>
@@ -37,7 +55,12 @@
             <!-- Кнопка "Вперед" -->
             {% if page_obj.has_next %}
             <li class="page-item">
-                <a class="page-link" href="{% url 'blog:home' %}?page={{ page_obj.next_page_number }}&size={{ size_value }}" aria-label="Next">
+                <a class="page-link" 
+                href="{% url 'blog:home' %}?page={{ page_obj.next_page_number }}&size={{ size_value }}" 
+                hx-get="{% url 'blog:home' %}?page={{ page_obj.next_page_number }}&size={{ size_value }}" 
+                hx-push-url="true"
+                hx-target="#main-content"
+                aria-label="Next">
                     <span aria-hidden="true">&raquo;</span>
                 </a>
             </li>