Files
sure/app/views/sessions/new.html.erb
Guillem Arias Fauste 2051c74559 fix(ds): unify SSO sign-in buttons on DS::Button; drop bespoke Google CSS (#2152)
The Google button used Google's prebuilt `gsi-material-button` (its own CSS
file + hardcoded hex colors), leaving it the odd one out: capped at 400px (its
`max-width` overrode `w-full`) so it sat narrower than the OpenID/GitHub
buttons, and rendered as a glaring white block in dark mode with no theming.

Render every SSO provider through one `DS::Button(variant: :outline,
full_width: true)` so the stack is consistent and reads as secondary to the
primary email "Log in" CTA. Google keeps its official multi-color "G" mark and
"Sign in with Google" wording (brand-compliant) via a new `google-icon.svg`
asset and an additive `icon_custom:` flag on the button (defaults false — no
change to any existing button). Delete `google-sign-in.css` and its import.
2026-06-03 00:08:12 +02:00

86 lines
3.2 KiB
Plaintext

<% if @prefill_demo_credentials %>
<div class="mb-4 rounded-lg border bg-blue-50 text-blue-700 border-blue-200 theme-dark:bg-blue-900/20 theme-dark:text-blue-400 theme-dark:border-blue-800 p-4" role="status" aria-live="polite">
<div class="flex items-start gap-3">
<div class="shrink-0">
<%= icon "info", size: "sm", color: "blue-600" %>
</div>
<div class="flex-1 text-sm">
<h3 class="font-semibold mb-1">
<%= t(".demo_banner_title") %>
</h3>
<p>
<%= t(".demo_banner_message") %>
</p>
</div>
</div>
</div>
<% end %>
<% if AuthConfig.local_login_form_visible? %>
<%= styled_form_with url: sessions_path, class: "space-y-4", data: { turbo: false } do |form| %>
<%= form.email_field :email,
label: t(".email"),
autofocus: false,
autocomplete: "email",
required: "required",
placeholder: t(".email_placeholder"),
value: @email %>
<%= form.password_field :password,
label: t(".password"),
required: "required",
placeholder: t(".password_placeholder"),
value: @password %>
<%= form.submit t(".submit") %>
<% end %>
<% unless AuthConfig.local_login_enabled? %>
<p class="mt-2 text-xs text-secondary text-center">
<%= t(".local_login_admin_only") %>
</p>
<% end %>
<% if AuthConfig.password_features_enabled? %>
<div class="mt-6 text-center">
<%= link_to t(".forgot_password"), new_password_reset_path, class: "font-medium text-sm text-primary hover:underline transition" %>
</div>
<% end %>
<% end %>
<% providers = AuthConfig.sso_providers %>
<% if providers.any? %>
<div class="mt-6 space-y-3">
<% providers.each do |provider| %>
<% provider_id = provider[:id].to_s %>
<% provider_name = provider[:name].to_s %>
<% is_google = provider_id == "google" || provider[:strategy].to_s == "google_oauth2" %>
<% default_label = is_google ? t(".google_auth_connect") : t(".#{provider_id}", default: provider[:name].to_s.titleize) %>
<%#
SSO buttons use the design-system outline button so they stay consistent
with each other and read as secondary to the primary email "Log in" CTA.
Google keeps its official multi-color "G" mark + "Sign in with Google"
wording (brand-compliant) via the custom-icon asset, so no bespoke CSS.
%>
<%= render DS::Button.new(
href: "/auth/#{provider_name}",
method: :post,
variant: :outline,
size: :md,
full_width: true,
icon: is_google ? "google-icon" : provider[:icon].presence,
icon_custom: is_google,
text: provider[:label].presence || default_label,
class: "gap-2",
form: { data: { turbo: false } }
) %>
<% end %>
</div>
<% elsif !AuthConfig.local_login_form_visible? %>
<div class="mt-6 rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm text-amber-800">
<%= t(".no_auth_methods_enabled") %>
</div>
<% end %>