dkam/clinch
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

Add dark mode with toggle and localStorage persistence

Browse Source 
Uses Tailwind v4 class-based dark mode with a Stimulus controller for
toggling. Respects prefers-color-scheme as default, prevents FOUC with
an inline script, and persists the user's choice in localStorage. All
views updated with dark: variants for backgrounds, text, borders,
badges, buttons, and form inputs.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dan Milne
2026-03-22 00:37:58 +11:00
parent 43958f50ce
commit 3d98261a51
38 changed files with 744 additions and 636 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
app/views/totp/new.html.erb
View File

@@ -1,17 +1,17 @@
<div class="max-w-2xl mx-auto">
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-900">Enable Two-Factor Authentication</h1>
<p class="mt-2 text-sm text-gray-600">
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Enable Two-Factor Authentication</h1>
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
Scan the QR code below with your authenticator app, then enter the verification code to confirm.
</p>
</div>
<div class="bg-white shadow sm:rounded-lg">
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
<div class="px-4 py-5 sm:p-6">
<!-- Step 1: Scan QR Code -->
<div class="mb-8">
<h3 class="text-lg font-medium text-gray-900 mb-4">Step 1: Scan QR Code</h3>
<div class="flex justify-center p-6 bg-gray-50 rounded-lg">
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Step 1: Scan QR Code</h3>
<div class="flex justify-center p-6 bg-gray-50 dark:bg-gray-700 rounded-lg">
<%= @qr_code.as_svg(
module_size: 4,
color: "000",
@@ -19,26 +19,26 @@
standalone: true
).html_safe %>
</div>
<p class="mt-4 text-sm text-gray-600 text-center">
<p class="mt-4 text-sm text-gray-600 dark:text-gray-400 text-center">
Use an authenticator app like Google Authenticator, Authy, or 1Password to scan this code.
</p>
</div>
<!-- Manual Entry Option -->
<div class="mb-8 p-4 bg-blue-50 rounded-lg">
<p class="text-sm font-medium text-blue-900 mb-2">Can't scan the QR code?</p>
<p class="text-sm text-blue-800">Enter this key manually in your authenticator app:</p>
<code class="mt-2 block p-2 bg-white rounded text-sm font-mono break-all"><%= @totp_secret %></code>
<div class="mb-8 p-4 bg-blue-50 dark:bg-blue-900/30 rounded-lg">
<p class="text-sm font-medium text-blue-900 dark:text-blue-200 mb-2">Can't scan the QR code?</p>
<p class="text-sm text-blue-800 dark:text-blue-300">Enter this key manually in your authenticator app:</p>
<code class="mt-2 block p-2 bg-white dark:bg-gray-700 dark:text-gray-200 rounded text-sm font-mono break-all"><%= @totp_secret %></code>
</div>
<!-- Step 2: Verify -->
<div>
<h3 class="text-lg font-medium text-gray-900 mb-4">Step 2: Verify</h3>
<h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Step 2: Verify</h3>
<%= form_with url: totp_path, method: :post, class: "space-y-4" do |form| %>
<%= hidden_field_tag :totp_secret, @totp_secret %>
<div>
<%= label_tag :code, "Verification Code", class: "block text-sm font-medium text-gray-700" %>
<%= label_tag :code, "Verification Code", class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
<%= text_field_tag :code,
nil,
placeholder: "000000",
@@ -46,27 +46,27 @@
required: true,
autofocus: true,
autocomplete: "off",
class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-center text-2xl tracking-widest font-mono" %>
<p class="mt-1 text-sm text-gray-500">Enter the 6-digit code from your authenticator app</p>
class: "mt-1 block w-full rounded-md border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-center text-2xl tracking-widest font-mono" %>
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Enter the 6-digit code from your authenticator app</p>
</div>
<div class="flex gap-3">
<%= form.submit "Verify and Enable 2FA",
class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
<%= link_to "Cancel", profile_path,
class: "inline-flex justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2" %>
class: "inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 py-2 px-4 text-sm font-medium text-gray-700 dark:text-gray-200 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900" %>
</div>
<% end %>
</div>
</div>
</div>
<div class="mt-6 p-4 bg-yellow-50 rounded-lg">
<div class="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/30 rounded-lg">
<div class="flex">
<svg class="h-5 w-5 text-yellow-400 mr-3 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" />
</svg>
<div class="text-sm text-yellow-800">
<div class="text-sm text-yellow-800 dark:text-yellow-200">
<p class="font-medium">Important: Save your backup codes</p>
<p class="mt-1">After verifying, you'll be shown backup codes. Save these in a safe place - they can be used to access your account if you lose your device.</p>
</div>