tyler.durden/icingaweb2
1
0
Fork 0
mirror of https://github.com/Icinga/icingaweb2.git synced 2025-09-24 10:27:46 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add: styling of qr code

Browse Source
This commit is contained in:
Jan Schuppik 2025-08-01 20:49:26 +02:00
parent b6b4315337
commit ee68271b12
3 changed files with 41 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
application/forms/Account/TotpForm.php
View File

@ -174,6 +174,7 @@ class TotpForm extends PreferenceForm
'HtmlTag', [ 'HtmlTag', [
'tag' => 'img', 'tag' => 'img',
'src' => $this->totp->createQRCode(), 'src' => $this->totp->createQRCode(),
'class' => 'qr-code-image'
] ]
] ]
] ]
@ -190,7 +191,7 @@ class TotpForm extends PreferenceForm
'HtmlTag', 'HtmlTag',
[ [
'tag' => 'div', 'tag' => 'div',
'class' => 'control-group form-controls' 'class' => 'control-group form-controls aligned-group'
] ]
] ]
] ]

35
library/Icinga/Authentication/Totp.php
View File

@ -2,7 +2,6 @@
namespace Icinga\Authentication; namespace Icinga\Authentication;
use chillerlan\QRCode\Common\EccLevel;
use chillerlan\QRCode\Data\QRMatrix; use chillerlan\QRCode\Data\QRMatrix;
use chillerlan\QRCode\QRCode; use chillerlan\QRCode\QRCode;
use chillerlan\QRCode\QROptions; use chillerlan\QRCode\QROptions;
@ -20,7 +19,6 @@ use ipl\Sql\Select;
use ipl\Sql\Update; use ipl\Sql\Update;
use ipl\Stdlib\Filter; use ipl\Stdlib\Filter;
use OTPHP\TOTP as extTOTP; use OTPHP\TOTP as extTOTP;
use Zend_Db_Expr;
class Totp class Totp
{ {
@ -180,7 +178,6 @@ class Totp
public function verify(string $code): bool public function verify(string $code): bool
{ {
if ($this->totpObject === null) { if ($this->totpObject === null) {
return false; return false;
} }
@ -375,7 +372,6 @@ class Totp
public function createQRCode(): ?string public function createQRCode(): ?string
{ {
if ($this->temporaryTotpObject === null) { if ($this->temporaryTotpObject === null) {
return null; return null;
} }
@ -387,19 +383,26 @@ class Totp
urlencode($this->temporarySecret), urlencode($this->temporarySecret),
); );
$options = new QROptions(); $options = new QROptions();
$options->drawLightModules = true;
$options->svgUseFillAttributes = true;
$options->drawCircularModules = true;
$options->circleRadius = 0.4;
$options->connectPaths = true;
$options->keepAsSquare = [
QRMatrix::M_FINDER_DARK,
QRMatrix::M_FINDER_DOT,
QRMatrix::M_ALIGNMENT_DARK,
];
$options->scale = 5; $options->svgDefs = '
<linearGradient id="rainbow" x1="1" y2="1">
// $options->svgLogo = __DIR__.'/github.svg'; // logo from: https://github.com/simple-icons/simple-icons <stop stop-color="#06062C" offset="0"/>
// $options->svgLogoScale = 0.25; <stop stop-color="#E0009D" offset="1"/>
// $options->svgLogoCssClass = 'dark'; </linearGradient>
// <style><![CDATA[
// $options->addLogoSpace = true; .dark{fill: url(#rainbow);}
// $options->logoSpaceWidth = 19; .light{fill: #eee;}
// $options->logoSpaceHeight = 19; ]]></style>';
// $options->logoSpaceStartX = 25;
// $options->logoSpaceStartY = 25;
// $options->eccLevel = EccLevel::H;
return (new QRCode($options))->render($urlOTPAUTH); return (new QRCode($options))->render($urlOTPAUTH);
} }

16
public/css/icinga/forms.less
View File

@ -44,6 +44,11 @@ form.icinga-form {
justify-content: flex-end; justify-content: flex-end;
} }
.aligned-group {
align-items: center;
justify-content: center;
}
&.inline { &.inline {
width: auto; width: auto;
@ -595,3 +600,14 @@ form.icinga-form .form-info {
} }
} }
} }
// QR code image style
.qr-code-image {
display: block;
margin: 0 auto;
width: 20em;
height: 20em;
border: .25em solid transparent;
border-radius: .25em;
box-shadow: 0 0 .25em 0 rgba(0,0,0,.4);
}