mirror of
https://github.com/we-promise/sure.git
synced 2026-05-10 22:25:00 +00:00
2bcdf6c554
* fix(design-system): replace undefined utility classes and broken /N modifiers
Audit of class-name resolution in views surfaced two related silent
failures across ~17 files:
1. Class names that don't exist anywhere in the design system. Tailwind
silently drops them and the element renders with no CSS for that
property.
- bg-primary (and bg-primary/5, /10, /90): never defined as a
custom utility, no --color-primary in @theme. Used as a CTA bg
in 8 places, all rendered transparent.
- text-inverted: typo of text-inverse.
- text-primary-foreground: shadcn/Radix vocabulary, not in our
token system.
- bg-accent / border-accent / text-accent: same shadcn vocabulary;
not defined.
2. Slash modifier (/N) used on custom @utility blocks. Modifiers only
resolve on Tailwind theme colors (anything in tokens.json color.*).
Custom @utility blocks compile to static @apply statements and
silently drop the /N variant. Affected uses:
- border-surface-inset/50 across provider account selectors.
- border-secondary/30, /40 in admin SSO form and simplefin setup.
- bg-surface-inset/30, /40 in settings preferences and simplefin.
Fixes:
| From | To |
|---------------------------------------------------|------------------------------------------------------|
| bg-primary text-white (and similar primary CTAs) | button-bg-primary text-inverse |
| bg-primary text-primary-foreground (badges) | button-bg-primary text-inverse |
| bg-primary text-inverted (typo) | button-bg-primary text-inverse |
| bg-primary text-primary (broken active pill) | bg-inverse text-inverse |
| bg-primary (status dot) | bg-inverse |
| bg-primary/5, bg-primary/10 (subtle accent bg) | bg-gray-tint-5, bg-gray-tint-10 |
| hover:bg-primary/90 | hover:button-bg-primary-hover |
| border-accent bg-accent/10 text-accent (badges) | border-secondary bg-surface-inset text-secondary |
| border-surface-inset/50 | border-secondary |
| border-secondary/30, /40 | border-tertiary |
| bg-surface-inset/30 | bg-surface-inset (full strength) |
| bg-surface-inset/40 | bg-container-inset |
Also documents the alpha-modifier limitation in design/tokens/README.md
under a new "Alpha modifiers in views (/N syntax)" section, with the
opacity-N convention for custom utilities and a note that the
gray-tint-5 / gray-tint-10 family (and similar pre-resolved tints) are
theme colors and accept /N modifiers natively.
The accent-badge mapping uses neutral semantics for now. A dedicated
brand-accent token (text-link-tint-10 etc.) is worth considering as a
follow-up if the "highlighted metadata badge" pattern recurs.
* fix(design-system): replace undefined divide-primary / divide-secondary with alpha tokens
Same class of bug as the rest of this PR: divide-{name} requires the
name to be a theme color (i.e. expose --color-{name}), and our custom
@utility utilities (primary, secondary, etc.) do not. Tailwind silently
drops the unrecognized class and rows render with no separator.
Spotted six instances during the visual audit:
- admin/users/index.html.erb (×2): users table + pending invitations
- admin/sso_providers/index.html.erb (×2): configured + legacy lists
- transactions/categorizes/_transaction_list.html.erb: categorize sidebar
- settings/preferences/show.html.erb: divide-secondary/60 (also broken)
Swapped to the alpha-black/white pattern already used elsewhere in the
codebase (imports/cleans/show, transactions/_summary, etc.):
divide-y divide-primary
-> divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200
divide-y divide-secondary/60
-> divide-y divide-alpha-black-100 theme-dark:divide-alpha-white-100
The lighter (-100) variant on the preferences list matches the original
intent of /60 (more subtle).
127 lines
5.9 KiB
Plaintext
127 lines
5.9 KiB
Plaintext
<%= content_for :page_title, "SSO Providers" %>
|
|
|
|
<div class="space-y-4">
|
|
<p class="text-secondary mb-4">
|
|
Manage single sign-on authentication providers for your instance.
|
|
<% unless FeatureFlags.db_sso_providers? %>
|
|
<span class="text-warning">Changes require a server restart to take effect.</span>
|
|
<% end %>
|
|
</p>
|
|
|
|
<%= settings_section title: "Configured Providers" do %>
|
|
<% if @sso_providers.any? %>
|
|
<div class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
|
|
<% @sso_providers.each do |provider| %>
|
|
<div class="flex items-center justify-between py-3 first:pt-0 last:pb-0">
|
|
<div class="flex items-center gap-3">
|
|
<% if provider.icon.present? %>
|
|
<%= icon provider.icon, class: "w-5 h-5 text-secondary" %>
|
|
<% else %>
|
|
<%= icon "key", class: "w-5 h-5 text-secondary" %>
|
|
<% end %>
|
|
<div>
|
|
<p class="font-medium text-primary"><%= provider.label %></p>
|
|
<p class="text-sm text-secondary"><%= provider.strategy.titleize %> · <%= provider.name %></p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<% if provider.enabled? %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
|
|
Enabled
|
|
</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface text-secondary">
|
|
Disabled
|
|
</span>
|
|
<% end %>
|
|
<%= link_to edit_admin_sso_provider_path(provider), class: "p-1 text-secondary hover:text-primary", title: "Edit" do %>
|
|
<%= icon "pencil", class: "w-4 h-4" %>
|
|
<% end %>
|
|
<%= button_to toggle_admin_sso_provider_path(provider), method: :patch, class: "p-1 text-secondary hover:text-primary", title: provider.enabled? ? "Disable" : "Enable", form: { data: { turbo_confirm: "Are you sure you want to #{provider.enabled? ? 'disable' : 'enable'} this provider?" } } do %>
|
|
<%= icon provider.enabled? ? "toggle-right" : "toggle-left", class: "w-4 h-4" %>
|
|
<% end %>
|
|
<%= button_to admin_sso_provider_path(provider), method: :delete, class: "p-1 text-destructive hover:text-destructive", title: "Delete", form: { data: { turbo_confirm: "Are you sure you want to delete this provider? This action cannot be undone." } } do %>
|
|
<%= icon "trash-2", class: "w-4 h-4" %>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% else %>
|
|
<div class="text-center py-6">
|
|
<%= icon "key", class: "w-12 h-12 mx-auto text-secondary mb-3" %>
|
|
<p class="text-secondary">No SSO providers configured yet.</p>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="pt-4 border-t border-primary">
|
|
<%= link_to new_admin_sso_provider_path, class: "inline-flex items-center gap-2 text-sm font-medium text-primary hover:text-secondary" do %>
|
|
<%= icon "plus", class: "w-4 h-4" %>
|
|
Add Provider
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
|
|
<% if @legacy_providers.any? %>
|
|
<%= settings_section title: t("admin.sso_providers.index.legacy_providers_title"), collapsible: true, open: true do %>
|
|
<div class="bg-amber-50 border border-amber-200 rounded-lg p-3 mb-4">
|
|
<div class="flex gap-2">
|
|
<%= icon "alert-triangle", class: "w-5 h-5 text-amber-600 shrink-0" %>
|
|
<p class="text-sm text-amber-800">
|
|
<%= t("admin.sso_providers.index.legacy_providers_notice") %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="divide-y divide-alpha-black-200 theme-dark:divide-alpha-white-200">
|
|
<% @legacy_providers.each do |provider| %>
|
|
<div class="flex items-center justify-between py-3 first:pt-0 last:pb-0">
|
|
<div class="flex items-center gap-3">
|
|
<% provider_icon = provider[:icon].presence || "key" %>
|
|
<%= icon provider_icon, class: "w-5 h-5 text-secondary" %>
|
|
<div>
|
|
<p class="font-medium text-primary"><%= provider[:label].presence || provider[:name] %></p>
|
|
<p class="text-sm text-secondary">
|
|
<%= provider[:strategy].to_s.titleize %> · <%= provider[:name] %>
|
|
<% if provider[:issuer].present? %>
|
|
· <span class="text-xs"><%= provider[:issuer] %></span>
|
|
<% end %>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-amber-100 text-amber-800">
|
|
<%= t("admin.sso_providers.index.env_configured") %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
<% end %>
|
|
|
|
<%= settings_section title: "Configuration Mode", collapsible: true, open: false do %>
|
|
<div class="space-y-3">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<p class="font-medium text-primary">Database-backed providers</p>
|
|
<p class="text-sm text-secondary">Load providers from database instead of YAML config</p>
|
|
</div>
|
|
<% if FeatureFlags.db_sso_providers? %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
|
|
Enabled
|
|
</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-surface text-secondary">
|
|
Disabled
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
<p class="text-sm text-secondary">
|
|
Set <code class="bg-surface px-1 py-0.5 rounded text-xs">AUTH_PROVIDERS_SOURCE=db</code> to enable database-backed providers.
|
|
This allows changes without server restarts.
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|