Display the 2FA key in addition to a QR code

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

@@ -33,6 +33,9 @@
 
 <img src="/settings/two_factor/qr_code" alt="" />
 
+<p>If you are unable to scan the QR code, you can enter the following key:
+<p><strong>{{ two_factor_secret }}</strong></p>
+
 <p>Lastly, enter the 6-digit code displayed in the app.</p>
 
 <div class="divider"></div>

tildes/tildes/views/settings.py

@@ -13,6 +13,7 @@ from pyramid.view import view_config
 import qrcode
 from webargs.pyramidparser import use_kwargs
 
+from tildes.lib.string import separate_string
 from tildes.schemas.user import EMAIL_ADDRESS_NOTE_MAX_LENGTH, UserSchema
 
 
@@ -55,8 +56,13 @@ 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": separate_string(request.user.two_factor_secret, " ", 4)
+    }
 
 
 @view_config(
@@ -91,10 +97,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()