Update the "Add TOTP" form to display plaintext TOTP secret

Fixes: #602

CHANGELOG.md

@@ -7,6 +7,7 @@ All notable changes to this project will be documented in this file.
 - Update Telegram integration to treat "group chat was deleted" as permanent error
 - Update email bounce handler to mark email channels as disabled (#446)
 - Update Signal integration to use JSON RPC over UNIX socket
+- Update the "Add TOTP" form to display plaintext TOTP secret (#602)
 
 ## v1.25.0 - 2022-01-07
 

hc/accounts/views.py

@@ -745,7 +745,11 @@ def add_totp(request):
 
     uri = totp.provisioning_uri(name=request.user.email, issuer_name=settings.SITE_NAME)
     qr_data_uri = segno.make(uri).png_data_uri(scale=8)
-    ctx = {"form": form, "qr_data_uri": qr_data_uri}
+    ctx = {
+        "form": form,
+        "qr_data_uri": qr_data_uri,
+        "secret": request.session["totp_secret"],
+    }
     return render(request, "accounts/add_totp.html", ctx)
 
 

static/css/profile.css

@@ -78,4 +78,10 @@ span.loading {
 
 .add-totp-step {
     margin-top: 32px;
+}
+
+code.totp-secret {
+    display: block;
+    padding: 4px 0;
+    font-size: 18px;
 }

templates/accounts/add_totp.html

@@ -16,9 +16,11 @@
     <div class="spacer"></div>
     <p class="add-totp-step">
         <strong>Step 1.</strong>
-        Scan the QR code below using your authentication app.
+        Scan the QR code below using your authentication app, or enter
+        the secret key manually.
     </p>
 
+    <p>Secret key: <code class="totp-secret">{{ secret }}</code></p>
     <img src="{{ qr_data_uri }}" />
 
     <p class="add-totp-step">