# Log In

<div class="auth-form">

<h1>Log in to your account</h1>

<!-- Magic link mode -->
<div id="login-magic" style="display:none">

<div id="login-sent" style="display:none">
<p style="color:var(--color-text-secondary)">Check your email — if an account exists for <strong id="login-sent-email"></strong>, you'll receive a login link.</p>
<p style="color:var(--color-text-secondary)">If you haven't <a href="/upgrade">purchased sitemd Starter</a>, you probably don't have an account yet.</p>
</div>

<div id="login-magic-form">
<div class="auth-error" id="login-magic-error"></div>
<label for="login-magic-email">Email</label>
<input type="email" id="login-magic-email" autocomplete="email" required>
<button class="auth-submit" id="login-magic-btn" type="button" disabled>Send Login Link</button>
<p class="auth-link"></p>
</div>

</div>

<!-- Password mode -->
<div id="login-password" style="display:none">

<div class="auth-error" id="login-error"></div>

<label for="login-email">Email</label>
<input type="email" id="login-email" autocomplete="email" required>

<label for="login-pass">Password</label>
<input type="password" id="login-pass" autocomplete="current-password" required>

<button class="auth-submit" id="login-btn" type="button">Log In</button>

<p class="auth-link"><a href="/upgrade">Get sitemd</a></p>
<p class="auth-link"><a href="/forgot-password">Forgot password?</a></p>

</div>

</div>

<script>
(function() {
  function init() {
    var auth = window.__sitemdAuth;
    var cfg = window.__sitemdAuthCfg || {};

    if (auth.isLoggedIn()) {
      location.href = cfg.afterLogin || '/account';
      return;
    }

    var isMagicLink = cfg.loginMode === 'magic-link';
    document.getElementById(isMagicLink ? 'login-magic' : 'login-password').style.display = '';

    // CLI approve flow — fires after magic link logs user in via onAuthChange
    var cliMatch = location.search.match(/[?&]cli=([^&]+)/);
    var cliCode = cliMatch ? cliMatch[1] : null;
    if (cliCode) {
      var unsubscribe = auth.onAuthChange(function(user) {
        if (!user) return;
        unsubscribe();
        var token = auth.getToken();
        fetch((cfg.apiUrl || '') + '/auth/cli/approve', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token },
          body: JSON.stringify({ code: cliCode, sessionToken: token }),
        }).then(function() {
          var sent = document.getElementById('login-sent') || document.getElementById('login-magic-form');
          if (sent) sent.innerHTML = '<p>CLI authorized! You can close this tab.</p>';
        }).catch(function() {});
      });
    }

    if (isMagicLink) {
      var magicBtn = document.getElementById('login-magic-btn');
      var magicErr = document.getElementById('login-magic-error');
      var magicEmail = document.getElementById('login-magic-email');

      function validateMagicEmail() {
        var v = magicEmail.value.trim();
        magicBtn.disabled = !v || v.indexOf('@') === -1;
      }
      magicEmail.addEventListener('input', validateMagicEmail);

      magicBtn.addEventListener('click', function() {
        var email = magicEmail.value.trim();
        if (!email) return;
        magicErr.classList.remove('is-visible');
        magicBtn.disabled = true;
        magicBtn.textContent = 'Sending\u2026';
        auth.requestMagicLink(email).then(function() {
          document.getElementById('login-magic-form').style.display = 'none';
          document.getElementById('login-sent-email').textContent = email;
          document.getElementById('login-sent').style.display = '';
        }).catch(function(e) {
          magicErr.textContent = e.message || 'Could not send login link';
          magicErr.classList.add('is-visible');
          magicBtn.disabled = false;
          magicBtn.textContent = 'Send Login Link';
        });
      });
      magicEmail.addEventListener('keydown', function(e) { if (e.key === 'Enter') magicBtn.click(); });

    } else {
      var btn = document.getElementById('login-btn');
      var err = document.getElementById('login-error');
      var emailInput = document.getElementById('login-email');
      var passInput = document.getElementById('login-pass');

      function submit() {
        var email = emailInput.value.trim();
        var password = passInput.value;
        if (!email || !password) return;
        err.classList.remove('is-visible');
        btn.disabled = true;
        btn.textContent = 'Logging in\u2026';
        auth.login(email, password).then(function() {
          var redirect = sessionStorage.getItem('sitemd-auth-redirect') || cfg.afterLogin || '/account';
          sessionStorage.removeItem('sitemd-auth-redirect');
          location.href = redirect;
        }).catch(function(e) {
          err.textContent = e.message || 'Invalid email or password';
          err.classList.add('is-visible');
          btn.disabled = false;
          btn.textContent = 'Log In';
        });
      }
      btn.addEventListener('click', submit);
      passInput.addEventListener('keydown', function(e) { if (e.key === 'Enter') submit(); });
    }
  }

  if (window.__sitemdAuth) { window.__sitemdAuth.ready.then(init); }
  else { document.addEventListener('sitemd:auth-ready', init); }
})();
</script>