ubicloud/views/project/token.erb

<% @page_title = "#{@project.name} - Personal Access Tokens" %>

<%== part(
  "components/page_header",
  title: "Personal Access Tokens",
  breadcrumbs: [%w[Projects /project], [@project.name, @project.path], ["Personal Access Tokens", "#"]],
  right_items: [form({action: "#{@project.path}/token", method: :post, id: "create-pat"}, emit: false) do |f|
    f << part("components/form/submit_button", text: "Create Token")
  end]
) %>

<div class="grid gap-6">
  <div class="md:flex md:items-center md:justify-between pb-1 lg:pb-2">
    <div class="min-w-0 flex-1">
      Personal access tokens are both account-specific and project-specific. You can use a separate access control
      entries for each token, but be aware that regardless of the access permissions of the token, requests made using
      the token cannot exceed the access permissions of your account.
    </div>
  </div>

  <%== part(
    "components/table_card",
    headers: ["ID", "Token", ""],
    empty_state: {
      icon: "hero-key",
      title: "No personal access token",
      description: "Get started with the API by creating a personal access token."
    },
    rows:
      @tokens.map do |token|
        [
          [
            [token.ubid, { link: path(token) }],
            ["pat-#{token.ubid}-#{token.key}", { revealable: true, copyable: true }],
            [
              "delete_button",
              {
                component: {
                  text: "Remove",
                  url: "#{@project.path}/token/#{token.ubid}",
                  confirmation: "delete token"
                },
                extra_class: "flex justify-end"
              }
            ]
          ],
          { id: "token-#{token.ubid}" }
        ]
      end
  ) %>
</div>