From e11811d461f078ea8170a9dcb569d55747aaba96 Mon Sep 17 00:00:00 2001
From: Mouse Reeve <mousereeve@riseup.net>
Date: Sat, 19 Nov 2022 09:48:44 -0800
Subject: [PATCH] Fancier UI around OTP codes

---
 bookwyrm/templates/preferences/2fa.html | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/bookwyrm/templates/preferences/2fa.html b/bookwyrm/templates/preferences/2fa.html
index b6bce604f..10de2993f 100644
--- a/bookwyrm/templates/preferences/2fa.html
+++ b/bookwyrm/templates/preferences/2fa.html
@@ -46,7 +46,29 @@
         <div class="columns">
             <section class="column is-narrow">
                 <figure class="m-4">{{ qrcode | safe }}</figure>
-                <div> {{ code | safe }} </div>
+                <details class="details-panel box">
+                    <summary>
+                        <span role="heading" aria-level="3" class="title is-6">
+                            {% trans "Use setup key" %}
+                            <span class="details-close icon icon-x" aria-hidden="true"></span>
+                        </span>
+                    </summary>
+                    <dl class="block">
+                        <dt class="has-text-weight-bold mr-5 is-pulled-left">
+                            {% trans "Account name:" %}
+                        </dt>
+                        <dd>
+                            <code>{{ user.username }}</code>
+                        </dd>
+
+                        <dt class="has-text-weight-bold mr-5 is-pulled-left">
+                            {% trans "Code:" %}
+                        </dt>
+                        <dd>
+                            <code>{{ code | safe }}</code>
+                        </dd>
+                    </dl>
+                </details>
                 <div class="field">
                     <label class="label" for="id_otp">{% trans "Enter the code from your app:" %}</label>
                     {{ form.otp }}