<?php

use Dolphy\Plugin\Helpers\User;

$user = User::current();
$avatar = get_avatar_url($user->ID, array('size' => 26));
?>
<div class="dolphy-page-security-2fa">
  <h1>Two-Factor Authentication</h1>

  <div class="dol-notice">
    <h3>CURRENT USER</h3>
    <hr>
    <p><img src="<?php echo $avatar; ?>"> <?php echo $user->display_name; ?> (you)</p>
  </div>

  <div class="dol-m-b-15">
    <div class="dol-desc">Two-Factor Authentication, or 2FA, significantly improves login security for your website. Dolphy 2FA works with a number of TOTP-based apps like Google Authenticator, FreeOTP, and Authy. For a full list of tested TOTP-based apps, click here.</div>
  </div>

  <div v-if="info.isEnabled">
    <div class="dol-text-center dol-m-b-20">
      <p class="enabled">
        <span class="dashicons dashicons-saved dol-text-color-success"></span> Two-Factor Authentication Enabled
      </p>

      <div class="dol-m-t-50 dol-text-color-error">
        <a href="javascript:;" @click="disable()" class="dol-text-color-error">
          <span>Disable 2FA</span>
        </a>
      </div>
    </div>
  </div>

  <div class="dol-row" v-if="!info.isEnabled">
    <div class="dol-col sm-6">
      <div class="dol-panel">
        <div class="dol-panel-header">
          <h2>1. Scan Code or Enter Key</h2>
        </div>

        <div class="dol-panel-body">
          <p class="dol-desc">Scan the code below with your authenticator app to add this account. Some authenticator apps also allow you to type in the text version instead.</p>

          <div class="dol-m-t-20 dol-text-center">
            <img :src="info.qrCode" alt="2FA" class="qrcode">
          </div>

          <div class="dol-m-t-20">
            <input type="text" :value="info.secret" readonly class="dol-form-control dol-text-center">
          </div>
        </div>
      </div>
    </div>

    <div class="dol-col sm-6">
      <div class="dol-panel">
        <div class="dol-panel-header">
          <h2>2. Enter Code from Authenticator App</h2>
        </div>

        <div class="dol-panel-body">
          <p class="desc">Download Recovery Codes (Optional)</p>
          <p class="desc">Use one of these 5 codes to log in if you lose access to your authenticator device. Codes are 16 characters long plus optional spaces. Each one may be used only once.</p>

          <div class="dol-text-center dol-m-t-20">
            <div class="backup dol-m-b-20">
              <div v-for="code in info.backup">{{ code }}</div>
            </div>

            <button class="dol-btn btn-warning" @click="download()">Download</button>
          </div>

          <div class="dol-m-t-20">
            <p class="dol-desc">Enter the code from your authenticator app below to verify and activate two-factor authentication for this account.</p>
          </div>

          <div class="block-center dol-m-t-20">
            <input type="text" v-model="form.code" placeholder="123456" class="dol-form-control dol-text-center">
          </div>
        </div>

        <div class="dol-panel-footer dol-text-right">
          <button class="dol-btn btn-primary" @click="submit(form)">ACTIVATE</button>
        </div>
      </div>
    </div>
  </div>
</div>
