lib/plausible_web/templates/google_analytics/property_form.html.heex

<.focus_box>
  <:title>
    Import from Google Analytics
  </:title>

  <:subtitle>
    Choose the property in your Google Analytics account that will be imported to the {@site.domain} dashboard.
  </:subtitle>
  <.form
    :let={f}
    for={@conn}
    onsubmit="continueButton.disabled = true; return true;"
    action={Routes.google_analytics_path(@conn, :property, @site.domain)}
  >
    <.input type="hidden" field={f[:access_token]} />
    <.input type="hidden" field={f[:refresh_token]} />
    <.input type="hidden" field={f[:expires_at]} />

    <div class="mt-3">
      <.input
        type="select"
        field={f[:property]}
        prompt="(Choose property)"
        options={@properties}
        label="Google Analytics property"
        required="true"
      />

      <p class="text-red-600 dark:text-red-700">
        {@conn.assigns[:selected_property_error]}
      </p>
    </div>

    <div class="mt-6 flex flex-col-reverse sm:flex-row justify-between items-center">
      <p class="mt-4 sm:mt-0 dark:text-gray-100">
        <a
          href={Routes.site_path(@conn, :settings_imports_exports, @site.domain)}
          class="underline text-indigo-600"
        >
          Go back
        </a>
      </p>

      <.button
        type="submit"
        name="continueButton"
        class="button sm:w-auto w-full [&>span.label-enabled]:block [&>span.label-disabled]:hidden [&[disabled]>span.label-enabled]:hidden [&[disabled]>span.label-disabled]:block"
      >
        <span class="label-enabled pointer-events-none">
          Continue
        </span>

        <span class="label-disabled">
          <.spinner class="inline-block h-5 w-5 mr-2 text-white dark:text-gray-400" /> Checking...
        </span>
      </.button>
    </div>
  </.form>
</.focus_box>