src/main.ts

import { tokenManager } from "./token";
import { Client } from "./client";
import { WhoAmIUser } from "@huggingface/hub";

const baseUrl = "https://huggingface.co/api";

const showAuthenticatedUI = async () => {
  const accessToken = tokenManager.getAccessToken();

  if (!accessToken) {
    throw new Error("Access token not found");
  }

  const client = new Client(baseUrl, accessToken);

  const tokenForm = document.getElementById("token-form");
  const repoForm = document.getElementById("repo-form");
  const signoutButton = document.getElementById("signout");
  const createRepoButton = document.getElementById("create-repo");
  const repoNameInput = <HTMLInputElement>document.getElementById("repo-name");
  const resourceGroupInput = <HTMLInputElement>(
    document.getElementById("resource-group-name")
  );
  const resourceGroupContainer = document.getElementById(
    "resource-group-container"
  );

  tokenForm!.style.display = "none";
  repoForm!.style.removeProperty("display");
  signoutButton!.style.removeProperty("display");
  signoutButton!.onclick = () => tokenManager.logout();
  createRepoButton!.onclick = async () => {
    const repoName = repoNameInput.value;
    if (!repoName) return alert("Provide a repo name");

    const orgSelect = <HTMLSelectElement>document.getElementById("org-select");

    try {
      const organizationName = orgSelect?.value || undefined;
      const resourceGroupName = organizationName
        ? resourceGroupInput?.value
        : undefined;

      // create repo
      const repo = await client.post<{ name: string }>("repos/create", {
        type: "model",
        name: repoName,
        organization: organizationName,
        private: true,
      });

      console.log({ repo });

      // create RG wi for repo
      if (resourceGroupName) {
        await client.post<void>(
          `organizations/${organizationName}/resource-groups`,
          {
            name: resourceGroupName,
            description: `Resource group for repository ${repo.name}`,
            repos: [repo],
            autoJoin: {
              enabled: true,
              role: "admin",
            },
          }
        );
      }

      alert("Repository and resource group created successfully!");
    } catch (error) {
      console.error(error);
    }
  };

  // Handle org select change to show/hide resource group input
  const orgSelect = document.getElementById("org-select") as HTMLSelectElement;
  orgSelect.onchange = () => {
    if (orgSelect.value) {
      resourceGroupContainer!.style.removeProperty("display");
    } else {
      resourceGroupContainer!.style.display = "none";
    }
  };

  try {
    const userInfo = await client.get<WhoAmIUser>("whoami-v2");

    // Populate org select
    if (userInfo.orgs.length) {
      userInfo.orgs.forEach((org) => {
        const option = document.createElement("option");
        option.value = org.name;
        option.textContent = org.name;
        orgSelect.appendChild(option);
      });
    }
  } catch (error) {
    console.error(error);
  }
};

const showUnauthenticatedUI = () => {
  const tokenForm = document.getElementById("token-form");
  const tokenInput = <HTMLInputElement>document.getElementById("token-input");
  const tokenSubmit = document.getElementById("token-submit");
  const repoForm = document.getElementById("repo-form");
  const signoutButton = document.getElementById("signout");

  tokenForm!.style.removeProperty("display");
  tokenSubmit!.onclick = () => {
    const token = tokenInput.value;
    if (token) {
      tokenManager.setToken(token);
      showAuthenticatedUI();
    }
  };

  repoForm!.style.display = "none";
  signoutButton!.style.display = "none";
};

const init = async (): Promise<void> => {
  if (tokenManager.isAuthenticated()) {
    showAuthenticatedUI();
  } else {
    showUnauthenticatedUI();
  }
};

init();