Add 2FA help page (#3796)

* Add 2FA help page

* Add the information tags in the setup pages

* Apply suggestions from code review

Co-authored-by: Dirk Doesburg <[email protected]>

---------

Co-authored-by: Ties Dirksen <[email protected]>
Co-authored-by: Ties Dirksen <[email protected]>
Co-authored-by: Dirk Doesburg <[email protected]>

website/templates/two_factor/_base_focus.html

@@ -3,14 +3,16 @@
 
 
 {% block content_wrapper %}
-<div class="container">
+ <div class="container">
     <div class="col-12">
         {% bootstrap_messages %}
     </div>
 
     <div class="row">
       <div class="col-md-5 offset-md-3">
         {% block content %}{% endblock %}
+
+        <p class="mt-2">For instructions or more information about the 2FA options see <a href="/user/account/two_factor/help/">the help page</a>.</p>
       </div>
     </div>
   </div>

website/templates/two_factor/help.html

@@ -0,0 +1,19 @@
+{% extends 'simple_page.html' %}
+
+{% block page_content %}
+<h1>{% block title %}2FA instructions{% endblock %}</h1>
+
+<p>We require 2FA before you are able to access the administration section of the website. This way, we ensure that users who can see and modify data (including personal data) have secure accounts.</p>
+
+<p>In order to set up 2FA, our website offers a step-by-step wizard. However, the wizard can be unclear if one is not familiar with 2FA terminology, so we hope this page will provide some more clarity.</p>
+
+<h2> Method </h2>
+<p>The wizard asks what method you want to use for 2-factor authentication. If you're unsure, you should pick the default of "Token generator" here. This works via an authenticator app (such as Google Authenticator, Microsoft Authenticator, Authy, and other TOTP apps, as well as some password managers such as Bitwarden and 1Password).</p>
+
+<h2> Token generator setup </h2>
+<p>The easiest way to proceed here is to use the QR code. To use this, open your 2FA app, select the option to add a new (generic) account. This should enable you to scan the QR code. You will then get an initial authentication code that you should enter into the webpage. Alternatively, you can enter the displayed secret code.</p>
+
+<h2> Backup codes </h2>
+<p>After setting up 2FA, you will also get a list of backup codes. These are useful to ensure you can still get into your account if you lose access to your 2FA app. Of course, you can also always ask the Technicie for help to reset your 2FA.</p>
+
+{% endblock %}

website/templates/two_factor/profile/profile.html

@@ -29,7 +29,7 @@ <h3>{% trans "Disable Two-Factor Authentication" %}</h3>
   {% else %}
     <p>{% blocktrans trimmed %}Two-factor authentication is not enabled for your
       account. Enable two-factor authentication for enhanced account
-      security.{% endblocktrans %}</p>
+      security. For instructions see <a href="/user/account/two_factor/help/">the help page</a>.{% endblocktrans %}</p>
     <p><a href="{% url 'two_factor:setup' %}" class="btn btn-primary">
       {% trans "Enable Two-Factor Authentication" %}</a>
     </p>

website/thaliawebsite/urls.py

@@ -32,6 +32,7 @@
 from django.contrib.auth import views as auth_views
 from django.contrib.sitemaps.views import sitemap
 from django.urls import path, re_path
+from django.views.generic.base import TemplateView
 from django.views.i18n import JavaScriptCatalog
 
 import debug_toolbar
@@ -182,6 +183,10 @@
                     name="password_reset",
                 ),
                 path("", include(tf_urls)),
+                path(
+                    "account/two_factor/help/",
+                    TemplateView.as_view(template_name="two_factor/help.html"),
+                ),
             ]
         ),
     ),