Skip to content

QrCode fixed #36

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/lib/Controllers/PreferencesController.php
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ protected function getSecurityTab(): DataTab
if (!$authenticatorData->isTwofaEnabled()) {
$authenticatorData->setIV(AuthenticatorService::makeInitializationKey());

$qrCode = $this->authenticatorService->getQrCodeFromServer($userData->getLogin(), $authenticatorData->getIV());
$qrCode = $this->authenticatorService->getUserQRUrl($userData->getLogin(), $authenticatorData->getIV());
}

$template->assign('qrCode', $qrCode);
Expand Down
2 changes: 1 addition & 1 deletion src/lib/Services/AuthenticatorService.php
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,7 @@ public function getQrCodeFromUrl(string $login, string $iv)
*/
public function getUserQRUrl(string $login, string $iv): string
{
$qrUrl = 'https://www.google.com/chart?chs=150x150&chld=M|0&cht=qr&chl=';
$qrUrl = 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=';
$qrUrl .= urlencode('otpauth://totp/sysPass:syspass/' . $login . '?secret=' . $iv . '&issuer=sysPass');

return $qrUrl;
Expand Down
255 changes: 161 additions & 94 deletions src/themes/material-blue/views/userpreferences/preferences-security.inc
Original file line number Diff line number Diff line change
Expand Up @@ -10,112 +10,179 @@ $chk2FAEnabled = $_getvar('chk2FAEnabled');
?>

<div id="title" class="titleNormal">
<i class="material-icons">vpn_key</i>
<?php echo _t('authenticator', 'Authentication'); ?>
<i class="material-icons">vpn_key</i>
<?php echo _t('authenticator', 'Authentication'); ?>
</div>

<form method="post" name="frmSecurity" id="frmSecurity" class="form-action"
data-onsubmit="twofa/save"
data-plugin="Authenticator"
data-action-route="<?php echo $_getvar('route'); ?>"
data-hash="">
<form
method="post"
name="frmSecurity"
id="frmSecurity"
class="form-action"
data-onsubmit="twofa/save"
data-plugin="Authenticator"
data-action-route="<?php echo $_getvar('route'); ?>"
data-hash=""
>
<table id="tblSite" class="data tblConfig round">
<tr>
<td class="descField">
<?php echo _t('authenticator', 'Two Factor Authentication'); ?>
<div
id="help-2fa"
class="
icon
material-icons
<?php
echo
$icons->getIconHelp()->getClass();
?>
"
>
<?php echo $icons->getIconHelp()->getIcon(); ?>
</div>
<div class="mdl-tooltip mdl-tooltip--large" for="help-2fa">
<p>
<?php echo _t('authenticator', 'Enables the two factor authentication that requires entering a token that is generated by an application like Google Authenticator.'); ?>
</p>

<table id="tblSite" class="data tblConfig round">
<tr>
<td class="descField">
<?php echo _t('authenticator', 'Two Factor Authentication'); ?>
<div id="help-2fa"
class="icon material-icons <?php echo $icons->getIconHelp()->getClass(); ?>"><?php echo $icons->getIconHelp()->getIcon(); ?></div>
<div class="mdl-tooltip mdl-tooltip--large" for="help-2fa">
<p>
<?php echo _t('authenticator', 'Enables the two factor authentication that requires entering a token that is generated by an application like Google Authenticator.'); ?>
</p>
<p>
<?php echo _t('authenticator', 'Please, scan the provided QR code and then enter the 6 digits key.'); ?>
</p>
</div>
</td>
<td class="valField">
<label
class="mdl-switch mdl-js-switch mdl-js-ripple-effect"
for="2faenabled"
>
<input type="checkbox" id="2faenabled" class="mdl-switch__input
mdl-color-text--indigo-400" name="2faenabled"
<?php echo $chk2FAEnabled ? 'checked' : ''; ?>/>
<span class="mdl-switch__label"
><?php echo _t('authenticator', 'Enable'); ?></span
>
</label>

<p>
<?php echo _t('authenticator', 'Please, scan the provided QR code and then enter the 6 digits key.'); ?>
</p>
</div>
</td>
<td class="valField">
<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect" for="2faenabled">
<input type="checkbox" id="2faenabled"
class="mdl-switch__input mdl-color-text--indigo-400"
name="2faenabled" <?php echo $chk2FAEnabled ? 'checked' : ''; ?>/>
<span class="mdl-switch__label"><?php echo _t('authenticator', 'Enable'); ?></span>
</label>

<div id="qr_code_wrapper">
<?php
<div id="qr_code_wrapper">
<?php
$qrCode = $_getvar('qrCode');

if (!$chk2FAEnabled && $qrCode): ?>
<div id="qr_code">
<img id="qrcode" src="data:image/svg+xml;base64,<?php echo $qrCode; ?>" alt="QR Code"/>
</div>
<?php elseif ($qrCode === false): ?>
<p class="ui-state-error"><?php echo _t('authenticator', 'Error while getting the QR code. Please, try it again'); ?></p>
<?php endif; ?>
<div id="qr_code">
<img id="qrcode" src="<?php echo $qrCode; ?>" alt="QR Code" />
</div>
<?php elseif ($qrCode === false): ?>
<p class="ui-state-error">
<?php echo _t('authenticator', 'Error while getting the QR code. Please, try it again'); ?>
</p>
<?php endif; ?>

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="pin" name="pin" type="text"
pattern="([0-9]{6}|[0-9a-f]{20})"
class="mdl-textfield__input mdl-color-text--indigo-400"
maxlength="20"
required/>
<label class="mdl-textfield__label"
for="security_pin"><?php echo _t('authenticator', 'Code'); ?></label>
</div>
<div
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
>
<input
id="pin"
name="pin"
type="text"
pattern="([0-9]{6}|[0-9a-f]{20})"
class="mdl-textfield__input mdl-color-text--indigo-400"
maxlength="20"
required
/>
<label class="mdl-textfield__label" for="security_pin"
><?php echo _t('authenticator', 'Code'); ?></label
>
</div>

<div id="2fa_warning">
<div class="icon material-icons <?php echo $icons->getIconWarning()->getClass(); ?>"><?php echo $icons->getIconWarning()->getIcon(); ?></div>
<?php echo _t('authenticator', 'Once enabled, you wil only be able to log in by using the code generator linked device.'); ?>
</div>
</div>
</td>
</tr>
<tr>
<td class="descField"><?php echo _t('authenticator', 'Expiry Days'); ?></td>
<td class="valField">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input id="expiredays" name="expiredays" type="number" step="1"
min="0" max="720" class="mdl-textfield__input mdl-color-text--indigo-400"
value="<?php echo $_getvar('expireDays') ?: 90; ?>" required/>
<label class="mdl-textfield__label"
for="expiredays"><?php echo _t('authenticator', 'Days'); ?></label>
</div>
</td>
</tr>
<div id="2fa_warning">
<div
class="
icon
material-icons
<?php
echo
$icons->getIconWarning()->getClass();
?>
"
>
<?php echo $icons->getIconWarning()->getIcon(); ?>
</div>
<?php echo _t('authenticator', 'Once enabled, you wil only be able to log in by using the code generator linked device.'); ?>
</div>
</div>
</td>
</tr>
<tr>
<td class="descField">
<?php echo _t('authenticator', 'Expiry Days'); ?>
</td>
<td class="valField">
<div
class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"
>
<input
id="expiredays"
name="expiredays"
type="number"
step="1"
min="0"
max="720"
class="mdl-textfield__input mdl-color-text--indigo-400"
value="<?php echo $_getvar('expireDays') ?: 90; ?>"
required
/>
<label class="mdl-textfield__label" for="expiredays"
><?php echo _t('authenticator', 'Days'); ?></label
>
</div>
</td>
</tr>

<?php if ($chk2FAEnabled): ?>
<tr>
<td class="descField">
<?php echo _t('authenticator', 'Recovery Codes'); ?>
<i class="btn-action material-icons"
title="<?php echo _t('authenticator', 'Display codes'); ?>"
data-onclick="twofa/viewRecoveryCodes"
data-plugin="Authenticator"
data-action-route="<?php echo $_getvar('viewCodesRoute'); ?>"
data-dst-id="#recovery-codes">remove_red_eye</i>
</td>
<td class="valField" id="recovery-codes" style="display: none;">
<div class="list-wrap"></div>
</td>
</tr>
<?php endif; ?>
</table>
<?php if ($chk2FAEnabled): ?>
<tr>
<td class="descField">
<?php echo _t('authenticator', 'Recovery Codes'); ?>
<i
class="btn-action material-icons"
title="<?php echo _t('authenticator', 'Display codes'); ?>"
data-onclick="twofa/viewRecoveryCodes"
data-plugin="Authenticator"
data-action-route="<?php echo $_getvar('viewCodesRoute'); ?>"
data-dst-id="#recovery-codes"
>remove_red_eye</i
>
</td>
<td class="valField" id="recovery-codes" style="display: none">
<div class="list-wrap"></div>
</td>
</tr>
<?php endif; ?>
</table>

<input type="hidden" name="isAjax" value="1"/>
<input type="hidden" name="sk" value="">
<input type="hidden" name="isAjax" value="1" />
<input type="hidden" name="sk" value="" />
</form>

<div class="tab-actions">
<ul>
<li>
<button form="frmSecurity"
class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-button--colored <?php echo $icons->getIconSave()->getClassButton(); ?>"
title="<?php echo $icons->getIconSave()->getTitle(); ?>">
<i class="material-icons"><?php echo $icons->getIconSave()->getIcon(); ?></i>
</button>
</li>
</ul>
<ul>
<li>
<button
form="frmSecurity"
class="
mdl-button mdl-js-button
mdl-button--fab mdl-button--mini-fab mdl-button--colored
<?php
echo
$icons->getIconSave()->getClassButton();
?>
"
title="<?php echo $icons->getIconSave()->getTitle(); ?>"
>
<i class="material-icons"
><?php echo $icons->getIconSave()->getIcon(); ?></i
>
</button>
</li>
</ul>
</div>