Skip to content

Add Material Dark Theme support #48

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.

Sign up for GitHub

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

Add Material Dark Theme support #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
79 changes: 79 additions & 0 deletions src/themes/material-dark/views/login/index.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<?php
/**
* @var \SP\Core\UI\ThemeIcons $icons
* @var \SP\Config\ConfigData $configData
* @var callable $_getvar
* @var \SP\Mvc\View\Template $this
*/
?>
<div id="actions" class="authenticator-2fa" align="center">
<div id="box-2fa" class="box-form">
<form id="frmLogin2fa" action="" method="post" class="form-action"
data-onsubmit="twofa/check"
data-plugin="Authenticator"
data-action-route="<?php echo $_getvar('route'); ?>"
data-hash="">
<fieldset id="resetdata">
<legend><?php echo _t('authenticator', 'Two Factor Authentication'); ?></legend>
<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"/>
<label class="mdl-textfield__label"
for="pin"><?php echo _t('authenticator', 'Enter code'); ?></label>
</div>

<?php if ($_getvar('isMailEnabled')): ?>
<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"
for="code_reset">
<input type="checkbox" name="code_reset" id="code_reset"
class="mdl-checkbox__input">
<span class="mdl-checkbox__label"><?php echo _t('authenticator', 'Forgot my code'); ?></span>

<div id="help-2fa"
class="icon material-icons <?php echo $icons->getIconHelp()->getClass(); ?>"><?php echo $icons->getIconHelp()->getIcon(); ?></div>
</label>


<div class="mdl-tooltip mdl-tooltip--large" for="help-2fa">
<p>
<?php echo _t('authenticator', 'This will send an email with a recovery code. You don\'t need to enter any code, only click on "Log In".'); ?>
</p>

<p>
<?php echo _t('authenticator', sprintf('If there aren\'t any recovery codes left, you will need to wait %dh for new codes', $_getvar('recoveryGraceTime'))); ?>
</p>
</div>
<?php endif; ?>

<?php if ($_getvar('from') && $_getvar('from_hash')): ?>
<input type="hidden" name="from"
value="<?php echo $_getvar('from'); ?>"/>
<input type="hidden" name="h"
value="<?php echo $_getvar('from_hash'); ?>"/>
<?php endif; ?>

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

<div class="buttons">
<button id="btnBack" type="button"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">
<i class="material-icons"
title="<?php echo _t('authenticator', 'Back to log in'); ?>">
<?php echo $icons->getIconBack()->getIcon(); ?></i>
<?php echo _t('authenticator', 'Back'); ?>
</button>

<button id="btnLogin"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary">
<?php echo _t('authenticator', 'Log in'); ?>
<i class="material-icons"
title="<?php echo _t('authenticator', 'Request'); ?>"><?php echo $icons->getIconPlay()->getIcon(); ?></i>
</button>
</div>
</form>
</div>
</div>
121 changes: 121 additions & 0 deletions src/themes/material-dark/views/userpreferences/preferences-security.inc
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
<?php
/**
* @var \SP\Core\UI\ThemeIcons $icons
* @var \SP\Config\ConfigData $configData
* @var callable $_getvar
* @var \SP\Mvc\View\Template $this
*/

$chk2FAEnabled = $_getvar('chk2FAEnabled');
?>

<div id="title" class="titleNormal">
<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="">

<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>

<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 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>

<?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="">
</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>
</div>