76cff0494e
Add KeyValidation module for format-checking API keys before attempting connections. Auto-strips whitespace, detects common mistakes (e.g. pasting a Stripe publishable key), and returns helpful error messages. Inline field errors across all three entry points: - Setup wizard: provider + Stripe keys - Admin provider form: simplified to single Connect button - Email settings: per-field errors instead of flash toasts Also: plain text inputs for all API keys (not password fields), accessible error states (aria-invalid, role=alert, thick border, bold text), inner_block slot declaration on error component. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
61 lines
1.8 KiB
Plaintext
61 lines
1.8 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" 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>
|