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="admin-form-narrow">
  <%= if @live_action == :new do %>
    <p class="admin-section-desc">
      {@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 class="admin-callout">
      <p class="admin-callout-title">Get your API key from {@provider.name}:</p>
      <ol class="admin-callout-list">
        <li>
          <.external_link href={@provider.login_url} class="admin-link">
            Log in to {@provider.name}
          </.external_link>
          (or <.external_link href={@provider.signup_url} class="admin-link">create a free account</.external_link>)
        </li>
        <li :for={step <- @provider.setup_steps}>
          {raw(step)}
        </li>
      </ol>
    </div>
  <% end %>

  <.form
    for={@form}
    id="provider-form"
    action={
      if @live_action == :new,
        do: ~p"/admin/providers",
        else: ~p"/admin/providers/#{@connection.id}"
    }
    method="post"
    phx-change="validate"
    phx-submit="save"
  >
    <input type="hidden" name="provider_connection[provider_type]" value={@provider_type} />

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

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

    <div class="admin-form-actions">
      <.button type="submit">
        {if @live_action == :new,
          do: "Connect",
          else: "Save changes"}
      </.button>
      <.link navigate={~p"/admin/providers"} class="admin-btn admin-btn-ghost">
        Cancel
      </.link>
    </div>
  </.form>
</div>