From aefc7a23bcf3c4bc2c492eec384ce853974b988f Mon Sep 17 00:00:00 2001
From: Hugh Rundle <hugh@hughrundle.net>
Date: Fri, 14 Oct 2022 21:54:52 +1100
Subject: [PATCH] fix 2fa templates

- translate all strings
- do not embed svg element inside svg element
- fix sizing of input for confirming 2fa setup
---
 bookwyrm/templates/preferences/2fa.html       | 26 +++++++++----------
 .../two_factor_auth/two_factor_login.html     |  1 +
 .../two_factor_auth/two_factor_prompt.html    |  7 ++---
 3 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/bookwyrm/templates/preferences/2fa.html b/bookwyrm/templates/preferences/2fa.html
index 5d56e828d..b0703bc4a 100644
--- a/bookwyrm/templates/preferences/2fa.html
+++ b/bookwyrm/templates/preferences/2fa.html
@@ -32,7 +32,7 @@
     </div>
     {% elif request.user.two_factor_auth %}
     <div class="block">
-        <p>Two Factor Authentication is active on your account.</p>
+        <p>{% trans "Two Factor Authentication is active on your account." %}</p>
         <a class="button is-danger" href="{% url 'disable-2fa' %}">{% trans "Disable 2FA" %}</a>
     </div>
     <div class="block">
@@ -42,21 +42,21 @@
     {% elif password_confirmed %}
     <form name="confirm-2fa" action="{% url 'conf-2fa' %}" method="post" enctype="multipart/form-data">
     {% csrf_token %}
-        <p>Scan the QR code with your authentication app and then enter the code from  your app below to confirm your app is set up.</p>
-        <div>
-            <svg width="200" height="200" style="background: white;" xmlns="http://www.w3.org/2000/svg">
-                {{ qrcode | safe }}
-            </svg>
+        <p>{% trans "Scan the QR code with your authentication app and then enter the code from  your app below to confirm your app is set up." %}</p>
+        <div class="columns">
+            <section class="column is-narrow">
+                <figure class="m-4">{{ qrcode | safe }}</figure>
+                <div class="field">
+                    <label class="label" for="id_otp">{% trans "Enter the code from your app:" %}</label>
+                    {{ form.otp }}
+                    {% include 'snippets/form_errors.html' with errors_list=form.otp.errors id="desc_otp" %}
+                </div>
+                <button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
+            </section>
         </div>
-        <div class="field">
-            <label class="label" for="id_otp">{% trans "Enter the code from your authenticator app:" %}</label>
-            {{ form.otp }}
-            {% include 'snippets/form_errors.html' with errors_list=form.otp.errors id="desc_otp" %}
-        </div>
-        <button class="button is-primary" type="submit">{% trans "Confirm" %}</button>
     </form>
     {% else %}
-    <p class="">
+    <p>
         {% trans "You can make your account more secure by using Two Factor Authentication (2FA). This will require you to enter a one-time code using a phone app like <em>Authy</em>, <em>Google Authenticator</em> or <em>Microsoft Authenticator</em> each time you log in." %}
     </p>
     <p> {% trans "Confirm your password to begin setting up 2FA." %}</p>
diff --git a/bookwyrm/templates/two_factor_auth/two_factor_login.html b/bookwyrm/templates/two_factor_auth/two_factor_login.html
index f4a2fdf04..bea1c4f0e 100644
--- a/bookwyrm/templates/two_factor_auth/two_factor_login.html
+++ b/bookwyrm/templates/two_factor_auth/two_factor_login.html
@@ -44,6 +44,7 @@
             </div>
         </div>
     </div>
+    <!-- TODO: make this a snippet that is included -->
     <footer class="footer">
         <div class="container">
             <div class="columns">
diff --git a/bookwyrm/templates/two_factor_auth/two_factor_prompt.html b/bookwyrm/templates/two_factor_auth/two_factor_prompt.html
index 7fa1ff326..479f46c9c 100644
--- a/bookwyrm/templates/two_factor_auth/two_factor_prompt.html
+++ b/bookwyrm/templates/two_factor_auth/two_factor_prompt.html
@@ -31,15 +31,16 @@
                     {% endblock %}
                 </header>
                 <div class="is-centered p-2">
-                    <p class="block">You can secure your account by setting up two factor authentication in your user preferences. This will require a one-time code from your phone in addition to your password each time you log in.</p>
+                    <p class="block">{% trans "You can secure your account by setting up two factor authentication in your user preferences. This will require a one-time code from your phone in addition to your password each time you log in." %}</p>
                     <div class="block has-text-centered">
-                        <a class="button" href="/">No thanks</a>
-                        <a class="button is-primary" href="/preferences/2fa">Set up 2FA</a>
+                        <a class="button" href="/">{% trans "No thanks" %}</a>
+                        <a class="button is-primary" href="/preferences/2fa">{% trans "Set up 2FA" %}</a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
+    <!-- TODO: make this a snippet that is included  -->
     <footer class="footer">
         <div class="container">
             <div class="columns">