Move 2FA settings template logic into view, add help text

Move the logic required to split the key into groups from the template into the view. Additionally add some helper text to indicate how to use the key.

tildes/tildes/templates/settings_two_factor.jinja2

@@ -29,12 +29,9 @@
 <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>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>
 

tildes/tildes/views/settings.py

@@ -10,6 +10,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
 
 
@@ -56,7 +57,9 @@ def get_settings_two_factor(request: Request) -> dict:
     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}
+    return {
+        "two_factor_secret": separate_string(request.user.two_factor_secret, " ", 4)
+    }
 
 
 @view_config(