src/dynamic/enablesecondfactor.php

<?php
/*
 * hores
 * Copyright (c) 2023 Adrià Vilanova Martínez
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public
 * License along with this program.
 * If not, see http://www.gnu.org/licenses/.
 */

require_once(__DIR__."/../core.php");
security::checkType(security::WORKER, security::METHOD_NOTFOUND);
security::checkWorkerUIEnabled();
secondFactor::checkAvailability();

if (secondFactor::isEnabled()) {
  security::notFound();
}

$secret = secondFactor::generateSecret();
$url = "otpauth://totp/".str_replace("+", "%20", urlencode($conf["appName"])).":".urlencode(people::userData('username'))."?secret=".urlencode($secret)."&issuer=".str_replace("+", "%20", urlencode($conf["appName"]));
?>

<style>
#dynDialog {
  max-width: 500px;
  width: auto;
}

.step {
  padding: 10px 0;
  border-bottom: 1px solid #ebebeb;
}

.step .number {
  display: inline-block;
  vertical-align: middle;
  font-family: "Arial", sans-serif;
  font-size: 36px;
  font-weight: bold;
  color: green;
  margin: 0;
  margin-right: 15px;
  padding: 0;
  line-height: normal;
}

.step .text {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  width: Calc(100% - 40px);
}

.step .icon_container {
  float: right;
  height: 24px;
  padding-top: 9px;
  padding-right: 9px;
}

#qrcode {
  margin: 8px 0;
}

#qrcode img, #qrcode canvas {
  margin: auto;
}
</style>

<dynscript>
new QRCode(document.getElementById("qrcode"), {
  text: "<?=security::htmlsafe($url)?>",
  width: 200,
	height: 200
});
</dynscript>

<form action="doenablesecondfactor.php" method="POST" autocomplete="off">
  <input type="hidden" name="secret" value="<?=security::htmlsafe($secret)?>">
  <h4 class="mdl-dialog__title">Activa la verificación en dos pasos</h4>
  <div class="mdl-dialog__content">
    <p>Para activar la verificación en dos pasos, sigue los siguientes pasos:</p>

    <div class="step">
      <div class="number">1</div>
      <div class="text"><b>Instala la aplicación Google Authenticator en tu <a href="http://appstore.com/googleauthenticator" target="_blank" rel="noopener noreferrer">iPhone</a> o <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2" target="_blank" rel="noopener noreferrer">Android</a>.</b><br>También puedes usar otra aplicación si lo prefieres.</div>
    </div>
    <div class="step">
      <div class="number">2</div><div class="text"><b>Configura tu cuenta en la app Google Authenticator escaneando el siguiente código QR:</b></div>
    </div>

    <div id="qrcode"></div>

    <div class="step" style="border-top: 1px solid #ebebeb;">
        <div class="number">3</div><div class="text"><b>¿No puedes escanear el código QR? Introduce manualmente la siguiente clave secreta:</b><br><?=security::htmlsafe(secondFactorView::renderSecret($secret))?></div>
    </div>
    <div class="step" style="margin-bottom: 5px;">
        <div class="number">4</div><div class="text"><b>Introduce el código de verificación de 6 dígitos:</b></div>
    </div>
    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
      <input class="mdl-textfield__input" type="text" name="code" id="code" autocomplete="off" pattern="[0-9]{6}" data-required>
      <label class="mdl-textfield__label" for="code">Código de verificación</label>
    </div>
  </div>
  <div class="mdl-dialog__actions">
    <button type="submit" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--primary">Activar</button>
    <button data-dyndialog-close class="mdl-button mdl-js-button mdl-js-ripple-effect cancel">Cancelar</button>
  </div>
</form>