Addresses several structure and style issues with TOTP and Email dialogs.

Added missing div tags that were causing style problems.
Reformatted HTML to make it easier to read.
Added whitespace above buttons on TOTP Add dialog.
Changed "6-digit" to "code" on email dialogs because number of digits varies.

mfa/templates/Email/Add.html

@@ -2,18 +2,15 @@
 {% block head %}
 {% endblock %}
 {% block content %}
-    <br/>
-    <br/>
-
+<br/>
+<br/>
+<div class="container">
   <div class="panel panel-default">
     <div class="panel-heading">
       <strong> Activate Token by email</strong>
     </div>
     <div class="panel-body">
-
       <FORM METHOD="POST" ACTION="{% url 'start_email' %}" Id="formLogin"  onSubmit="" name="FrontPage_Form1">
-
-
         {% csrf_token %}
         {%  if invalid %}
         <div class="alert alert-danger">
@@ -28,10 +25,9 @@
         <fieldset>
           <div class="row">
             <div class="col-sm-12 col-md-12">
-        <p>Enter the 6-digits sent to your email.</p>
+              <p>Enter the code sent to your email.</p>
             </div>
           </div>
-
           <div class="row">
             <div class="col-sm-12 col-md-12">
               <div class="form-group">
@@ -40,16 +36,16 @@
                   <i class="glyphicon glyphicon-lock"></i>
                   </span>
                   <input class="form-control" size="6" MaxLength="6" value="" placeholder="e.g 55552" name="otp" type="text" id="otp" autofocus>
-
                 </div>
               </div>
-
               <div class="form-group">
-
                 <input type="submit" class="btn btn-lg btn-success btn-block" value="Verify">
               </div>
             </div>
+          </div>
         </fieldset>
       </FORM>
     </div>
+  </div>
+</div>
 {% endblock %}

mfa/templates/Email/recheck.html

@@ -39,7 +39,7 @@
       <fieldset>
       <div class="row">
       <div class="col-sm-12 col-md-12">
-        <p>Enter the 6-digits sent to your email.</p>
+        <p>Enter the code sent to your email.</p>
       </div>
       </div>
 

mfa/templates/MFA.html

@@ -66,7 +66,7 @@
                 {% endif %}
             </ul>
             </div>
-
+        </div>
     <br/>
     <br/>
        <table class="table table-striped">

mfa/templates/TOTP/Add.html

@@ -2,7 +2,7 @@
 {% extends "base.html" %}
 {% load static %}
 {% block head %}
-    <style>
+<style>
     #two-factor-steps {
 	border: 1px solid #ccc;
 	border-radius: 3px;
@@ -12,8 +12,8 @@
         margin: 0px;
     }
     </style>
-    <script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
-    <script type="text/javascript">
+<script src="{% static 'mfa/js/qrious.min.js' %}" type="text/javascript"></script>
+<script type="text/javascript">
     var key="";
     $(document).ready(function addToken() {
         $.ajax({
@@ -61,16 +61,16 @@
     </script>
 {% endblock %}
 {% block content %}
-    <br/>
-    <br/>
-    <div class="container">
+<br/>
+<br/>
+<div class="container">
     <div class="col-md-6 col-md-offset-3" id="two-factor-steps">
         <div class="row" align="center">
             <h4>Adding Authenticator</h4>
         </div>
         <div class="row">
 
-        <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a> phone/PC. If you can’t use a barcode,
+            <p>Scan the image below with the two-factor authentication app on your <a href="javascript:void(0)" onclick="showTOTP()">phone/PC</a>. If you can’t use a barcode,
                 <a href="javascript:void(0)" onclick="showKey()">enter this text</a> instead. </p>
         </div>
 
@@ -93,7 +93,7 @@
                 <input style="display: inline;width: 95%" maxlength="6" size="6" class="form-control" id="answer" placeholder="e.g 785481"/>
 
             </div>
-        <div class="row">
+            <div class="row" style="padding-top: 10px;">
                 <div class="col-md-6" style="padding-left: 0px">
                     <button class="btn btn-success" onclick="verify()">Enable</button>
                 </div>
@@ -104,6 +104,6 @@
         </div>
 
     </div>
-        </div>
-    {% include "modal.html" %}
+</div>
+{% include "modal.html" %}
 {% endblock %}