berrypod/lib/berrypod_web/live/admin/providers/form.html.heex
jamey 2282af91db
Some checks failed
deploy / deploy (push) Has been cancelled
complete onboarding UX v2
Tasks C, H, I from the plan:

- Forgiving API key validation: add Printify UUID format and Printful
  length validation, validate on blur for fast feedback, helpful error
  messages with specific guidance

- External links UX: verified all external links use <.external_link>
  component with target="_blank", rel="noopener noreferrer", icon, and
  screen reader text

- Input styling WCAG compliance: increase input border contrast from
  ~3.3:1 to ~4.5-5:1 across all theme moods (neutral, warm, cool, dark)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-03-10 07:56:54 +00:00

73 lines
2.0 KiB
Plaintext

<.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"
phx-debounce="blur"
/>
<%= 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>