From be599513e351a006ada93ac4ba90be9ddfbfd794 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 3 Jan 2022 23:31:46 -0500
Subject: [PATCH] FEATURE: use raster image and autofill in 2FA input (#15429)

- switches to a raster image QR code so it can be long-pressed (or right
clicked) and added to iCloud keychain
- adds `autocomplete="one-time-code"` to the 2FA input for better
discoverability
---
 .../app/templates/components/second-factor-input.hbs   |  6 ++++--
 .../app/templates/modal/second-factor-add-totp.hbs     |  7 ++-----
 .../discourse/tests/acceptance/preferences-test.js     |  4 ++--
 app/assets/stylesheets/common/base/user.scss           |  8 --------
 app/controllers/users_controller.rb                    | 10 ++++------
 5 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs b/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs
index 8a0d24d1456..6251cb0c8fa 100644
--- a/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/second-factor-input.hbs
@@ -4,7 +4,9 @@
     maxlength=maxlength
     class="second-factor-token-input"
     id=inputId
-    autocorrect="off"
     autocapitalize="off"
+    autocomplete="one-time-code"
+    autocorrect="off"
     autofocus="autofocus"
-    placeholder=placeholder}}
+    placeholder=placeholder
+}}
diff --git a/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs b/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs
index e0d1ed6b447..0caeb9d26af 100644
--- a/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs
+++ b/app/assets/javascripts/discourse/app/templates/modal/second-factor-add-totp.hbs
@@ -16,12 +16,9 @@
 
     <div class="control-group">
       <div class="controls">
-        <div class="qr-code-container">
-          <div class="qr-code">
-            {{html-safe secondFactorImage}}
-          </div>
+        <div class="qr-code">
+          <img src={{html-safe secondFactorImage}}>
         </div>
-
         <p>
           {{#if showSecondFactorKey}}
             {{secondFactorKey}}
diff --git a/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js b/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js
index 9508547b5ad..4974c6c3799 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/preferences-test.js
@@ -28,7 +28,7 @@ function preferencesPretender(server, helper) {
   server.post("/u/create_second_factor_totp.json", () => {
     return helper.response({
       key: "rcyryaqage3jexfj",
-      qr: '<div id="test-qr">qr-code</div>',
+      qr: "data:image/png;base64,notarealimage",
     });
   });
 
@@ -207,7 +207,7 @@ acceptance("User Preferences", function (needs) {
     assert.notOk(exists("#password"), "it hides the password input");
 
     await click(".new-totp");
-    assert.ok(exists("#test-qr"), "shows qr code");
+    assert.ok(exists(".qr-code img"), "shows qr code image");
 
     await click(".add-totp");
 
diff --git a/app/assets/stylesheets/common/base/user.scss b/app/assets/stylesheets/common/base/user.scss
index e6106f08a01..5b4abd47ac6 100644
--- a/app/assets/stylesheets/common/base/user.scss
+++ b/app/assets/stylesheets/common/base/user.scss
@@ -747,14 +747,6 @@
   }
 }
 
-.qr-code-container {
-  display: flex;
-  .qr-code {
-    padding: 5px 5px 0 5px;
-    background-color: white;
-  }
-}
-
 .second-factor {
   &.instructions {
     color: var(--primary-medium);
diff --git a/app/controllers/users_controller.rb b/app/controllers/users_controller.rb
index 16590386f43..28c87c56cd2 100644
--- a/app/controllers/users_controller.rb
+++ b/app/controllers/users_controller.rb
@@ -1412,16 +1412,14 @@ class UsersController < ApplicationController
     require 'rotp' if !defined? ROTP
     totp_data = ROTP::Base32.random
     secure_session["staged-totp-#{current_user.id}"] = totp_data
-    qrcode_svg = RQRCode::QRCode.new(current_user.totp_provisioning_uri(totp_data)).as_svg(
-      offset: 0,
-      color: '000',
-      shape_rendering: 'crispEdges',
-      module_size: 4
+    qrcode_png = RQRCode::QRCode.new(current_user.totp_provisioning_uri(totp_data)).as_png(
+      border_modules: 1,
+      size: 240
     )
 
     render json: success_json.merge(
              key: totp_data.scan(/.{4}/).join(" "),
-             qr: qrcode_svg
+             qr: qrcode_png.to_data_url
            )
   end