mirror of
https://github.com/Icinga/icingaweb2.git
synced 2025-09-24 10:27:46 +02:00
Add: styling of qr code
This commit is contained in:
parent
b6b4315337
commit
ee68271b12
@ -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'
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
]
|
]
|
||||||
|
@ -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);
|
||||||
}
|
}
|
||||||
@ -574,7 +577,7 @@ class Totp
|
|||||||
*/
|
*/
|
||||||
private function setState(string $key): self
|
private function setState(string $key): self
|
||||||
{
|
{
|
||||||
if (! in_array($key, $this->currentStates, true)) {
|
if (!in_array($key, $this->currentStates, true)) {
|
||||||
$this->currentStates[] = $key;
|
$this->currentStates[] = $key;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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);
|
||||||
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user