Skip to content

Fix stub login banner in dark mode, add dark mode toggle to login screen #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
senid231 merged 4 commits into from
Sep 3, 2026
Merged

Fix stub login banner in dark mode, add dark mode toggle to login screen #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2ac0c69
Fix stub login banner in dark mode, add dark mode toggle to login screen
senid231 Sep 3, 2026
3b0842c
Use Active Admin's own utility classes on the login screen
senid231 Sep 3, 2026
2d84df5
Address review: keep the toggle's focus outline, cover both changes
senid231 Sep 3, 2026
b732e9b
Address review: raise the toggle icon's contrast
senid231 Sep 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions app/views/active_admin/devise/sessions/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,29 @@
<% if ActiveAdmin::Oidc.aa_v4? %>
<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
<h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white flex gap-2 items-center">
<%= site_title %> <%= set_page_title t('active_admin.devise.login.title') %>
</h2>
<div class="flex gap-2 items-center">
<h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white flex gap-2 items-center">
<%= site_title %> <%= set_page_title t('active_admin.devise.login.title') %>
</h2>

<%# Active Admin's own dark mode toggle. The logged out layout renders
active_admin/html_head, which loads the JS that delegates clicks on
.dark-mode-toggle, so the button needs no script of its own. %>
<button type="button"
class="dark-mode-toggle ms-auto flex items-center w-9 h-9 justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-sm"
aria-label="<%= t('active_admin.toggle_dark_mode', default: 'Toggle dark mode') %>">
Comment thread
senid231 marked this conversation as resolved.
<svg class="hidden dark:block w-5 h-5 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.509 5.75c0-1.493.394-2.96 1.144-4.25h-.081a8.5 8.5 0 1 0 7.356 12.746A8.5 8.5 0 0 1 8.509 5.75Z"></path></svg>
<svg class="dark:hidden w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 3V1m0 18v-2M5.05 5.05 3.636 3.636m12.728 12.728L14.95 14.95M3 10H1m18 0h-2M5.05 14.95l-1.414 1.414M16.364 3.636 14.95 5.05M14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg>
</button>
</div>

<% if ActiveAdmin::Oidc.config.stub_dev_env_login_enabled? %>
<p class="activeadmin-oidc-stub-login text-sm font-semibold border border-red-400 bg-red-50 text-red-900 rounded-md p-3 dark:bg-red-900/30 dark:border-red-700 dark:text-red-100">
<%# Classes copied from Active Admin's own error flash. The gem's views are
outside the host's Tailwind content path, so only utilities Active Admin
itself already emits are compiled. %>
<div class="activeadmin-oidc-stub-login flex items-center gap-3 p-4 rounded-lg bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300">
<svg class="w-5 h-5 shrink-0 text-red-400 dark:text-red-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/></svg>
Stub login is enabled: the button below signs in without contacting the identity provider.
</p>
</div>
<% end %>

<%= button_to ActiveAdmin::Oidc.config.login_button_label,
Expand Down
2 changes: 1 addition & 1 deletion lib/activeadmin/oidc/version.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,6 @@

module ActiveAdmin
module Oidc
VERSION = "2.2.0"
VERSION = "2.2.1"
end
end
26 changes: 21 additions & 5 deletions lib/generators/active_admin/oidc/install/templates/sessions_new_v4.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,30 @@
route while ActiveAdmin::Oidc.config.stub_dev_env_login! is on,
which only ever happens in the development environment. %>
<div class="p-6 sm:p-8 space-y-4 md:space-y-6 w-full sm:max-w-md bg-white sm:rounded-md shadow dark:border dark:bg-gray-800/50 dark:border-gray-800">
<h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white flex gap-2 items-center">
<%= site_title %> <%= set_page_title t('active_admin.devise.login.title') %>
</h2>
<div class="flex gap-2 items-center">
<h2 class="text-xl font-bold text-gray-900 md:text-2xl dark:text-white flex gap-2 items-center">
<%= site_title %> <%= set_page_title t('active_admin.devise.login.title') %>
</h2>

<%# Active Admin's own dark mode toggle. The logged out layout renders
active_admin/html_head, which loads the JS that delegates clicks on
.dark-mode-toggle, so the button needs no script of its own. %>
<button type="button"
class="dark-mode-toggle ms-auto flex items-center w-9 h-9 justify-center text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 text-sm"
aria-label="<%= t('active_admin.toggle_dark_mode', default: 'Toggle dark mode') %>">
<svg class="hidden dark:block w-5 h-5 rtl:-scale-x-100" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.509 5.75c0-1.493.394-2.96 1.144-4.25h-.081a8.5 8.5 0 1 0 7.356 12.746A8.5 8.5 0 0 1 8.509 5.75Z"></path></svg>
<svg class="dark:hidden w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 3V1m0 18v-2M5.05 5.05 3.636 3.636m12.728 12.728L14.95 14.95M3 10H1m18 0h-2M5.05 14.95l-1.414 1.414M16.364 3.636 14.95 5.05M14 10a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z"></path></svg>
</button>
</div>

<% if ActiveAdmin::Oidc.config.stub_dev_env_login_enabled? %>
<p class="activeadmin-oidc-stub-login text-sm font-semibold border border-red-400 bg-red-50 text-red-900 rounded-md p-3 dark:bg-red-900/30 dark:border-red-700 dark:text-red-100">
<%# Classes copied from Active Admin's own error flash. The gem's views are
outside the host's Tailwind content path, so only utilities Active Admin
itself already emits are compiled. %>
<div class="activeadmin-oidc-stub-login flex items-center gap-3 p-4 rounded-lg bg-red-50 text-red-800 dark:bg-red-800 dark:text-red-300">
<svg class="w-5 h-5 shrink-0 text-red-400 dark:text-red-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20"><path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM10 15a1 1 0 1 1 0-2 1 1 0 0 1 0 2Zm1-4a1 1 0 0 1-2 0V6a1 1 0 0 1 2 0v5Z"/></svg>
Stub login is enabled: the button below signs in without contacting the identity provider.
</p>
</div>
<% end %>

<%= button_to ActiveAdmin::Oidc.config.login_button_label,
Expand Down
23 changes: 23 additions & 0 deletions spec/requests/login_page_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,29 @@
expect(response.body).to include(ActiveAdmin::Oidc::Configuration::DEFAULT_LOGIN_BUTTON_LABEL)
end

# Active Admin renders its dark mode toggle only in the signed-in top
# bar, so the login page carries its own. The logged out layout already
# loads the JS that delegates clicks on `.dark-mode-toggle`, so the
# markup is the whole feature -- and losing it is silent.
describe "the dark mode toggle" do
it "renders on AA v4" do
skip "AA v3 has no dark mode" unless ActiveAdmin::Oidc.aa_v4?

get "/admin/login"

expect(response.body).to include("dark-mode-toggle")
expect(response.body).to match(/aria-label="[^"]+"[^>]*>/)
end

it "is not rendered on AA v3" do
skip "AA v4 branch renders the toggle" if ActiveAdmin::Oidc.aa_v4?

get "/admin/login"

expect(response.body).not_to include("dark-mode-toggle")
end
end

# Regression: AA v3's formtastic stylesheet targets
# `#login input[type="submit"]`, so a <button type="submit"> stays
# unstyled (defaults to the dark browser/AA button). Switching to
Expand Down
21 changes: 21 additions & 0 deletions spec/requests/stub_login_spec.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,27 @@ def enable_stub_login!(&claims_block)
expect(response.body).not_to include(%(action="/admin/auth/oidc"))
expect(response.body).to include(ActiveAdmin::Oidc.config.login_button_label)
end

# Regression: the banner used to carry Tailwind colour utilities that
# no host ever compiled, because the gem's views sit outside the
# host's Tailwind content path -- it rendered white on white in dark
# mode. AA 4 reuses the classes AA's own error flash emits; AA 3 has
# no Tailwind and no dark mode, so it styles itself inline.
it "styles the warning with something the host's build actually has" do
enable_stub_login!

get "/admin/login"

if ActiveAdmin::Oidc.aa_v4?
expect(response.body).to match(
/class="activeadmin-oidc-stub-login[^"]*\bdark:bg-red-800\b/
)
else
expect(response.body).to match(
/class="activeadmin-oidc-stub-login"[^>]*style="[^"]*background:/
)
end
end
end

describe "POST /admin/login/stub" do
Expand Down
Loading