src/newsreader/accounts/templates/accounts/components/login-form.html

@@ -1,17 +1,78 @@
 {% extends "components/form/form.html" %}
 {% load i18n %}
 
+{# TODO incorporate formtools wizard #}
+{# TODO add support for other devices and backup tokens #}
+{# see two_factor/templates/two_factor/core/login.html #}
+
+{% block intro %}
+  <div class="form__intro">
+    {% if wizard.steps.current == 'auth' %}
+      <p>{% blocktrans %}Enter your credentials.{% endblocktrans %}</p>
+    {% elif wizard.steps.current == 'token' %}
+      {% if device.method == 'call' %}
+        <p>
+          {% blocktrans trimmed %}
+            We are calling your phone right now, please enter the digits you hear.
+          {% endblocktrans %}
+        </p>
+      {% elif device.method == 'sms' %}
+        <p>
+          {% blocktrans trimmed %}
+            We sent you a text message, please enter the tokens we sent.
+          {% endblocktrans %}
+        </p>
+      {% else %}
+        <p>
+          {% blocktrans trimmed %}
+            Please enter the tokens generated by your token generator.
+          {% endblocktrans %}
+        </p>
+      {% endif %}
+    {% elif wizard.steps.current == 'backup' %}
+      <p>
+        {% blocktrans trimmed %}
+          Use this form for entering backup tokens for logging in.
+          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 %}
+      </p>
+    {% endif %}
+  </div>
+{% endblock intro %}
+
+{# TODO test this #}
+{% block fields %}
+  {{ wizard.management_form }}
+  {{ block.super }}
+{% endblock fields %}
+
 {% block actions %}
   <section class="section form__section--last">
     <fieldset class="fieldset form__fieldset">
+      {% if cancel_url %}
         {% include "components/form/cancel-button.html" %}
+      {% endif %}
+
+      {% if wizard.steps.prev %}
+        <button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}" class="link button">
+          {% trans "Back" %}
+        </button>
+      {% else %}
+        <button disabled name="" type="button" class="link button">
+          {% trans "Back" %}
+        </button>
+      {% endif %}
+
       {% include "components/form/confirm-button.html" %}
     </fieldset>
 
+    {% if wizard.steps.index == wizard.steps.first %}
       <fieldset class="fieldset form__fieldset">
         <a class="link" href="{% url 'accounts:password-reset' %}">
           <small class="small">{% trans "I forgot my password" %}</small>
         </a>
       </fieldset>
+    {% endif %}
   </section>
 {% endblock actions %}

src/newsreader/accounts/templates/accounts/views/login.html

@@ -2,6 +2,6 @@
 
 {% block content %}
   <main id="login--page" class="main">
-    {% include "accounts/components/login-form.html" with form=form title="Login" confirm_text="Login" %}
+    {% include "accounts/components/login-form.html" with title="Login" confirm_text="Next" %}
   </main>
 {% endblock %}

src/newsreader/accounts/views/auth.py

@@ -1,8 +1,10 @@
 from django.contrib.auth import views as django_views
 from django.urls import reverse_lazy
 
+from two_factor import views as two_factor_views
 
-class LoginView(django_views.LoginView):
+
+class LoginView(two_factor_views.LoginView):
     template_name = "accounts/views/login.html"
     success_url = reverse_lazy("index")