@magpiecloud/mags 1.8.13 → 1.8.15

package/website/script.js

@@ -1,453 +0,0 @@
-/* ── Tab switching ──────────────────────────────────────── */
-
-document.addEventListener('click', (e) => {
-  const tab = e.target.closest('.tab[data-tab]');
-  if (!tab) return;
-
-  const group = tab.closest('.tab-group');
-  if (!group) return;
-
-  const tabName = tab.getAttribute('data-tab');
-
-  // Deactivate all tabs in this group
-  group.querySelectorAll('.tab-bar .tab').forEach((t) => t.classList.remove('active'));
-  tab.classList.add('active');
-
-  // Show matching content, hide others
-  group.querySelectorAll('.tab-content').forEach((panel) => {
-    panel.classList.toggle('active', panel.getAttribute('data-tab') === tabName);
-  });
-});
-
-/* ── Pattern card expand/collapse ──────────────────────── */
-
-document.addEventListener('click', (e) => {
-  const header = e.target.closest('.pattern-header');
-  if (!header) return;
-
-  const card = header.closest('.pattern-card');
-  if (!card) return;
-
-  card.classList.toggle('open');
-});
-
-/* ── Reveal observer ───────────────────────────────────── */
-
-const revealItems = Array.from(document.querySelectorAll('[data-reveal]'));
-
-if ('IntersectionObserver' in window) {
-  const observer = new IntersectionObserver(
-    (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          entry.target.classList.add('visible');
-          observer.unobserve(entry.target);
-        }
-      });
-    },
-    { threshold: 0.2 }
-  );
-
-  revealItems.forEach((item) => observer.observe(item));
-} else {
-  revealItems.forEach((item) => item.classList.add('visible'));
-}
-
-const apiBaseMeta = document.querySelector('meta[name="api-base"]');
-const authBaseMeta = document.querySelector('meta[name="auth-base"]');
-const envConfig = window.MAGS_ENV || {};
-const API_BASE = envConfig.API_BASE || apiBaseMeta?.content?.trim() || '';
-const AUTH_BASE = envConfig.AUTH_BASE || authBaseMeta?.content?.trim() || API_BASE || '';
-
-const withBase = (path, base) => {
-  if (!path) return '';
-  if (path.startsWith('http')) return path;
-  if (!base) return path;
-  return `${base}${path}`;
-};
-
-const ACCESS_TOKEN_KEY = 'microvm-access-token';
-const REFRESH_TOKEN_KEY = 'microvm-refresh-token';
-
-const tokenStore = {
-  getAccessToken() {
-    return localStorage.getItem(ACCESS_TOKEN_KEY);
-  },
-  getRefreshToken() {
-    return localStorage.getItem(REFRESH_TOKEN_KEY);
-  },
-  setTokens(tokens) {
-    if (!tokens?.accessToken || !tokens?.refreshToken) return;
-    localStorage.setItem(ACCESS_TOKEN_KEY, tokens.accessToken);
-    localStorage.setItem(REFRESH_TOKEN_KEY, tokens.refreshToken);
-  },
-  clear() {
-    localStorage.removeItem(ACCESS_TOKEN_KEY);
-    localStorage.removeItem(REFRESH_TOKEN_KEY);
-  },
-};
-
-/* ── Extract tokens from URL after OAuth callback redirect ── */
-(function () {
-  var params = new URLSearchParams(window.location.search);
-  var token = params.get('token');
-  var refresh = params.get('refresh');
-  if (token && refresh) {
-    tokenStore.setTokens({ accessToken: token, refreshToken: refresh });
-    params.delete('token');
-    params.delete('refresh');
-    var clean = window.location.pathname;
-    var remaining = params.toString();
-    if (remaining) clean += '?' + remaining;
-    window.history.replaceState({}, '', clean);
-  }
-})();
-
-/* ── Redirect to login for protected pages when not authed ── */
-(function () {
-  if (!document.querySelector('[data-auth-required]')) return;
-  if (tokenStore.getAccessToken()) return;
-  var next = window.location.pathname + window.location.search;
-  window.location.replace('login.html?next=' + encodeURIComponent(next));
-})();
-
-const refreshTokens = async () => {
-  const refreshToken = tokenStore.getRefreshToken();
-  if (!refreshToken) return null;
-
-  const response = await fetch('/api/v1/auth/refresh', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ refresh_token: refreshToken }),
-    credentials: 'include',
-  });
-
-  if (!response.ok) {
-    tokenStore.clear();
-    return null;
-  }
-
-  const data = await response.json();
-  tokenStore.setTokens({
-    accessToken: data.access_token,
-    refreshToken: data.refresh_token,
-  });
-
-  return data;
-};
-
-const apiRequest = async (path, options = {}) => {
-  const headers = new Headers(options.headers || {});
-  if (options.body && !headers.has('Content-Type')) {
-    headers.set('Content-Type', 'application/json');
-  }
-
-  const accessToken = tokenStore.getAccessToken();
-  if (accessToken) {
-    headers.set('Authorization', `Bearer ${accessToken}`);
-  }
-
-  const response = await fetch(withBase(path, API_BASE), {
-    ...options,
-    headers,
-    credentials: 'include',
-  });
-
-  if (response.status === 401 && tokenStore.getRefreshToken() && !options._retry) {
-    const refreshed = await refreshTokens();
-    if (refreshed) {
-      return apiRequest(path, { ...options, _retry: true });
-    }
-  }
-
-  return response;
-};
-
-const apiJson = async (path, options = {}) => {
-  const response = await apiRequest(path, options);
-  let data = null;
-  try {
-    data = await response.json();
-  } catch (error) {
-    data = null;
-  }
-
-  if (!response.ok) {
-    throw new Error(data?.error || 'Request failed');
-  }
-
-  return data;
-};
-
-const copyButtons = Array.from(document.querySelectorAll('.copy-button'));
-
-copyButtons.forEach((button) => {
-  button.addEventListener('click', async () => {
-    const text = button.getAttribute('data-copy') || '';
-    if (!text) return;
-
-    try {
-      await navigator.clipboard.writeText(text);
-      button.classList.add('copied');
-      const original = button.textContent || 'Copy';
-      button.textContent = 'Copied';
-      setTimeout(() => {
-        button.textContent = original;
-        button.classList.remove('copied');
-      }, 1400);
-    } catch (error) {
-      button.textContent = 'Failed';
-      setTimeout(() => {
-        button.textContent = 'Copy';
-      }, 1400);
-    }
-  });
-});
-
-const googleLogin = document.querySelector('[data-google-login]');
-if (googleLogin) {
-  googleLogin.addEventListener('click', () => {
-    var url = withBase('/auth/google', AUTH_BASE);
-    var next = new URLSearchParams(window.location.search).get('next');
-    if (next) url += (url.includes('?') ? '&' : '?') + 'next=' + encodeURIComponent(next);
-    window.location.href = url;
-  });
-}
-
-const authLinks = Array.from(document.querySelectorAll('[data-auth-link]'));
-authLinks.forEach((link) => {
-  const path = link.getAttribute('data-auth-link');
-  if (!path) return;
-  link.setAttribute('href', withBase(path, AUTH_BASE));
-});
-
-const loginForm = document.querySelector('[data-login-form]');
-if (loginForm) {
-  const message = loginForm.querySelector('[data-login-message]');
-  const submitButton = loginForm.querySelector('button[type="submit"]');
-
-  loginForm.addEventListener('submit', async (event) => {
-    event.preventDefault();
-    if (message) message.textContent = '';
-    if (submitButton) {
-      submitButton.disabled = true;
-      submitButton.textContent = 'Signing in...';
-    }
-
-    const formData = new FormData(loginForm);
-    const payload = {
-      email: formData.get('email'),
-      password: formData.get('password'),
-    };
-
-    try {
-      const data = await apiJson('/api/v1/auth/login', {
-        method: 'POST',
-        body: JSON.stringify(payload),
-      });
-      tokenStore.setTokens({
-        accessToken: data.access_token,
-        refreshToken: data.refresh_token,
-      });
-      if (message) {
-        message.textContent = 'Signed in. Redirecting...';
-      }
-      loginForm.reset();
-      var dest = new URLSearchParams(window.location.search).get('next') || 'usage.html';
-      setTimeout(() => {
-        window.location.href = dest;
-      }, 600);
-    } catch (error) {
-      if (message) {
-        const fallback = withBase('/auth/login', AUTH_BASE);
-        message.textContent = error.message?.includes('Failed to fetch')
-          ? `Login failed. Open ${fallback}`
-          : error.message || 'Login failed.';
-      }
-    } finally {
-      if (submitButton) {
-        submitButton.disabled = false;
-        submitButton.textContent = 'Sign in';
-      }
-    }
-  });
-}
-
-const authStatus = document.querySelector('[data-auth-status]');
-if (authStatus) {
-  apiJson('/api/v1/auth/me')
-    .then((user) => {
-      authStatus.textContent = `Signed in as ${user.email}.`;
-    })
-    .catch(() => {
-      authStatus.textContent = 'Sign in to view usage data.';
-    });
-}
-
-const usageStats = document.querySelectorAll('[data-stat]');
-const jobsBody = document.querySelector('[data-jobs-body]');
-const jobsEmpty = document.querySelector('[data-jobs-empty]');
-const authRequired = document.querySelector('[data-auth-required]');
-
-const formatNumber = (value, suffix = '') => {
-  if (value === null || value === undefined) return '—';
-  const num = Number(value);
-  if (Number.isNaN(num)) return '—';
-  return `${num.toFixed(2)}${suffix}`;
-};
-
-const formatDate = (value) => {
-  if (!value) return '—';
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) return '—';
-  return date.toLocaleString();
-};
-
-const renderJobs = (jobs) => {
-  if (!jobsBody || !jobsEmpty) return;
-  jobsBody.innerHTML = '';
-  if (!jobs?.length) {
-    jobsBody.appendChild(jobsEmpty);
-    return;
-  }
-
-  jobs.forEach((job) => {
-    const row = document.createElement('div');
-    row.className = 'table-row';
-
-    const name = job.name || job.request_id || 'Untitled';
-    const status = job.status || 'unknown';
-    const created = formatDate(job.created_at);
-    const durationMs = job.script_duration_ms || job.total_duration_ms || 0;
-    const duration = durationMs ? `${(durationMs / 1000).toFixed(1)}s` : '—';
-    const logsUrl = job.request_id
-      ? withBase(`/api/v1/mags-jobs/${job.request_id}/logs`, API_BASE)
-      : '#';
-
-    row.innerHTML = `
-      <span>${name}</span>
-      <span><span class="status ${status}">${status}</span></span>
-      <span>${created}</span>
-      <span>${duration}</span>
-      <span><a class="text-link" href="${logsUrl}" target="_blank" rel="noreferrer">Logs</a></span>
-    `;
-
-    jobsBody.appendChild(row);
-  });
-};
-
-const loadUsage = async () => {
-  if (!usageStats.length && !jobsBody) return;
-  try {
-    if (authRequired) authRequired.classList.add('hidden');
-
-    const usage = await apiJson('/api/v1/mags-jobs/usage');
-    usageStats.forEach((stat) => {
-      const key = stat.getAttribute('data-stat');
-      if (!key) return;
-      if (key === 'cpu_seconds') stat.textContent = formatNumber(usage.cpu_seconds, 's');
-      if (key === 'memory_gb_seconds') stat.textContent = formatNumber(usage.memory_gb_seconds, ' GB-s');
-      if (key === 'storage_gb_seconds') stat.textContent = formatNumber(usage.storage_gb_seconds, ' GB-s');
-    });
-
-    const jobs = await apiJson('/api/v1/mags-jobs?page=1&page_size=10');
-    renderJobs(jobs.jobs);
-  } catch (error) {
-    if (authRequired) authRequired.classList.remove('hidden');
-  }
-};
-
-const tokenTable = document.querySelector('[data-token-body]');
-const tokenEmpty = document.querySelector('[data-token-empty]');
-const tokenForm = document.querySelector('[data-token-form]');
-const tokenMessage = document.querySelector('[data-token-message]');
-const tokenResult = document.querySelector('[data-token-result]');
-const tokenValue = document.querySelector('[data-token-value]');
-
-const renderTokens = (tokens) => {
-  if (!tokenTable || !tokenEmpty) return;
-  tokenTable.innerHTML = '';
-  if (!tokens?.length) {
-    tokenTable.appendChild(tokenEmpty);
-    return;
-  }
-
-  tokens.forEach((token) => {
-    const row = document.createElement('div');
-    row.className = 'table-row';
-    const created = formatDate(token.created_at);
-    const expires = token.expires_at ? formatDate(token.expires_at) : 'Never';
-    const status = token.active ? 'active' : 'revoked';
-    row.innerHTML = `
-      <span>${token.name}</span>
-      <span>${created}</span>
-      <span>${expires}</span>
-      <span><span class="status ${token.active ? 'running' : 'error'}">${status}</span></span>
-      <span><button class="revoke-button" data-revoke-token="${token.id}" type="button">Revoke</button></span>
-    `;
-    tokenTable.appendChild(row);
-  });
-};
-
-const loadTokens = async () => {
-  if (!tokenTable) return;
-  try {
-    if (authRequired) authRequired.classList.add('hidden');
-    const data = await apiJson('/api/v1/tokens');
-    renderTokens(data.tokens);
-  } catch (error) {
-    if (authRequired) authRequired.classList.remove('hidden');
-  }
-};
-
-if (tokenForm) {
-  tokenForm.addEventListener('submit', async (event) => {
-    event.preventDefault();
-    if (tokenMessage) tokenMessage.textContent = '';
-    const formData = new FormData(tokenForm);
-    const payload = {
-      name: formData.get('name'),
-    };
-    const expires = formData.get('expires_in');
-    if (expires) payload.expires_in = Number(expires);
-
-    try {
-      const data = await apiJson('/api/v1/tokens', {
-        method: 'POST',
-        body: JSON.stringify(payload),
-      });
-      if (tokenValue) {
-        tokenValue.textContent = data.token;
-      }
-      if (tokenResult) {
-        tokenResult.classList.remove('hidden');
-      }
-      const copyButton = tokenResult?.querySelector('.copy-button');
-      if (copyButton) {
-        copyButton.setAttribute('data-copy', data.token);
-      }
-      if (tokenMessage) tokenMessage.textContent = 'Token created.';
-      tokenForm.reset();
-      loadTokens();
-    } catch (error) {
-      if (tokenMessage) tokenMessage.textContent = error.message || 'Failed to create token.';
-    }
-  });
-}
-
-document.addEventListener('click', async (event) => {
-  const revokeButton = event.target.closest('[data-revoke-token]');
-  if (!revokeButton) return;
-  const tokenId = revokeButton.getAttribute('data-revoke-token');
-  if (!tokenId) return;
-  if (!confirm('Revoke this token?')) return;
-  try {
-    await apiJson(`/api/v1/tokens/${tokenId}`, { method: 'DELETE' });
-    loadTokens();
-  } catch (error) {
-    if (tokenMessage) tokenMessage.textContent = error.message || 'Failed to revoke token.';
-  }
-});
-
-loadUsage();
-loadTokens();