From da3b14b7d1f82f30f28d328dfcdbfd9bd239e108 Mon Sep 17 00:00:00 2001
From: Eduardo Mozart de Oliveira
 <2974895+eduardomozart@users.noreply.github.com>
Date: Mon, 6 Mar 2023 08:49:33 -0300
Subject: [PATCH] Add Material Dark Theme support

---
 .../material-dark/views/login/index.inc       |  79 ++++++++++++
 .../userpreferences/preferences-security.inc  | 121 ++++++++++++++++++
 2 files changed, 200 insertions(+)
 create mode 100644 src/themes/material-dark/views/login/index.inc
 create mode 100644 src/themes/material-dark/views/userpreferences/preferences-security.inc

diff --git a/src/themes/material-dark/views/login/index.inc b/src/themes/material-dark/views/login/index.inc
new file mode 100644
index 0000000..2828ad9
--- /dev/null
+++ b/src/themes/material-dark/views/login/index.inc
@@ -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>
diff --git a/src/themes/material-dark/views/userpreferences/preferences-security.inc b/src/themes/material-dark/views/userpreferences/preferences-security.inc
new file mode 100644
index 0000000..830e0f8
--- /dev/null
+++ b/src/themes/material-dark/views/userpreferences/preferences-security.inc
@@ -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>