# Account Settings

<div id="settings">
<p style="color:var(--color-text-secondary)">Loading settings...</p>
</div>

<script>
(function() {
  function init() {
  var auth = window.__sitemdAuth;
  if (!auth) return;

  var container = document.getElementById('settings');

  function esc(s) {
    var d = document.createElement('div');
    d.textContent = s || '';
    return d.innerHTML;
  }

  function getApiUrl() {
    return auth._apiUrl || 'https://api.sitemd.cc';
  }

  function render(account) {
    var html = '';

    // Status banners from query params
    var params = new URLSearchParams(location.search);
    if (params.get('email-changed') === '1') {
      html += '<div class="auth-success is-visible" style="margin-bottom:var(--space-md)">Your email address has been updated.</div>';
      history.replaceState(null, '', location.pathname);
    }
    if (params.get('email-step') === 'verify-new') {
      html += '<div class="auth-success is-visible" style="margin-bottom:var(--space-md)">Check your new email for a verification link.</div>';
      history.replaceState(null, '', location.pathname);
    }
    if (params.get('email-error') === 'expired') {
      html += '<div class="auth-error is-visible" style="margin-bottom:var(--space-md)">That link has expired. Please try again.</div>';
      history.replaceState(null, '', location.pathname);
    }
    if (params.get('email-error') === 'taken') {
      html += '<div class="auth-error is-visible" style="margin-bottom:var(--space-md)">That email address is already in use.</div>';
      history.replaceState(null, '', location.pathname);
    }

    // Email section
    html += '<div class="auth-section">';
    html += '<h1>Account Settings</h1>';
    html += '<h2>Email</h2>';
    html += '<p style="margin-bottom:var(--space-sm)">' + esc(account.email) + '</p>';
    html += '<div class="auth-error" id="email-error"></div>';
    html += '<div class="auth-success" id="email-success"></div>';
    html += '<div id="email-change-form" style="display:none;margin-top:var(--space-sm)">';
    html += '<div class="auth-inline-form">';
    html += '<input type="email" placeholder="New email address" id="new-email-input">';
    html += '<button class="auth-btn auth-btn--accent" id="email-change-submit" disabled>Send Verification</button>';
    html += '</div>';
    html += '</div>';
    html += '<button class="auth-btn" id="email-change-btn" style="margin-top:var(--space-xs)">Change Email</button>';
    html += '</div>';

    // Back link
    html += '<p><a href="/account">&larr; Back to Account</a></p>';

    container.innerHTML = html;
    bindEvents();
  }

  function bindEvents() {
    // Change email toggle
    var changeBtn = document.getElementById('email-change-btn');
    var changeForm = document.getElementById('email-change-form');
    var emailInput = document.getElementById('new-email-input');
    var submitBtn = document.getElementById('email-change-submit');

    changeBtn.addEventListener('click', function() {
      changeForm.style.display = changeForm.style.display === 'none' ? '' : 'none';
      if (changeForm.style.display !== 'none') emailInput.focus();
    });

    emailInput.addEventListener('input', function() {
      submitBtn.disabled = !this.value.trim();
    });

    submitBtn.addEventListener('click', function() {
      var newEmail = emailInput.value.trim();
      if (!newEmail) return;
      submitBtn.disabled = true;
      submitBtn.textContent = 'Sending\u2026';
      var err = document.getElementById('email-error');
      var success = document.getElementById('email-success');
      err.classList.remove('is-visible');
      success.classList.remove('is-visible');

      fetch(getApiUrl() + '/account/change-email', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': 'Bearer ' + auth.getToken(),
        },
        body: JSON.stringify({ newEmail: newEmail }),
      }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.error) throw new Error(data.error);
        success.textContent = 'Check your current email for a confirmation link.';
        success.classList.add('is-visible');
        changeForm.style.display = 'none';
        emailInput.value = '';
        submitBtn.disabled = true;
        submitBtn.textContent = 'Send Verification';
      }).catch(function(e) {
        err.textContent = e.message || 'Could not start email change';
        err.classList.add('is-visible');
        submitBtn.disabled = false;
        submitBtn.textContent = 'Send Verification';
      });
    });

  }

  // Load data
  auth.getAccount().then(function(account) {
    render(account);
  }).catch(function(e) {
    container.innerHTML = '<p style="color:#dc2626">Failed to load settings. <a href="/login">Try logging in again</a>.</p>';
  });
  }
  if (window.__sitemdAuth) { window.__sitemdAuth.ready.then(init); }
  else { document.addEventListener('sitemd:auth-ready', init); }
})();
</script>