index.php

<?php
declare(strict_types=1);
require_once __DIR__ . '/helpers.php';

if (!empty($_SESSION['user'])) { header('Location: dashboard.php'); exit; }

$err = '';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $username = trim((string)($_POST['username'] ?? ''));
    $password = (string)($_POST['password'] ?? '');
    $action   = (string)($_POST['action'] ?? 'login');

    if ($action === 'register') {
        if (!ALLOW_REGISTRATION) $err = 'El registro está desactivado.';
        elseif ($username === '' || $password === '') $err = 'Completa usuario y contraseña.';
        elseif (strlen($username) < 3 || strlen($username) > 50) $err = 'El usuario debe tener entre 3 y 50 caracteres.';
        elseif (!preg_match('/^[a-zA-Z0-9_\-]+$/', $username)) $err = 'Solo letras, números, - y _.';
        elseif (strlen($password) < 6) $err = 'La contraseña debe tener al menos 6 caracteres.';
        else {
            $db = db(); $q = $db->prepare('SELECT id FROM usuarios WHERE username=?'); $q->execute([$username]);
            if ($q->fetch()) $err = 'Ese nombre de usuario ya existe.';
            else {
                $db->prepare('INSERT INTO usuarios(username,pass_hash) VALUES(?,?)')->execute([$username, password_hash($password, PASSWORD_DEFAULT)]);
                ensureUserDir($username);
                session_regenerate_id(true);
                $_SESSION['user'] = $username;
                header('Location: dashboard.php'); exit;
            }
        }
    } else {
        if ($username === '' || $password === '') $err = 'Completa usuario y contraseña.';
        else {
            $db = db(); $q = $db->prepare('SELECT pass_hash FROM usuarios WHERE username=?'); $q->execute([$username]);
            $row = $q->fetch();
            if ($row && password_verify($password, $row['pass_hash'])) {
                session_regenerate_id(true); $_SESSION['user'] = $username;
                header('Location: dashboard.php'); exit;
            } else $err = 'Credenciales incorrectas.';
        }
    }
}
?>
<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>NubeHome · Acceso</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #080c14;
      --surface: #0d1422;
      --surface2: #111827;
      --border: rgba(255,255,255,0.07);
      --accent: #4f8bff;
      --accent2: #7c5cfc;
      --text: #f0f4ff;
      --muted: #6b7a99;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { height: 100%; }
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'DM Sans', sans-serif;
      display: flex; align-items: center; justify-content: center;
      min-height: 100vh;
    }
    .bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
    .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.15; animation: drift 15s ease-in-out infinite alternate; }
    .orb1 { width: 550px; height: 550px; background: var(--accent); top: -180px; left: -120px; }
    .orb2 { width: 450px; height: 450px; background: var(--accent2); bottom: -120px; right: -100px; animation-duration: 18s; animation-delay: -7s; }
    .orb3 { width: 300px; height: 300px; background: #00d4aa; top: 45%; left: 55%; opacity: 0.07; animation-duration: 22s; animation-delay: -3s; }
    @keyframes drift { from { transform: translate(0,0) scale(1); } to { transform: translate(35px, 25px) scale(1.08); } }
    .bg-grid { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle, rgba(255,255,255,0.035) 1px, transparent 1px); background-size: 30px 30px; }

    .wrapper { position: relative; z-index: 1; width: min(440px, 94vw); animation: slideUp .55s cubic-bezier(.16,1,.3,1) both; }
    @keyframes slideUp { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }

    .logo-area { text-align: center; margin-bottom: 28px; }
    .logo-icon {
      width: 64px; height: 64px;
      background: linear-gradient(135deg, var(--accent) 0%, var(--accent2) 100%);
      border-radius: 20px;
      display: inline-flex; align-items: center; justify-content: center;
      font-size: 30px; margin-bottom: 14px;
      box-shadow: 0 8px 32px rgba(79,139,255,.4), 0 0 0 1px rgba(255,255,255,.1);
    }
    .logo-title { font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, #fff 30%, rgba(255,255,255,.45)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .logo-sub { color: var(--muted); font-size: .85rem; margin-top: 5px; }

    .card { background: rgba(13,20,34,.9); border: 1px solid var(--border); border-radius: 22px; padding: 30px 26px; backdrop-filter: blur(20px); box-shadow: 0 24px 64px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.07); }

    .tabs { display: flex; gap: 4px; background: rgba(8,12,20,.8); border-radius: 12px; padding: 4px; margin-bottom: 26px; }
    .tab { flex: 1; text-align: center; padding: 9px; border-radius: 9px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: .83rem; cursor: pointer; color: var(--muted); transition: all .22s; border: none; background: transparent; letter-spacing: .03em; }
    .tab.active { background: var(--surface2); color: var(--text); box-shadow: 0 2px 10px rgba(0,0,0,.4); }

    .form-panel { display: none; }
    .form-panel.active { display: block; animation: fadeIn .28s ease; }
    @keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

    .field { margin-bottom: 15px; }
    label { display: block; font-size: .75rem; font-weight: 500; color: var(--muted); margin-bottom: 7px; letter-spacing: .06em; text-transform: uppercase; }
    input[type=text], input[type=password] {
      width: 100%; padding: 12px 14px;
      background: rgba(8,12,20,.7); border: 1px solid var(--border);
      border-radius: 11px; color: var(--text);
      font-size: .97rem; font-family: 'DM Sans', sans-serif;
      transition: border-color .2s, box-shadow .2s; outline: none;
    }
    input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(79,139,255,.18); }
    input::placeholder { color: rgba(107,122,153,.6); }

    .btn-primary {
      width: 100%; padding: 13px; margin-top: 6px;
      background: linear-gradient(135deg, var(--accent), var(--accent2));
      color: #fff; border: none; border-radius: 11px;
      font-family: 'Syne', sans-serif; font-size: .97rem; font-weight: 700;
      cursor: pointer; transition: opacity .2s, transform .15s, box-shadow .2s;
      letter-spacing: .02em; box-shadow: 0 4px 20px rgba(79,139,255,.3);
    }
    .btn-primary:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 28px rgba(79,139,255,.45); }
    .btn-primary:active { transform: none; }

    .alert { padding: 11px 14px; border-radius: 10px; font-size: .88rem; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
    .alert-err { background: rgba(255,77,109,.1); border: 1px solid rgba(255,77,109,.2); color: #ff8fa3; }
  </style>
</head>
<body>
  <div class="bg-orbs"><div class="orb orb1"></div><div class="orb orb2"></div><div class="orb orb3"></div></div>
  <div class="bg-grid"></div>
  <div class="wrapper">
    <div class="logo-area">
      <div class="logo-icon">☁</div>
      <div class="logo-title">NubeHome</div>
      <div class="logo-sub">Tu espacio personal y privado</div>
    </div>
    <div class="card">
      <?php if ($err): ?><div class="alert alert-err">⚠ <?= htmlspecialchars($err) ?></div><?php endif; ?>
      <?php if (ALLOW_REGISTRATION): ?>
      <div class="tabs">
        <button class="tab active" id="tab-login" onclick="showTab('login',this)">Entrar</button>
        <button class="tab" id="tab-reg" onclick="showTab('reg',this)">Registrarse</button>
      </div>
      <?php endif; ?>
      <div id="login" class="form-panel active">
        <form method="post">
          <input type="hidden" name="action" value="login">
          <div class="field"><label>Usuario</label><input type="text" name="username" required autocomplete="username" placeholder="tu_usuario"></div>
          <div class="field"><label>Contraseña</label><input type="password" name="password" required autocomplete="current-password" placeholder="••••••••"></div>
          <button class="btn-primary" type="submit">Entrar →</button>
        </form>
      </div>
      <?php if (ALLOW_REGISTRATION): ?>
      <div id="reg" class="form-panel">
        <form method="post">
          <input type="hidden" name="action" value="register">
          <div class="field"><label>Nuevo usuario</label><input type="text" name="username" required autocomplete="off" placeholder="elige_un_nombre" pattern="[a-zA-Z0-9_\-]{3,50}"></div>
          <div class="field"><label>Contraseña (mín. 6 caracteres)</label><input type="password" name="password" required minlength="6" autocomplete="new-password" placeholder="••••••••"></div>
          <button class="btn-primary" type="submit">Crear cuenta →</button>
        </form>
      </div>
      <?php endif; ?>
    </div>
  </div>
  <script>
    function showTab(id, btn) {
      document.querySelectorAll('.form-panel').forEach(p => p.classList.remove('active'));
      document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
      document.getElementById(id).classList.add('active');
      btn.classList.add('active');
    }
    <?php if ($err && isset($_POST['action']) && $_POST['action'] === 'register'): ?>
    showTab('reg', document.getElementById('tab-reg'));
    <?php endif; ?>
  </script>
</body>
</html>