3d98261a51
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>
115 lines
6.7 KiB
Plaintext
115 lines
6.7 KiB
Plaintext
<div class="space-y-8">
|
|
<div>
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100">Sessions</h1>
|
|
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Manage your active sessions and connected applications.</p>
|
|
</div>
|
|
|
|
<!-- Connected Applications -->
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Connected Applications</h3>
|
|
<div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
|
|
<p>These applications have access to your account. You can revoke access at any time.</p>
|
|
</div>
|
|
<div class="mt-5">
|
|
<% if @connected_applications.any? %>
|
|
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<% @connected_applications.each do |consent| %>
|
|
<li class="py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
<%= consent.application.name %>
|
|
</p>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
Access to: <%= consent.formatted_scopes %>
|
|
</p>
|
|
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
|
Authorized <%= time_ago_in_words(consent.granted_at) %> ago
|
|
</p>
|
|
</div>
|
|
<%= button_to "Revoke Access", revoke_consent_active_sessions_path(application_id: consent.application.id), method: :delete,
|
|
class: "inline-flex items-center rounded-md border border-red-300 bg-white dark:bg-gray-700 dark:ring-gray-600 dark:text-gray-200 px-3 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
|
|
form: { data: { turbo_confirm: "Are you sure you want to revoke access to #{consent.application.name}? You'll need to re-authorize this application to use it again." } } %>
|
|
</div>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% else %>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">No connected applications.</p>
|
|
<% end %>
|
|
|
|
<% if @connected_applications.any? %>
|
|
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<div class="flex justify-end">
|
|
<div class="inline-block">
|
|
<%= button_to "Revoke All App Access", revoke_all_consents_active_sessions_path, method: :delete,
|
|
class: "inline-flex items-center rounded-md border border-red-300 bg-white dark:bg-gray-700 dark:ring-gray-600 dark:text-gray-200 px-3 py-2 text-sm font-medium text-red-700 shadow-sm hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap",
|
|
form: { data: { turbo_confirm: "This will revoke access from all connected applications. You'll need to re-authorize each application to use them again. Are you sure?" } } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Active Sessions -->
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">Active Sessions</h3>
|
|
<div class="mt-2 max-w-xl text-sm text-gray-500 dark:text-gray-400">
|
|
<p>These devices are currently signed in to your account. Revoke any sessions that you don't recognize.</p>
|
|
</div>
|
|
<div class="mt-5">
|
|
<% if @active_sessions.any? %>
|
|
<ul role="list" class="divide-y divide-gray-200 dark:divide-gray-700">
|
|
<% @active_sessions.each do |session| %>
|
|
<li class="py-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex flex-col">
|
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100">
|
|
<%= session.device_name || "Unknown Device" %>
|
|
<% if session.id == Current.session.id %>
|
|
<span class="ml-2 inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/50 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:text-green-200">
|
|
This device
|
|
</span>
|
|
<% end %>
|
|
</p>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
|
|
<%= session.ip_address %>
|
|
</p>
|
|
<p class="mt-1 text-xs text-gray-400 dark:text-gray-500">
|
|
Last active <%= time_ago_in_words(session.last_activity_at || session.updated_at) %> ago
|
|
</p>
|
|
</div>
|
|
<% if session.id != Current.session.id %>
|
|
<%= button_to "Revoke", session_path(session), method: :delete,
|
|
class: "inline-flex items-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 dark:text-gray-200 px-3 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900",
|
|
form: { data: { turbo_confirm: "Are you sure you want to revoke this session?" } } %>
|
|
<% end %>
|
|
</div>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% else %>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">No other active sessions.</p>
|
|
<% end %>
|
|
|
|
<% if @active_sessions.count > 1 %>
|
|
<div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
|
|
<div class="flex justify-end">
|
|
<div class="inline-block">
|
|
<%= button_to "Sign Out Everywhere Else", session_path(Current.session), method: :delete,
|
|
class: "inline-flex items-center rounded-md border border-orange-300 bg-white dark:bg-gray-700 dark:ring-gray-600 dark:text-gray-200 px-3 py-2 text-sm font-medium text-orange-700 shadow-sm hover:bg-orange-50 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900 whitespace-nowrap",
|
|
form: { data: { turbo_confirm: "This will sign you out from all other devices except this one. Are you sure?" } } %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|