berrypod/lib/berrypod_web/live/admin/providers/form.html.heex

<.header>
  {if @live_action == :new,
    do: "Connect to #{@provider.name}",
    else: "#{@provider.name} settings"}
</.header>

<div class="max-w-xl mt-6">
  <%= if @live_action == :new do %>
    <div class="prose prose-sm mb-6">
      <p>
        {@provider.name} is a print-on-demand service that prints and ships products for you.
        Connect your account to automatically import your products into your shop.
      </p>
    </div>

    <div class="rounded-lg bg-base-200 p-4 mb-6 text-sm">
      <p class="font-medium mb-2">Get your API key from {@provider.name}:</p>
      <ol class="list-decimal list-inside space-y-1 text-base-content/80">
        <li>
          <a href={@provider.login_url} target="_blank" rel="noopener" class="admin-link">
            Log in to {@provider.name}
          </a>
          (or <a href={@provider.signup_url} target="_blank" rel="noopener" class="admin-link">create a free account</a>)
        </li>
        <li :for={step <- @provider.setup_steps}>
          {raw(step)}
        </li>
      </ol>
    </div>
  <% end %>

  <.form for={@form} id="provider-form" phx-change="validate" phx-submit="save">
    <input type="hidden" name="provider_connection[provider_type]" value={@provider_type} />

    <.input
      field={@form[:api_key]}
      type="password"
      label={"#{@provider.name} API key"}
      placeholder={
        if @live_action == :edit,
          do: "Leave blank to keep current key",
          else: "Paste your key here"
      }
      autocomplete="off"
    />

    <div class="flex items-center gap-3 mb-6">
      <button
        type="button"
        class="admin-btn admin-btn-outline admin-btn-sm"
        phx-click="test_connection"
        disabled={@testing}
      >
        <.icon
          name={if @testing, do: "hero-arrow-path", else: "hero-signal"}
          class={if @testing, do: "size-4 animate-spin", else: "size-4"}
        />
        {if @testing, do: "Checking...", else: "Check connection"}
      </button>

      <div :if={@test_result} class="text-sm">
        <%= case @test_result do %>
          <% {:ok, _info} -> %>
            <span class="text-success flex items-center gap-1">
              <.icon name="hero-check-circle" class="size-4" />
              Connected to {connection_name(@test_result) || @provider.name}
            </span>
          <% {:error, reason} -> %>
            <span class="text-error flex items-center gap-1">
              <.icon name="hero-x-circle" class="size-4" />
              {format_error(reason)}
            </span>
        <% end %>
      </div>
    </div>

    <%= if @live_action == :edit do %>
      <.input field={@form[:enabled]} type="checkbox" label="Connection enabled" />
    <% end %>

    <div class="flex gap-2 mt-6">
      <.button type="submit" disabled={@testing}>
        {if @live_action == :new,
          do: "Connect to #{@provider.name}",
          else: "Save changes"}
      </.button>
      <.link navigate={~p"/admin/providers"} class="admin-btn admin-btn-ghost">
        Cancel
      </.link>
    </div>
  </.form>
</div>