Update templates for 2fa

- Add/update translations
- Add browser titles
- Fix HTML syntax
- Reformat HTML
- Fix design issues
- Add missing template for disabling

aleksis/core/templates/two_factor/_base_focus.html

 {% extends "core/base.html" %}
 
+{% load i18n %}
+
+{% block browser_title %}
+  {% trans "Enable Two-Factor Authentication" %}
+{% endblock %}
+
 {% block content_wrapper %}
-        {% block content %}{% endblock %}
+  {% block content %}{% endblock %}
 {% endblock %}

aleksis/core/templates/two_factor/_wizard_actions.html

@@ -2,15 +2,16 @@
 
 {% if cancel_url %}
   <a href="{{ cancel_url }}" class="btn red waves-effect waves-light">
-  <i class="material-icons left">cancel</i>
+    <i class="material-icons left">cancel</i>
     {% trans "Cancel" %}
   </a>
 {% endif %}
+
 {% if wizard.steps.prev %}
   <button name="wizard_goto_step" type="submit"
           value="{{ wizard.steps.prev }}"
           class="btn grey waves-effect waves-light">
-  <i class="material-icons left">arrow_back</i>
+    <i class="material-icons left">arrow_back</i>
     {% trans "Back" %}
   </button>
 {% else %}
@@ -19,7 +20,8 @@
     {% trans "Back" %}
   </button>
 {% endif %}
+
 <button type="submit" class="btn green waves-effect waves-light">
-    <i class="material-icons right">arrow_forward</i>
+  <i class="material-icons right">arrow_forward</i>
   {% trans "Next" %}
 </button>

aleksis/core/templates/two_factor/_wizard_forms.html

 {% load material_form %}
 
-  {% form form=wizard.management_form %}{% endform %}
-  {% form form=wizard.form %}{% endform %}
+{% form form=wizard.management_form %}{% endform %}
+{% form form=wizard.form %}{% endform %}

aleksis/core/templates/two_factor/core/backup_tokens.html

 {% extends "core/base.html" %}
 {% load i18n %}
 
+{% block browser_title %}
+  {% trans "Backup Tokens" %}
+{% endblock %}
+
 {% block content %}
   <h4>{% block title %}{% trans "Backup Tokens" %}{% endblock %}</h4>
 

aleksis/core/templates/two_factor/core/login.html

@@ -2,6 +2,10 @@
 {% extends "two_factor/_base_focus.html" %}
 {% load i18n two_factor %}
 
+{% block browser_title %}
+  {% trans "Login" %}
+{% endblock %}
+
 {% block content %}
   <h4>{% trans "Login" %}</h4>
 
@@ -27,7 +31,6 @@
           These tokens have been generated for you to print and keep safe. Please
           enter one of these backup tokens to login to your account.{% endblocktrans %}
       {% endif %}
-    </>
   </div>
 
 
@@ -36,7 +39,9 @@
     {% include "two_factor/_wizard_forms.html" %}
 
     {# hidden submit button to enable [enter] key #}
-    <div style="margin-left: -9999px"><input type="submit" value=""/></div>
+    <div style="margin-left: -9999px">
+      <input type="submit" value=""/>
+    </div>
 
     {% if other_devices %}
       <p>{% trans "Or, alternatively, use one of your backup phones:" %}</p>

aleksis/core/templates/two_factor/core/otp_required.html

@@ -2,19 +2,26 @@
 {% load i18n %}
 
 {% block content %}
-  <h1>{% block title %}{% trans "Permission Denied" %}{% endblock %}</h1>
+  <div class="container">
+    <div class="card red">
+      <div class="card-content white-text">
+        <i class="material-icons small left">error_outline</i>
+        <span class="card-title">{% blocktrans %}Permission Denied{% endblocktrans %}</span>
+        <p>{% blocktrans %}The page you requested, enforces users to verify using
+          two-factor authentication for security reasons. You need to enable these
+          security features in order to access this page.{% endblocktrans %}</p>
 
-  <p>{% blocktrans %}The page you requested, enforces users to verify using
-    two-factor authentication for security reasons. You need to enable these
-    security features in order to access this page.{% endblocktrans %}</p>
-
-  <p>{% blocktrans %}Two-factor authentication is not enabled for your
-    account. Enable two-factor authentication for enhanced account
-    security.{% endblocktrans %}</p>
-  <p>
-    <a href="javascript:history.go(-1)"
-       class="pull-right btn btn-dark">{% trans "Go back" %}</a>
-    <a href="{% url 'two_factor:setup' %}" class="btn btn-dark">
-    {% trans "Enable Two-Factor Authentication" %}</a>
-  </p>
+        <p>{% blocktrans %}Two-factor authentication is not enabled for your
+          account. Enable two-factor authentication for enhanced account
+          security.{% endblocktrans %}</p>
+        <p>
+          <a href="javascript:history.go(-1)" class="pull-right btn waves-effect waves-light">
+            {% trans "Go back" %}
+          </a>
+          <a href="{% url 'two_factor:setup' %}" class="btn green waves-effect waves-light">
+            {% trans "Enable Two-Factor Authentication" %}</a>
+        </p>
+      </div>
+    </div>
+  </div>
 {% endblock %}

aleksis/core/templates/two_factor/core/phone_register.html

 {% extends "two_factor/_base_focus.html" %}
 {% load i18n %}
 
+{% block browser_title %}
+  {% trans "Add Backup Phone" %}
+{% endblock %}
+
 {% block content %}
-  <h1>{% block title %}{% trans "Add Backup Phone" %}{% endblock %}</h1>
+  <h4>{% block title %}{% trans "Add Backup Phone" %}{% endblock %}</h4>
 
   {% if wizard.steps.current == 'setup' %}
-      <p>{% blocktrans %}You'll be adding a backup phone number to your
-        account. This number will be used if your primary method of
-        registration is not available.{% endblocktrans %}</p>
+    <p>{% blocktrans %}You'll be adding a backup phone number to your
+      account. This number will be used if your primary method of
+      registration is not available.{% endblocktrans %}</p>
   {% elif wizard.steps.current == 'validation' %}
-      <p>{% blocktrans %}We've sent a token to your phone number. Please
-        enter the token you've received.{% endblocktrans %}</p>
+    <p>{% blocktrans %}We've sent a token to your phone number. Please
+      enter the token you've received.{% endblocktrans %}</p>
   {% endif %}
 
   <form action="" method="post">{% csrf_token %}
     {% include "two_factor/_wizard_forms.html" %}
 
     {# hidden submit button to enable [enter] key #}
-    <div style="margin-left: -9999px"><input type="submit" value=""/></div>
+    <div style="margin-left: -9999px">
+      <input type="submit" value=""/>
+    </div>
 
     {% include "two_factor/_wizard_actions.html" %}
   </form>

aleksis/core/templates/two_factor/core/setup.html

@@ -3,8 +3,9 @@
 
 {% block content %}
   <h4>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h4>
+
   {% if wizard.steps.current == 'welcome' %}
-    <p>
+    <p class="flow-text">
       {% blocktrans %}
         You are about to take your account security to the
         next level. Follow the steps in this wizard to enable two-factor
@@ -14,7 +15,7 @@
   {% elif wizard.steps.current == 'method' %}
     <p>
       {% blocktrans %}
-        Please select which authentication method you would like to use.
+        Please select which authentication method you would like to use:
       {% endblocktrans %}
     </p>
   {% elif wizard.steps.current == 'generator' %}
@@ -58,7 +59,7 @@
         </p>
       {% endif %}
     {% else %}
-      <p class="alert alert-warning" role="alert">
+      <p class="alert warning" role="alert">
         {% blocktrans %}
           We've encountered an issue with the selected authentication method. Please
           go back and verify that you entered your information correctly, try
@@ -76,6 +77,7 @@
       {% endblocktrans %}
     </p>
   {% endif %}
+
   <form action="" method="post">
     {% csrf_token %}
 

aleksis/core/templates/two_factor/core/setup_complete.html

 {% extends "two_factor/_base_focus.html" %}
 {% load i18n %}
 
+{% block browser_title %}
+  {% trans "Two-Factor Authentication successfully enabled" %}
+{% endblock %}
+
 {% block content %}
-  <h4>{% block title %}{% trans "Enable Two-Factor Authentication" %}{% endblock %}</h4>
+  <h4>{% block title %}{% trans "Two-Factor Authentication successfully enabled" %}{% endblock %}</h4>
 
   <div class="alert success">
     <p>

aleksis/core/templates/two_factor/profile/disable.html

+{% extends "two_factor/_base_focus.html" %}
+{% load i18n material_form %}
+
+{% block browser_title %}
+  {% trans "Disable Two-Factor Authentication" %}
+{% endblock %}
+
+{% block content %}
+  <h4>{% block title %}{% trans "Disable Two-Factor Authentication" %}{% endblock %}</h4>
+
+  <p class="flow-text">
+    {% blocktrans trimmed %}
+      You are about to disable two-factor authentication. This
+      weakens your account security, are you sure?
+    {% endblocktrans %}
+  </p>
+
+  <form method="post">
+    {% csrf_token %}
+    <p>
+      {% form form=form %}{% endform %}
+    </p>
+
+    <button class="btn red waves-effect waves-light" type="submit">
+      <i class="material-icons left">power_settings_new</i>
+      {% trans "Disable" %}
+    </button>
+  </form>
+{% endblock %}

aleksis/core/templates/two_factor/profile/profile.html

 {% extends "two_factor/_base_focus.html" %}
 {% load i18n two_factor %}
 
+{% block browser_title %}
+  {% trans "Account Security" %}
+{% endblock %}
+
 {% block content %}
   <h4>
     {% block title %}{% trans "Account Security" %}{% endblock %}
@@ -77,6 +81,7 @@
         security.
       {% endblocktrans %}
     </p>
+
     <p>
       <a href="{% url 'two_factor:setup' %}" class="green btn waves-effect waves-light ">
         {% trans "Enable Two-Factor Authentication" %}