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

<.header>
  {if @live_action == :new,
    do: "Connect to #{provider_label(@provider_type)}",
    else: "#{provider_label(@provider_type)} settings"}
</.header>

<div class="max-w-xl mt-6">
  <%= if @live_action == :new do %>
    <div class="prose prose-sm mb-6">
      <p>
        {provider_label(@provider_type)} 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>

    <%= if @provider_type == "printify" do %>
      <div class="rounded-lg bg-base-200 p-4 mb-6 text-sm">
        <p class="font-medium mb-2">Get your API key from Printify:</p>
        <ol class="list-decimal list-inside space-y-1 text-base-content/80">
          <li>
            <a
              href="https://printify.com/app/auth/login"
              target="_blank"
              rel="noopener"
              class="admin-link"
            >
              Log in to Printify
            </a>
            (or <a
              href="https://printify.com/app/auth/register"
              target="_blank"
              rel="noopener"
              class="admin-link"
            >create a free account</a>)
          </li>
          <li>Click <strong>Account</strong> (top right)</li>
          <li>Select <strong>Connections</strong> from the dropdown</li>
          <li>Find <strong>API tokens</strong> and click <strong>Generate</strong></li>
          <li>
            Enter a name (e.g. "My Shop"), keep <strong>all scopes</strong>
            selected, and click <strong>Generate token</strong>
          </li>
          <li>Click <strong>Copy to clipboard</strong> and paste it below</li>
        </ol>
      </div>
    <% else %>
      <div class="rounded-lg bg-base-200 p-4 mb-6 text-sm">
        <p class="font-medium mb-2">Get your API key from Printful:</p>
        <ol class="list-decimal list-inside space-y-1 text-base-content/80">
          <li>
            <a
              href="https://www.printful.com/auth/login"
              target="_blank"
              rel="noopener"
              class="admin-link"
            >
              Log in to Printful
            </a>
            (or <a
              href="https://www.printful.com/auth/signup"
              target="_blank"
              rel="noopener"
              class="admin-link"
            >create a free account</a>)
          </li>
          <li>Go to <strong>Settings</strong> &rarr; <strong>API access</strong></li>
          <li>Click <strong>Create API key</strong></li>
          <li>Give it a name and select <strong>all scopes</strong></li>
          <li>Copy the token and paste it below</li>
        </ol>
      </div>
    <% end %>
  <% 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_label(@provider_type)} 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_label(@provider_type)}
            </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_label(@provider_type)}",
          else: "Save changes"}
      </.button>
      <.link navigate={~p"/admin/providers"} class="admin-btn admin-btn-ghost">
        Cancel
      </.link>
    </div>
  </.form>
</div>