mirror of
https://github.com/we-promise/sure.git
synced 2026-05-24 21:14:56 +00:00
57d71cd55e
* 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
89 lines
3.6 KiB
Plaintext
89 lines
3.6 KiB
Plaintext
<%= content_for :page_title, "API Key Created" %>
|
|
|
|
<%= settings_section title: "API Key Created Successfully", subtitle: "Your new API key has been generated successfully." do %>
|
|
<div class="space-y-4">
|
|
<div class="p-3 shadow-border-xs bg-container rounded-lg">
|
|
<div class="flex items-start gap-3">
|
|
<%= render DS::FilledIcon.new(
|
|
icon: "check-circle",
|
|
rounded: true,
|
|
size: "lg",
|
|
variant: :success
|
|
) %>
|
|
<div class="flex-1">
|
|
<h3 class="font-medium text-primary">API Key Created Successfully!</h3>
|
|
<p class="text-secondary text-sm mt-1">Your new API key "<%= @api_key.name %>" has been created and is ready to use.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">Your API Key</h4>
|
|
<p class="text-secondary text-sm mb-3">Copy and store this key securely. You'll need it to authenticate your API requests.</p>
|
|
|
|
<div class="bg-container rounded-lg p-3 border border-primary" data-controller="clipboard">
|
|
<div class="flex items-center justify-between gap-3">
|
|
<code id="api-key-display" class="font-mono text-sm text-primary break-all" data-clipboard-target="source"><%= @api_key.plain_key %></code>
|
|
<%= render DS::Button.new(
|
|
text: "Copy API Key",
|
|
variant: "ghost",
|
|
icon: "copy",
|
|
data: { action: "clipboard#copy" }
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">Key Details</h4>
|
|
<div class="space-y-2 text-sm">
|
|
<div class="flex justify-between">
|
|
<span class="text-secondary">Name:</span>
|
|
<span class="text-primary font-medium"><%= @api_key.name %></span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-secondary">Permissions:</span>
|
|
<span class="text-primary">
|
|
<%= @api_key.scopes.map { |scope|
|
|
case scope
|
|
when "read_accounts" then "View Accounts"
|
|
when "read_transactions" then "View Transactions"
|
|
when "read_balances" then "View Balances"
|
|
when "write_transactions" then "Create Transactions"
|
|
else scope.humanize
|
|
end
|
|
}.join(", ") %>
|
|
</span>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<span class="text-secondary">Created:</span>
|
|
<span class="text-primary"><%= @api_key.created_at.strftime("%B %d, %Y at %I:%M %p") %></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<%= render DS::Alert.new(title: "Important Security Note", variant: :warning) do %>
|
|
<p>
|
|
This is the only time your API key will be displayed. Make sure to copy it now and store it securely.
|
|
If you lose this key, you'll need to generate a new one.
|
|
</p>
|
|
<% end %>
|
|
|
|
<div class="bg-surface-inset rounded-xl p-4">
|
|
<h4 class="font-medium text-primary mb-3">How to use your API key</h4>
|
|
<p class="text-secondary text-sm mb-3"><%= t("settings.api_keys.show.current_api_key.usage_instructions", product_name: product_name) %></p>
|
|
<div class="bg-container rounded-lg p-3 font-mono text-sm text-primary border border-primary">
|
|
curl -H "X-Api-Key: <%= @api_key.plain_key %>" <%= request.base_url %>/api/v1/accounts
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-4 border-t border-primary">
|
|
<%= render DS::Link.new(
|
|
text: "Continue to API Key Settings",
|
|
href: settings_api_key_path,
|
|
variant: "primary"
|
|
) %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|