From 8e28bc17e8c052ee6d6967905f54218d45c7dd6c Mon Sep 17 00:00:00 2001
From: Augustin-FL <Augustin-FL@users.noreply.github.com>
Date: Tue, 24 Dec 2024 15:48:43 +0100
Subject: [PATCH] Fix login page design when 2FA is enabled

---
 fir_auth_2fa/templates/two_factor/login.html | 116 ++++++++++---------
 1 file changed, 61 insertions(+), 55 deletions(-)

diff --git a/fir_auth_2fa/templates/two_factor/login.html b/fir_auth_2fa/templates/two_factor/login.html
index 4eab2f9a..301954c8 100644
--- a/fir_auth_2fa/templates/two_factor/login.html
+++ b/fir_auth_2fa/templates/two_factor/login.html
@@ -7,70 +7,76 @@
 
   {% if wizard.steps.current == 'auth' %}
     <div class="container">
-      <div class="col-sm-4 col-sm-offset-4 col-xs-12 col-xs-offset-0">
-	<form class="form-signin" method="post"> {% csrf_token %}
-	  {{ wizard.management_form }}
-	  <img class="img-responsive" src="{% static "img/logo.jpg" %}" alt="Logo" />
-	  <h2 class="form-signin-heading">{%  trans "Sign in to FIR" %}</h2>
-	  <fieldset>
-	    {% for field in form %}
-	    {% if field|is_checkbox %}
-	    <div class="checkbox">
-	      <label>
+      <div class="row justify-content-md-center">
+        <div class="col-sm-5 col-sm-offset-4 col-xs-12 col-xs-offset-0">
+          <form class="form-signin p-4" method="post"> {% csrf_token %}
+	    {{ wizard.management_form }}
+	    <img class="img-responsive img-fluid" src="{% static "img/logo.jpg" %}" alt="Logo" />
+	    <h2 class="form-signin-heading">{%  trans "Sign in to FIR" %}</h2>
+	    <fieldset>
+	      {% for field in form %}
+	      {% if field|is_checkbox %}
+	      <div class="checkbox">
+	        <label>
+	          {{ field }}
+	          {{ field.label }}
+	        </label>
+	        </div>	    
+	      {% else %}
+	      <div class="form-group mb-3">
 	        {{ field }}
-		{{ field.label }}
-	      </label>
-	      </div>	    
-	    {% else %}
-	    <div class="form-group mb-3">
-	      {{ field }}
-	      {% if field.help_text %}
-	      <p class="help-inline"><small>{{ field.help_text }}</small></p>
+	        {% if field.help_text %}
+	        <p class="help-inline"><small>{{ field.help_text }}</small></p>
+	        {% endif %}
+	      </div>
 	      {% endif %}
+	      {% endfor %}
+	    </fieldset>
+	    <div class="form-actions">
+              <button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
 	    </div>
-	    {% endif %}
-	    {% endfor %}
-	  </fieldset>
-	  <div class="form-actions">
-	    <button type="submit" class="btn btn-primary" >Submit</button>
+	  </form>
+	  {% if form.errors %}
+	  <div class="alert alert-warning alert-dismissible">
+	        {% for error in form.non_field_errors %}
+	        {{ error }}
+	        {% endfor %}
 	  </div>
-	</form>
-	{% if form.errors %}
-	<div class="alert alert-warning alert-dismissible">
-	      {% for error in form.non_field_errors %}
-	      {{ error }}
-	      {% endfor %}
-	</div>
-	{% endif %}
+	  {% endif %}
+        </div>
       </div>
     </div>
 
   {% elif wizard.steps.current == 'token' %}
       <div class="container">
-      <div class="col-sm-4 col-sm-offset-4 col-xs-12 col-xs-offset-0">
-        <form class="form-signin" method="post"> {% csrf_token %}
-          <img class="img-responsive" src="{% static "img/logo.jpg" %}" alt="Logo" />
-	  <h2 class="form-signin-heading"></h2>
-	    <h2>Please enter the token generated by your token generator.</h2>
-	    {{ wizard.management_form }}
-	    <div class="form-group mb-3">
-	      {{ wizard.form }}
-	    </div>
-            {% if cancel_url %}
-	    <a href="{{ cancel_url }}"
-	       class="pull-right btn btn-link">{% trans "Cancel" %}</a>
-	    {% endif %}
-	    {% if wizard.steps.prev %}
-	    <button name="wizard_goto_step" type="button"
-		    value="{{ wizard.steps.prev }}"
-		    class="btn btn-default">{% trans "Back" %}</button>
-	    {% else %}
-	    <button disabled name="" type="button"
-		    class="btn btn-disabled">{% trans "Back" %}</button>
-	    {% endif %}
-	    <button type="submit" class="btn btn-primary">{% trans "Next" %}</button>
-	    
-      </div>
+        <div class="row justify-content-md-center">
+          <div class="col-sm-4 col-sm-offset-4 col-xs-12 col-xs-offset-0">
+            <form class="form-signin p-4" method="post"> {% csrf_token %}
+              <img class="img-responsive img-fluid" src="{% static "img/logo.jpg" %}" alt="Logo" />
+              <h2 class="form-signin-heading"></h2>
+                {{ wizard.management_form }}
+	        <fieldset>
+                  <h2>Please enter the token generated by your token generator.</h2>
+                  <div class="form-group mb-3">
+                    {{ wizard.form }}
+                  </div>
+		</fieldset>
+                {% if cancel_url %}
+                <a href="{{ cancel_url }}"
+                   class="pull-right btn btn-link">{% trans "Cancel" %}</a>
+                {% endif %}
+                {% if wizard.steps.prev %}
+                <button name="wizard_goto_step" type="button"
+            	    value="{{ wizard.steps.prev }}"
+            	    class="btn btn-default">{% trans "Back" %}</button>
+                {% else %}
+                <button disabled name="" type="button"
+            	    class="btn btn-disabled">{% trans "Back" %}</button>
+                {% endif %}
+                <button type="submit" class="btn btn-primary">{% trans "Next" %}</button>
+                
+          </div>
+       </div>
       </div>
   {% endif %}