From af935e7465b22e43a06262597f03f19611c52907 Mon Sep 17 00:00:00 2001
From: Pablo Moreno <pablo@kasfactory.net>
Date: Fri, 17 Jan 2025 12:36:37 +0100
Subject: [PATCH] feat: added spinner

---
 theme/templates/theme/base.html |  1 +
 web/static/css/spinner.css      | 19 +++++++++++++++++++
 web/templates/users/login.html  |  8 +++++---
 web/templates/web/index.html    |  8 +++++---
 web/views/users.py              |  5 ++++-
 5 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 web/static/css/spinner.css

diff --git a/theme/templates/theme/base.html b/theme/templates/theme/base.html
index 6120cb0..1b881e6 100644
--- a/theme/templates/theme/base.html
+++ b/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 %}
diff --git a/web/static/css/spinner.css b/web/static/css/spinner.css
new file mode 100644
index 0000000..591fbc6
--- /dev/null
+++ b/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);
+    }
+}
diff --git a/web/templates/users/login.html b/web/templates/users/login.html
index a61cf78..e756b0c 100644
--- a/web/templates/users/login.html
+++ b/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' %}
diff --git a/web/templates/web/index.html b/web/templates/web/index.html
index 3d3cd1f..34f5a78 100644
--- a/web/templates/web/index.html
+++ b/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>
diff --git a/web/views/users.py b/web/views/users.py
index a7c3a9d..6ff20fe 100644
--- a/web/views/users.py
+++ b/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):