Display the 2FA key in addition to a QR code

Fixes issue #218. Since not all users are able to scan QR codes (ie. those using cli-based totp applications), allow for manual entry of the 2fa secret key.

tildes/tildes/templates/settings_two_factor.jinja2

@@ -29,6 +29,12 @@
 <p>Next, scan the below QR code with the app of your choice.</p>
 
 <img src="/settings/two_factor/qr_code" alt="" />
+{% set chunk_size = 4 %}
+<p>
+{% for i in range (0, two_factor_secret|length, chunk_size) %}
+<span>{{ two_factor_secret[i:i+chunk_size] }}</span>
+{% endfor %}
+</p>
 
 <p>Lastly, enter the 6-digit code displayed in the app.</p>
 

tildes/tildes/views/settings.py

@@ -52,8 +52,11 @@ def get_settings_account_recovery(request: Request) -> dict:
 @view_config(route_name="settings_two_factor", renderer="settings_two_factor.jinja2")
 def get_settings_two_factor(request: Request) -> dict:
     """Generate the two-factor authentication page."""
-    # pylint: disable=unused-argument
-    return {}
+    # Generate a new secret key if the user doesn't have one.
+    if request.user.two_factor_secret is None:
+        request.user.two_factor_secret = pyotp.random_base32()
+
+    return {"two_factor_secret": request.user.two_factor_secret}
 
 
 @view_config(
@@ -88,10 +91,6 @@ def get_settings_two_factor_qr_code(request: Request) -> Response:
     if request.user.two_factor_enabled:
         raise HTTPForbidden("Already enabled")
 
-    # Generate a new secret key if the user doesn't have one.
-    if request.user.two_factor_secret is None:
-        request.user.two_factor_secret = pyotp.random_base32()
-
     totp = pyotp.totp.TOTP(request.user.two_factor_secret)
     otp_uri = totp.provisioning_uri(request.user.username, issuer_name="Tildes")
     byte_io = BytesIO()