Add 'Download QR Code' action link

So the user can download the QR code to backup if they lose access
to their device.

The download currently does only work in chrome and firefox, but
not in safari. The reason is, that the action link uses
`ipl\Web\Url` which adds '///' between the schema and the base
path. The safari browser can't handle this.

'data:image/png;base64,...' is converted to
'data:///image/png;base64...'.
This commit is contained in:
Johannes Rauh 2025-12-02 15:35:52 +01:00
parent 268c6ddeee
commit e643dcc413

View file

@ -18,6 +18,7 @@ use ipl\Web\Common\CsrfCounterMeasure;
use ipl\Web\Common\FormUid;
use ipl\Web\Compat\CompatForm;
use ipl\Web\Url;
use ipl\Web\Widget\ActionLink;
use ipl\Web\Widget\CopyToClipboard;
/**
@ -112,15 +113,28 @@ class TwoFactorConfigForm extends CompatForm
$this->twoFactor = TwoFactorTotp::createFromSecret($secret, $this->user->getUsername());
}
$qrCode = $this->twoFactor->createQRCode();
$this->addHtml(new FakeFormElement(
HtmlElement::create('img', Attributes::create([
'class' => 'two-factor-totp-qr-code',
'src' => $this->twoFactor->createQRCode()
])),
HtmlElement::create(
'img',
Attributes::create(['class' => 'two-factor-totp-qr-code', 'src' => $qrCode])
),
$this->translate('QR Code'),
$this->translate('Use your authenticator app to scan the QR code.')
));
$this->addHtml(new FakeFormElement(
new ActionLink(
'Download QR Code (e.g. for Recovery)',
$qrCode,
'download',
Attributes::create(['download' => 'icinga-web-totp-qr-code.png'])
),
description: $this->translate('Download the QR code to back up your two-factor'
. ' authentication in case you lose access to your device.')
));
$manualAuthUrl = HtmlElement::create(
'div',
Attributes::create(['class' => 'two-factor-totp-auth-url']),