mockups/totp_verify.html

Rama main · réplica de lectura del repositorio original.

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Two-factor authentication — Cloudzilla</title>
<link rel="stylesheet" href="/assets/tailwind.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500&family=Geist:wght@400;500;600&display=swap" rel="stylesheet" />
</head>
<body class="min-h-screen flex flex-col antialiased font-sans">
<a href="#main-content" class="skip-link">Skip to main content</a>

<div id="cz-header" data-anon></div>

<main id="main-content" tabindex="-1" class="max-w-[1400px] mx-auto px-6 pt-6 pb-20 flex-1 w-full">
  <div class="max-w-md mx-auto mt-12 rounded-md border border-border bg-card p-6">
    <div class="text-center mb-6">
      <span class="inline-grid place-items-center w-12 h-12 rounded-full border border-border bg-success/10"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" class="text-success" aria-hidden="true" focusable="false"><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg></span>
      <p class="mt-4 font-mono text-[11px] text-muted-foreground uppercase tracking-wider">Verify identity</p>
      <h1 class="mt-1 text-xl font-semibold tracking-tight">Two-factor authentication</h1>
      <p class="mt-2 text-[13px] text-muted-foreground">Enter the 6-digit code from your authenticator app.</p>
    </div>

    <div id="error" hidden class="mb-4 p-3 rounded-md border border-destructive/40 bg-destructive/10 text-destructive text-sm" role="alert"></div>

    <form id="code-form" class="space-y-4">
      <div class="space-y-1.5"><label for="code" class="block text-sm font-medium">Authentication code</label><input type="text" id="code" name="code" placeholder="000000" maxlength="6" inputmode="numeric" autocomplete="one-time-code" autofocus class="flex w-full rounded-md border border-input bg-transparent px-3 py-1 shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-mono text-center text-2xl tracking-[0.4em] h-12" /></div>
      <button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none bg-primary text-primary-foreground hover:bg-primary/90 h-9 px-4 text-sm w-full">Verify</button>
    </form>

    <details class="mt-5 border-t border-border pt-4 text-sm">
      <summary class="cursor-pointer text-muted-foreground hover:text-foreground font-medium">Use a backup code instead</summary>
      <form id="backup-form" class="mt-3 space-y-3">
        <div class="space-y-1.5">
          <label for="backup_code" class="block text-sm font-medium text-foreground">Backup code</label>
          <input type="text" id="backup_code" name="backup_code" placeholder="xxxxxxxx" class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 font-mono text-center" />
        </div>
        <button type="submit" class="inline-flex items-center justify-center gap-1.5 rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm w-full">Use backup code</button>
      </form>
    </details>

    <p class="mt-5 text-center text-[12px]">
      <a href="login.html" class="text-muted-foreground hover:text-foreground hover:underline">← Back to sign in</a>
    </p>
  </div>
</main>

<div id="cz-footer"></div>
<script>
(function () {
  function showErr(id, msg) { var e = document.getElementById(id); e.textContent = msg; e.hidden = false; }
  // Any 6-digit code passes except 000000, which shows the real invalid-code error.
  document.getElementById('code-form').addEventListener('submit', function (e) {
    e.preventDefault();
    var v = document.getElementById('code').value;
    if (!/^\d{6}$/.test(v) || v === '000000') { showErr('error', 'Invalid code. Please try again.'); return; }
    location.href = 'home.html';
  });
  document.getElementById('backup-form').addEventListener('submit', function (e) {
    e.preventDefault();
    if (!document.getElementById('backup_code').value.trim()) { showErr('error', 'Invalid code. Please try again.'); return; }
    location.href = 'home.html';
  });
})();
</script>
<script src="shell.js"></script>
</body>
</html>