mockups/login.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>Sign in — 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">
      <a href="index.html" class="inline-flex" aria-label="Cloudzilla home"><svg width="36" height="36" viewBox="0 0 64 64" fill="currentColor" aria-hidden="true" focusable="false"><circle cx="22" cy="36" r="9"></circle><circle cx="32" cy="28" r="11"></circle><circle cx="44" cy="36" r="9"></circle><rect x="22" y="36" width="22" height="9" rx="4.5"></rect></svg></a>
      <p class="mt-4 font-mono text-[11px] text-muted-foreground uppercase tracking-wider">Cloudzilla</p>
      <h1 class="mt-1 text-xl font-semibold tracking-tight">Sign in to continue</h1>
      
    </div>
    <div id="notice" hidden class="mb-4 p-3 rounded-md border border-success/40 bg-success/10 text-success text-sm" role="status">Password changed. Sign in with your new password.</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="login-form" class="space-y-4">
      <div class="space-y-1.5"><label for="email" class="block text-sm font-medium">Email</label><input type="email" id="email" name="email" required 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" /></div>
      <div class="space-y-1.5">
        <div class="flex items-baseline justify-between gap-3">
          <label for="password" class="block text-sm font-medium">Password</label>
          <a href="forgot_password.html" class="text-[12px] text-muted-foreground hover:text-foreground hover:underline">Forgot password?</a>
        </div>
        <div class="relative"><input type="password" id="password" name="password" required class="h-9 w-full border border-border rounded-md pl-3 pr-10 text-foreground [&::-ms-reveal]:hidden bg-transparent text-sm shadow-xs focus:outline-solid focus:border-input" /><button type="button" aria-label="Show password" aria-pressed="false" onclick="var i=this.previousElementSibling,show=i.type==='password';i.type=show?'text':'password';this.setAttribute('aria-pressed',show);this.setAttribute('aria-label',show?'Hide password':'Show password');" class="group absolute inset-y-0 right-0 grid w-9 place-items-center rounded-r-md text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="group-aria-pressed:hidden"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="hidden group-aria-pressed:block"><path d="M17.94 17.94A10.07 10.07 0 0112 19c-6.4 0-10-7-10-7a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c6.4 0 10 7 10 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"></path><line x1="2" y1="2" x2="22" y2="22"></line></svg></button></div>
      </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">Sign in</button>
    </form>

    <div class="my-5 flex items-center gap-3 text-[12px] text-muted-foreground"><span class="flex-1 h-px border-t border-border"></span><span>or</span><span class="flex-1 h-px border-t border-border"></span></div>

    <a href="#" data-toast="Redirects to Google's consent screen, then back to /auth/google/callback." class="inline-flex items-center justify-center rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm w-full gap-3"><svg class="h-5 w-5" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"></path><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"></path><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"></path><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"></path></svg> Continue with Google</a>

    <div class="my-5 flex items-center gap-3 text-[12px] text-muted-foreground"><span class="flex-1 h-px border-t border-border"></span><span>SSO</span><span class="flex-1 h-px border-t border-border"></span></div>
    <div class="space-y-3">
      <a href="#" data-toast="Redirects to the identity provider's SAML login, then back to /auth/saml/acs." class="inline-flex items-center justify-center rounded-md font-medium transition-colors border border-input bg-transparent hover:bg-accent hover:text-accent-foreground h-9 px-4 text-sm w-full gap-3">Sign in with SAML SSO</a>
      <details class="border border-border rounded-md">
        <summary class="px-4 py-2 text-sm font-medium cursor-pointer hover:bg-muted transition-colors">
          Sign in with LDAP
        </summary>
        <div class="p-4 border-t border-border space-y-3">
          <form id="ldap-form" class="space-y-3">
            <div class="space-y-1.5"><label for="ldap-username" class="block text-xs font-medium">Username</label><input type="text" id="ldap-username" name="username" required 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" /></div>
            <div class="space-y-1.5"><label for="ldap-password" class="block text-xs font-medium">Password</label><div class="relative"><input type="password" id="ldap-password" name="password" required class="h-9 w-full border border-border rounded-md pl-3 pr-10 text-foreground [&::-ms-reveal]:hidden bg-transparent text-sm shadow-xs focus:outline-solid focus:border-input" /><button type="button" aria-label="Show password" aria-pressed="false" onclick="var i=this.previousElementSibling,show=i.type==='password';i.type=show?'text':'password';this.setAttribute('aria-pressed',show);this.setAttribute('aria-label',show?'Hide password':'Show password');" class="group absolute inset-y-0 right-0 grid w-9 place-items-center rounded-r-md text-muted-foreground hover:text-foreground focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="group-aria-pressed:hidden"><path d="M2 12s3.6-7 10-7 10 7 10 7-3.6 7-10 7S2 12 2 12z"></path><circle cx="12" cy="12" r="3"></circle></svg><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="hidden group-aria-pressed:block"><path d="M17.94 17.94A10.07 10.07 0 0112 19c-6.4 0-10-7-10-7a18.45 18.45 0 015.06-5.94M9.9 4.24A9.12 9.12 0 0112 4c6.4 0 10 7 10 7a18.5 18.5 0 01-2.16 3.19m-6.72-1.07a3 3 0 11-4.24-4.24"></path><line x1="2" y1="2" x2="22" y2="22"></line></svg></button></div></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-secondary text-secondary-foreground hover:bg-secondary/80 h-9 px-4 text-sm w-full">Sign in with LDAP</button>
          </form>
        </div>
      </details>
    </div>

    <p class="mt-5 text-center text-[12px] text-muted-foreground">
      No account?
      <a href="register.html" class="text-foreground hover:underline">Create one</a>
    </p>
  </div>
</main>

<div id="cz-footer"></div>
<script>
(function () {
  if (location.search.indexOf('reset=1') !== -1) document.getElementById('notice').hidden = false;
  document.querySelectorAll('[data-toast]').forEach(function (a) {
    a.addEventListener('click', function (e) { e.preventDefault(); window.czToast(a.dataset.toast); });
  });
  // The mock accepts any password; "2fa" as the email's local part (or LDAP username) stands in for a TOTP-enabled account.
  function go(who) { location.href = who === '2fa' ? 'totp_verify.html' : 'home.html'; }
  document.getElementById('login-form').addEventListener('submit', function (e) {
    e.preventDefault();
    go(document.getElementById('email').value.split('@')[0].toLowerCase());
  });
  document.getElementById('ldap-form').addEventListener('submit', function (e) {
    e.preventDefault();
    go(document.getElementById('ldap-username').value.toLowerCase());
  });
})();
</script>
<script src="shell.js"></script>
</body>
</html>