feat: added spinner

theme/templates/theme/base.html

@@ -8,6 +8,7 @@
 
   {% include "theme/seo.html" %}
   <link rel="shortcut icon" type="image/png" href="{% static 'favicon.ico' %}"/>
+  <link rel="stylesheet" href="{% static 'css/spinner.css' %}">
   <script src="https://unpkg.com/htmx.org@2.0.3"></script>
 
   {% tailwind_css %}

web/static/css/spinner.css

@@ -0,0 +1,19 @@
+.spinner {
+    width: 48px;
+    height: 48px;
+    border: 5px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: spinner_rotation 1s linear infinite;
+}
+
+@keyframes spinner_rotation {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

web/templates/users/login.html

@@ -20,7 +20,6 @@
           <form action="{% url 'web:login' %}" method="post">
             {% csrf_token %}
             {% for field in form %}
-
               {% if field.id_for_label != 'id_remember_me' %}
                 <label for="{{ field.id_for_label }}"
                        class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">
@@ -34,10 +33,8 @@
                          class="inline-block text-sm font-medium text-gray-900 dark:text-white ml-2">
                     {{ field.label }}
                   </label>
-
                 </div>
               {% endif %}
-
             {% endfor %}
 
             <div class="flex justify-center">
@@ -48,6 +45,11 @@
               </p>
             </div>
 
+
+            {% for k, error in form.errors.items %}
+            <span class="flex justify-center mb-2 text-sm font-medium text-red-900 dark:text-red-400">{{ error }}</span>
+            {% endfor %}
+
             <button
               class="w-full text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
               {% translate 'Iniciar sesión' %}

web/templates/web/index.html

@@ -7,18 +7,20 @@
     {% include 'components/products/list_filters.html' %}
     <section
       class="p-8"
-      hx-get="{% url 'web:list_products' %}{% querystring request.GET %}{% if filter_by_category %}{% querystring category=category.id %}{% endif %}"
+      hx-get="
+        {% url 'web:list_products' %}{% querystring request.GET %}{% if filter_by_category %}{% querystring category=category.id %}{% endif %}"
       hx-trigger="load"
       hx-target="#products"
       hx-swap="innerHTML"
     >
       <div>
         <section id="products">
-
+          <div class="flex justify-center items-center">
+            <span class="spinner"></span>
+          </div>
         </section>
 
         <div class="w-full text-center">
-
         </div>
       </div>
     </section>

web/views/users.py

@@ -60,7 +60,10 @@ class LoginView(View, RedirectionMixin):
 
             return redirect(self.get_redirection())
 
-        return render(request, self.template_name, {"form": login_form}, status=400)
+        return render(request, self.template_name, {
+            "form": login_form,
+            "errors": login_form.errors.get('__all__'),
+        }, status=400)
 
 
 class RegisterView(TemplateView, RedirectionMixin):