From 0d1363fca7fbb595f9fbabcaa15136de7e9cd991 Mon Sep 17 00:00:00 2001
From: Quinten Kock <7569492+ColonelPhantom@users.noreply.github.com>
Date: Fri, 20 Sep 2024 13:16:34 +0200
Subject: [PATCH] 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 <dirk.doesburg@gmail.com>

---------

Co-authored-by: Ties Dirksen <tiesdirksen@gmail.com>
Co-authored-by: Ties Dirksen <78494266+T8902@users.noreply.github.com>
Co-authored-by: Dirk Doesburg <dirk.doesburg@gmail.com>
---
 website/templates/two_factor/_base_focus.html |  4 +++-
 website/templates/two_factor/help.html        | 19 +++++++++++++++++++
 .../templates/two_factor/profile/profile.html |  2 +-
 website/thaliawebsite/urls.py                 |  5 +++++
 4 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 website/templates/two_factor/help.html

diff --git a/website/templates/two_factor/_base_focus.html b/website/templates/two_factor/_base_focus.html
index 17461019b..7ace9a660 100644
--- a/website/templates/two_factor/_base_focus.html
+++ b/website/templates/two_factor/_base_focus.html
@@ -3,7 +3,7 @@
 
 
 {% block content_wrapper %}
-<div class="container">
+ <div class="container">
     <div class="col-12">
         {% bootstrap_messages %}
     </div>
@@ -11,6 +11,8 @@
     <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>
diff --git a/website/templates/two_factor/help.html b/website/templates/two_factor/help.html
new file mode 100644
index 000000000..db92596bf
--- /dev/null
+++ b/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 %}
diff --git a/website/templates/two_factor/profile/profile.html b/website/templates/two_factor/profile/profile.html
index 4bad1bd14..d4191fc4a 100644
--- a/website/templates/two_factor/profile/profile.html
+++ b/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>
diff --git a/website/thaliawebsite/urls.py b/website/thaliawebsite/urls.py
index c6317db34..3fc55bae5 100644
--- a/website/thaliawebsite/urls.py
+++ b/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"),
+                ),
             ]
         ),
     ),