From 957df53b52f0eeaf197f05d5e83b9d5505e2dd06 Mon Sep 17 00:00:00 2001
From: altf4arnold <arnold.dech@adct.be>
Date: Tue, 7 May 2024 16:24:33 +0200
Subject: [PATCH] [FIX] putting the labels of the forms above the fields

---
 netbox/templates/login.html | 138 ++++++++++++++++++++----------------
 1 file changed, 76 insertions(+), 62 deletions(-)

diff --git a/netbox/templates/login.html b/netbox/templates/login.html
index 842f7e493..795eed4b1 100644
--- a/netbox/templates/login.html
+++ b/netbox/templates/login.html
@@ -6,76 +6,90 @@
 
 {% block layout %}
 
-  <div class="page page-center">
-    <div class="container container-tight py-4">
+    <div class="page page-center">
+        <div class="container container-tight py-4">
 
-      {# NetBox logo #}
-      <div class="text-center mb-4">
-        <img src="{% static 'netbox_logo.svg' %}" height="80" alt="{% trans "NetBox logo" %}" />
-      </div>
+            {# NetBox logo #}
+            <div class="text-center mb-4">
+                <img src="{% static 'netbox_logo.svg' %}" height="80" alt="{% trans "NetBox logo" %}"/>
+            </div>
 
-      {# Login banner #}
-      {% if config.BANNER_LOGIN %}
-        <div class="mb-5 text-center">
-          {{ config.BANNER_LOGIN|safe }}
-        </div>
-      {% endif %}
-
-      {# Login form errors #}
-      {% if form.non_field_errors %}
-        <div class="alert alert-danger" role="alert">
-          <h4 class="alert-heading">{% trans "Errors" %}</h4>
-          <p>
-            {{ form.non_field_errors }}
-          </p>
-        </div>
-      {% endif %}
-
-      <div class="card card-md">
-        <div class="card-body">
-          <h2 class="text-center mb-4">{% trans "Log In" %}</h2>
-
-          {# Login form #}
-          <form action="{% url 'login' %}" method="post">
-            {% csrf_token %}
-
-            {# Set post-login URL #}
-            {% if 'next' in request.GET %}
-              <input type="hidden" name="next" value="{{ request.GET.next }}" />
-            {% elif 'next' in request.POST %}
-              <input type="hidden" name="next" value="{{ request.POST.next }}" />
+            {# Login banner #}
+            {% if config.BANNER_LOGIN %}
+                <div class="mb-5 text-center">
+                    {{ config.BANNER_LOGIN|safe }}
+                </div>
             {% endif %}
 
-            {% render_form form %}
+            {# Login form errors #}
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger" role="alert">
+                    <h4 class="alert-heading">{% trans "Errors" %}</h4>
+                    <p>
+                        {{ form.non_field_errors }}
+                    </p>
+                </div>
+            {% endif %}
 
-            <div class="form-footer">
-              <button type="submit" class="btn btn-primary w-100">
-                {% trans "Sign In" %}
-              </button>
+            <div class="card card-md">
+                <div class="card-body">
+                    <h2 class="text-center mb-4">{% trans "Log In" %}</h2>
+
+                    {# Login form #}
+                    <form action="{% url 'login' %}" method="post">
+                        {% csrf_token %}
+
+                        {# Set post-login URL #}
+                        {% if 'next' in request.GET %}
+                            <input type="hidden" name="next" value="{{ request.GET.next }}"/>
+                        {% elif 'next' in request.POST %}
+                            <input type="hidden" name="next" value="{{ request.POST.next }}"/>
+                        {% endif %}
+
+                        {% for field in form %}
+                            <div class="form-group">
+                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+                                {{ field }}
+                                {% if field.errors %}
+                                    <ul class="errorlist">
+                                        {% for error in field.errors %}
+                                            <li>{{ error }}</li>
+                                        {% endfor %}
+                                    </ul>
+                                {% endif %}
+                            </div>
+                        {% endfor %}
+
+                        <div class="form-footer">
+                            <button type="submit" class="btn btn-primary w-100">
+                                {% trans "Sign In" %}
+                            </button>
+                        </div>
+                    </form>
+                </div>
             </div>
-          </form>
+
+
+            {# SSO login #}
+            {% if auth_backends %}
+                <div class="hr-text">{% trans "Or" context "Denotes an alternative option" %}</div>
+                <div class="card-body">
+                    <div class="row">
+                        {% for backend in auth_backends %}
+                            <div class="col">
+                                <a href="{{ backend.url }}" class="btn w-100">
+                                    {% if backend.icon_name %}<i class="mdi mdi-{{ backend.icon_name }}"></i>{% endif %}
+                                    {{ backend.display_name }}
+                                </a>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+            {% endif %}
+
         </div>
 
-        {# SSO login #}
-        {% if auth_backends %}
-          <div class="hr-text">{% trans "Or" context "Denotes an alternative option" %}</div>
-          <div class="card-body">
-            <div class="row">
-              {% for backend in auth_backends %}
-                <div class="col">
-                  <a href="{{ backend.url }}" class="btn w-100">
-                    {% if backend.icon_name %}<i class="mdi mdi-{{ backend.icon_name }}"></i>{% endif %}
-                    {{ backend.display_name }}
-                  </a>
-                </div>
-              {% endfor %}
-            </div>
-          </div>
-        {% endif %}
-
-      </div>
-
     </div>
-  </div>
+    </div>
 
 {% endblock layout %}