Files
sure/app/views/settings/api_keys/new.html.erb
Guillem Arias Fauste 57d71cd55e refactor(design-system): extend DS::Alert and migrate 9 inline alert blocks (#1731)
* feat(design-system): add info semantic color token

Mirrors success/warning/destructive: --color-info maps to blue-600 in
light mode, blue-500 in dark mode. Unblocks the DS::Alert info variant
from carrying a raw 'blue-600' literal in icon_color and lets surface
tokens use bg-info/N alpha modifiers like the rest of the system.

Refs #1715

* refactor(design-system): adopt semantic tokens and add body slot in DS::Alert

Replaces the bg-{blue,green,yellow,red}-50 / text-{...}-700 / border-{...}-200
palette block in DS::Alert with semantic alpha-modifier surfaces
(bg-{info,success,warning,destructive}/10 + matching /20 borders).
Drops the 'blue-600' literal that icon_color was returning for the
info variant; helpers#icon now accepts color: :info backed by the
new --color-info token.

Adds an optional title: kwarg and an opt-in block-content slot so
rich alerts (title + paragraph, lists, embedded actions) can render
without callers reaching for a hand-rolled flex layout. The existing
message: API stays backward-compatible — nothing in the codebase that
already calls DS::Alert.new(message: ..., variant: ...) needs to change.

Lookbook gains with_title and with_body_slot examples covering the
new shapes.

Refs #1715

* refactor(views): migrate api_keys, hostings, lunchflow alerts to DS::Alert

Cleans up nine bespoke alert blocks that hand-rolled the same
flex + icon + bordered-surface shape DS::Alert already provides:

- settings/api_keys/{new,created,created.turbo_stream}.html.erb — three
  near-identical 'Security Warning' / 'Important Security Note' boxes
  using the broken bg-warning-50 / text-warning-700 raw-palette pair.
- settings/hostings/{_alpha_vantage,_eodhd,_yahoo_finance,_twelve_data,_provider_selection}_settings.html.erb —
  five amber-50 / amber-200 warning boxes covering rate-limit notes,
  health-check failure messaging, and the env-configured override
  banner. The twelve_data plan-restriction block keeps its bullet
  list and pricing link inside the new DS::Alert body slot.
- lunchflow_items/{_api_error,_setup_required}.html.erb — two modal
  alert headers whose flex+icon scaffolding now collapses onto
  DS::Alert. The surrounding bg-surface 'Common issues' / 'Setup
  steps' info cards stay as-is; this PR only touches the alert
  shape itself.

No functional or behavioural changes. Locale keys preserved.
amber-* palette uses on the alerts disappear; remaining bg-amber-*
hits in the codebase live outside the alert pattern and stay for
follow-up sub-PRs of #1715.

Refs #1715
2026-05-10 17:14:06 +02:00

55 lines
2.2 KiB
Plaintext

<%= content_for :page_title, "Create New API Key" %>
<%= settings_section title: nil, subtitle: "Generate a new API key to access your Sure data programmatically." do %>
<%= styled_form_with model: @api_key, url: settings_api_key_path, class: "space-y-4" do |form| %>
<%= form.text_field :name,
placeholder: "e.g., My Budget App, Portfolio Tracker",
label: "API Key Name",
help_text: "Choose a descriptive name to help you identify this key later." %>
<div>
<%= form.label :scopes, "Permissions", class: "block text-sm font-medium text-primary mb-2" %>
<p class="text-sm text-secondary mb-3">Select the permissions this API key should have:</p>
<div class="space-y-2">
<% [
["read", "Read Only", "View your accounts, transactions, and balances"],
["read_write", "Read/Write", "View your data and create new transactions"]
].each do |value, label, description| %>
<div class="bg-surface-inset rounded-lg p-3 border border-primary">
<label class="flex items-start gap-3 cursor-pointer">
<%= radio_button_tag "api_key[scopes]", value, (@api_key&.scopes || []).include?(value),
class: "mt-1" %>
<div class="flex-1">
<div class="font-medium text-primary"><%= label %></div>
<div class="text-sm text-secondary mt-1"><%= description %></div>
</div>
</label>
</div>
<% end %>
</div>
</div>
<%= render DS::Alert.new(title: "Security Warning", variant: :warning) do %>
<p>
Your API key will be displayed only once after creation. Make sure to copy and store it securely.
Anyone with access to this key can access your data according to the permissions you select.
</p>
<% end %>
<div class="flex justify-end gap-3 pt-4 border-t border-primary">
<%= render DS::Link.new(
text: "Cancel",
href: settings_api_key_path,
variant: "ghost"
) %>
<%= render DS::Button.new(
text: "Save API Key",
variant: "primary",
type: "submit"
) %>
</div>
<% end %>
<% end %>