From cb83c5f6dcc8e176ca2494f699840c27f18f9d8f Mon Sep 17 00:00:00 2001
From: Jan-Hendrik Willms <tleilax+studip@gmail.com>
Date: Thu, 8 Dec 2022 08:58:30 +0000
Subject: [PATCH] resurrect qrcode display, fixes #1861
Closes #1861
Merge request studip/studip!1220
---
.../assets/javascripts/bootstrap/qr_code.js | 16 ++++++++++++++++
resources/assets/stylesheets/scss/tfa.scss | 15 +++++++++++----
templates/tfa-validate.php | 2 +-
3 files changed, 28 insertions(+), 5 deletions(-)
diff --git a/resources/assets/javascripts/bootstrap/qr_code.js b/resources/assets/javascripts/bootstrap/qr_code.js
index 3a627f7e290..9ed0b211e15 100644
--- a/resources/assets/javascripts/bootstrap/qr_code.js
+++ b/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');
+ });
+});
diff --git a/resources/assets/stylesheets/scss/tfa.scss b/resources/assets/stylesheets/scss/tfa.scss
index e6b939000c4..178eb7aaf07 100644
--- a/resources/assets/stylesheets/scss/tfa.scss
+++ b/resources/assets/stylesheets/scss/tfa.scss
@@ -1,11 +1,18 @@
.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;
+ }
}
}
diff --git a/templates/tfa-validate.php b/templates/tfa-validate.php
index 62a5eb3f25e..f5221bc705f 100644
--- a/templates/tfa-validate.php
+++ b/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>
--
GitLab