resurrect qrcode display, fixes #1861

Closes #1861

Merge request studip/studip!1220

resources/assets/javascripts/bootstrap/qr_code.js

@@ -8,3 +8,19 @@ $(document).on('click', 'a[data-qr-code]', function (event) {
 
     event.preventDefault();
 });
+
+STUDIP.ready(event => {
+    $('code.qr', event.target).each(function () {
+        const text = $(this).text().trim();
+        if ($(this).hasClass('hide-text')) {
+            $(this).text('');
+        }
+
+        $(this).qrcode({
+            text: text,
+            width: 1280,
+            height: 1280,
+            correctLevel: 3
+        }).addClass('has-qr-code');
+    });
+});

resources/assets/stylesheets/scss/tfa.scss

 .tfa-app-code {
     code.qr {
-        display: none;
-    }
-    .qrcode img {
+        display: block;
         margin: auto;
-        width: 40%;
         max-width: 50vw;
+        width: 40%;
+
+        canvas {
+            max-width: 100%;
+            height: auto;
+        }
+
+        &:not(.has-qr-code) {
+            display: none;
+        }
     }
 }
 

templates/tfa-validate.php

@@ -17,7 +17,7 @@
                 . 'anschliessend ein gültiges Token ein.') ?>
         </p>
         <div class="tfa-app-code">
-            <code class="qr"><?= $secret->getProvisioningUri() ?></code>
+            <code class="qr hide-text"><?= $secret->getProvisioningUri() ?></code>
         </div>
     <? elseif ($secret->type === 'app' && $secret->confirmed): ?>
         <p>