lib/plausible_web/templates/settings/new_api_key.html.heex

<.focus_box>
  <:title>Create new API key</:title>

  <div x-data="{ submitDisabled: false }">
    <.form :let={f} for={@changeset} action={Routes.settings_path(@conn, :api_keys)}>
      <.input type="text" field={f[:name]} label="Name" placeholder="Development" />

      <input :if={ce?()} type="hidden" name={f[:type].name} value={f[:type].value} />

      <div :if={ee?()} class="mt-4 flex flex-col gap-y-2">
        <div>
          <.label>Type</.label>
        </div>

        <.input
          x-on:click="submitDisabled = false"
          type="radio"
          class="block h-5 w-5 dark:bg-gray-700 border-gray-300 text-indigo-600 focus:ring-indigo-600"
          id={f[:type].id <> "_0"}
          name={f[:type].name}
          value="stats_api"
          checked={f[:type].value == "stats_api"}
          label="Stats API"
        >
          <:help_content>
            Full access to
            <.styled_link href="https://plausible.io/docs/stats-api">Stats API</.styled_link>
          </:help_content>
        </.input>

        <.input
          x-on:click={"submitDisabled = " <> if(@sites_api_enabled?, do: "false", else: "true")}
          type="radio"
          id={f[:type].id <> "_1"}
          name={f[:type].name}
          value="sites_api"
          checked={f[:type].value == "sites_api"}
          label="Sites API"
        >
          <:help_content>
            Full access to
            <.styled_link href="https://plausible.io/docs/stats-api">Stats API</.styled_link>
            and <.styled_link href="https://plausible.io/docs/sites-api">Sites API</.styled_link>
          </:help_content>
        </.input>

        <div x-show="submitDisabled" class="flex gap-x-2 text-sm">
          <Heroicons.exclamation_triangle class="mt-1 block w-4 h-4 shrink-0" />
          <div>
            Your current subscription plan does not include Sites API access.
            <a href="https://plausible.io/contact" class="underline">Contact us</a>
            if interested.
          </div>
        </div>
      </div>

      <div class="mt-4">
        <.input_with_clipboard
          id="key-input"
          name="api_key[key]"
          label="Key"
          value={f[:key].value}
        />

        <.error :for={
          msg <- Enum.map(f[:key].errors, &PlausibleWeb.Live.Components.Form.translate_error/1)
        }>
          {msg}
        </.error>

        <p class="mt-2 text-gray-500 dark:text-gray-200">
          Make sure to store the key in a secure place. Once created, we will not be able to show it again.
        </p>
      </div>
      <.button type="submit" class="w-full" x-bind:disabled="submitDisabled">
        Create API key
      </.button>
    </.form>
  </div>
</.focus_box>