jongryangje/app/Views/auth/totp_setup.php

<?= $this->extend('auth/_shell') ?>

<?= $this->section('heading') ?>2차 인증 앱 등록<?= $this->endSection() ?>

<?= $this->section('content') ?>
<p class="text-sm text-gray-600 mb-4">관리자 계정 <strong class="text-gray-800"><?= esc($memberId) ?></strong> 에 Google Authenticator, Microsoft Authenticator 등으로 아래 시크릿 또는 QR을 등록한 뒤, 표시되는 6자리 코드를 입력해 주세요.</p>
<?php if (! empty($qrDataUri)): ?>
<div class="flex justify-center mb-4">
  <img src="<?= esc($qrDataUri, 'attr') ?>" alt="TOTP QR 코드" class="border border-gray-200 rounded-lg max-w-[200px] h-auto"/>
</div>
<?php else: ?>
<p class="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded p-2 mb-4">QR 이미지를 불러올 수 없습니다. 아래 시크릿을 앱에 직접 입력해 주세요.</p>
<?php endif; ?>
<div class="mb-4">
  <span class="block text-xs font-semibold text-gray-500 mb-1">수동 입력용 시크릿</span>
  <code class="block text-sm bg-gray-100 border border-gray-200 rounded-lg px-3 py-2 break-all select-all"><?= esc($secret) ?></code>
</div>
<form action="<?= base_url('login/totp-setup') ?>" method="POST" class="space-y-4 pt-2 border-t border-gray-200">
  <?= csrf_field() ?>
  <div>
    <label class="block text-sm font-bold text-gray-700 mb-1" for="totp_code">확인용 인증 코드</label>
    <input class="block w-full border border-gray-300 rounded-lg px-3 py-2 text-sm tracking-widest focus:ring-2 focus:ring-[#007bff]/40 focus:border-[#007bff]" id="totp_code" name="totp_code" type="text" inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code" autofocus placeholder="000000" value="<?= esc(old('totp_code')) ?>"/>
  </div>
  <div class="flex gap-2">
    <button type="submit" class="bg-btn-search text-white px-4 py-2 rounded-lg text-sm font-semibold shadow hover:brightness-110 transition border border-transparent">등록 완료</button>
    <a href="<?= base_url('login') ?>" class="bg-white text-gray-700 border border-gray-300 px-4 py-2 rounded-lg text-sm shadow-sm hover:bg-gray-50 transition">취소</a>
  </div>
</form>
<?= $this->endSection() ?>