@jxsuite/studio 0.19.0 → 0.21.0

package/src/github/github-auth.js

@@ -0,0 +1,122 @@
+/**
+ * GitHub OAuth Device Flow authentication for Jx Studio.
+ *
+ * Uses the Device Flow so the user authenticates in their browser without needing a server-side
+ * redirect endpoint.
+ */
+
+import { html } from "lit-html";
+import { showDialog } from "../ui/layers.js";
+
+const CLIENT_ID = "Ov23liYVlMFpgjOEPXJH";
+const STORAGE_KEY = "jx_github_token";
+
+export function getGithubToken() {
+  return localStorage.getItem(STORAGE_KEY);
+}
+
+export function clearGithubToken() {
+  localStorage.removeItem(STORAGE_KEY);
+}
+
+/**
+ * Authenticate with GitHub via the Device Flow. Shows a dialog with the user code and polls until
+ * the user completes authorization or cancels.
+ *
+ * @returns {Promise<string | null>} The access token, or null if cancelled.
+ */
+export async function authenticateGithub() {
+  const existing = getGithubToken();
+  if (existing) return existing;
+
+  const codeRes = await fetch("https://github.com/login/device/code", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+    body: JSON.stringify({ client_id: CLIENT_ID, scope: "repo" }),
+  });
+
+  if (!codeRes.ok) throw new Error("Failed to initiate GitHub device flow");
+  const codeData = await codeRes.json();
+
+  const { device_code, user_code, verification_uri, interval = 5 } = codeData;
+
+  return showDialog((done) => {
+    let cancelled = false;
+    /** @type {ReturnType<typeof setTimeout> | null} */
+    let pollTimer = null;
+
+    const poll = async () => {
+      if (cancelled) return;
+      try {
+        const tokenRes = await fetch("https://github.com/login/oauth/access_token", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            Accept: "application/json",
+          },
+          body: JSON.stringify({
+            client_id: CLIENT_ID,
+            device_code,
+            grant_type: "urn:ietf:params:oauth:grant-type:device_code",
+          }),
+        });
+        const tokenData = await tokenRes.json();
+
+        if (tokenData.access_token) {
+          localStorage.setItem(STORAGE_KEY, tokenData.access_token);
+          done(tokenData.access_token);
+          return;
+        }
+
+        if (tokenData.error === "authorization_pending") {
+          pollTimer = setTimeout(poll, interval * 1000);
+          return;
+        }
+
+        if (tokenData.error === "slow_down") {
+          pollTimer = setTimeout(poll, (interval + 5) * 1000);
+          return;
+        }
+
+        // expired_token or access_denied
+        done(null);
+      } catch {
+        pollTimer = setTimeout(poll, interval * 1000);
+      }
+    };
+
+    pollTimer = setTimeout(poll, interval * 1000);
+
+    return html`
+      <sp-dialog-wrapper
+        open
+        headline="Sign in to GitHub"
+        cancel-label="Cancel"
+        @cancel=${() => {
+          cancelled = true;
+          if (pollTimer) clearTimeout(pollTimer);
+          done(null);
+        }}
+        @close=${() => {
+          cancelled = true;
+          if (pollTimer) clearTimeout(pollTimer);
+          done(null);
+        }}
+      >
+        <div class="github-auth-dialog">
+          <p>Enter this code on GitHub to authorize Jx Studio:</p>
+          <div class="github-auth-code">${user_code}</div>
+          <p>
+            <a href="${verification_uri}" target="_blank" rel="noopener"
+              >Open ${verification_uri}</a
+            >
+          </p>
+          <p class="github-auth-waiting">Waiting for authorization…</p>
+        </div>
+      </sp-dialog-wrapper>
+    `;
+  });
+}

package/src/github/github-publish.js

@@ -0,0 +1,126 @@
+/** Publish a local project to GitHub — creates a new repo and pushes. */
+
+import { html } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
+import { showDialog } from "../ui/layers.js";
+import { authenticateGithub } from "./github-auth.js";
+import { getPlatform } from "../platform.js";
+import { refreshGitStatus } from "../panels/git-panel.js";
+import { statusMessage } from "../panels/statusbar.js";
+
+/**
+ * Full "Publish to GitHub" flow: 1. Authenticate (or reuse stored token) 2. Prompt for repo name /
+ * visibility 3. Create the repo via GitHub API 4. Add remote + push
+ *
+ * @param {{ projectName: string }} opts
+ * @returns {Promise<boolean>} True if published successfully
+ */
+export async function publishToGithub({ projectName }) {
+  const token = await authenticateGithub();
+  if (!token) return false;
+
+  const repoOpts = await showDialog((done) => {
+    /** @type {HTMLInputElement | null} */
+    let _nameInput = null;
+    /** @type {HTMLInputElement | null} */
+    let _descInput = null;
+    /** @type {HTMLInputElement | null} */
+    let _privateToggle = null;
+
+    return html`
+      <sp-dialog-wrapper
+        open
+        headline="Publish to GitHub"
+        confirm-label="Create Repository"
+        cancel-label="Cancel"
+        @confirm=${() => {
+          done({
+            name: _nameInput?.value || projectName,
+            description: _descInput?.value || "",
+            isPrivate: _privateToggle?.checked ?? true,
+          });
+        }}
+        @cancel=${() => done(null)}
+        @close=${() => done(null)}
+      >
+        <div class="github-publish-dialog">
+          <sp-field-label for="repo-name">Repository name</sp-field-label>
+          <sp-textfield
+            id="repo-name"
+            name="repo-name"
+            value="${projectName}"
+            placeholder="my-project"
+            ${ref((el) => {
+              _nameInput = /** @type {HTMLInputElement | null} */ (el || null);
+            })}
+          ></sp-textfield>
+
+          <sp-field-label for="repo-desc">Description (optional)</sp-field-label>
+          <sp-textfield
+            id="repo-desc"
+            name="repo-desc"
+            placeholder="A brief description"
+            ${ref((el) => {
+              _descInput = /** @type {HTMLInputElement | null} */ (el || null);
+            })}
+          ></sp-textfield>
+
+          <sp-field-label>Visibility</sp-field-label>
+          <sp-switch
+            name="repo-private"
+            checked
+            ${ref((el) => {
+              _privateToggle = /** @type {HTMLInputElement | null} */ (el || null);
+            })}
+            >Private repository</sp-switch
+          >
+        </div>
+      </sp-dialog-wrapper>
+    `;
+  });
+
+  if (!repoOpts) return false;
+
+  statusMessage("Creating GitHub repository…");
+
+  const createRes = await fetch("https://api.github.com/user/repos", {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${token}`,
+      Accept: "application/vnd.github+json",
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      name: repoOpts.name,
+      description: repoOpts.description,
+      private: repoOpts.isPrivate,
+      auto_init: false,
+    }),
+  });
+
+  if (!createRes.ok) {
+    const err = await createRes.json();
+    const msg = err.errors?.[0]?.message || err.message || "Failed to create repository";
+    statusMessage(`Error: ${msg}`);
+    return false;
+  }
+
+  const repo = await createRes.json();
+  const platform = getPlatform();
+
+  statusMessage("Setting remote and pushing…");
+
+  await platform.gitAddRemote("origin", repo.clone_url);
+
+  statusMessage("Pushing to GitHub…");
+  try {
+    await platform.gitPush({ setUpstream: true });
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Push failed: ${/** @type {Error} */ (e).message}`);
+    return false;
+  }
+
+  await refreshGitStatus();
+  statusMessage(`Published to GitHub: ${repo.html_url}`);
+  return true;
+}