raucao
a669bf7c9b
- Rework RsAuthComponent into a card that shows the app, its device, an access summary and the permission status - Group connected apps by app and device, so repeated authorizations for the same app and device (e.g. after a browser update) are shown together, each with its own revoke action - Add RsAuthDetailsModalComponent with the full scope list, device, connected tokens and permission expiry, plus Launch and Revoke actions (built on the existing ModalComponent) - Add RemoteStorageAuthorization#device_name (parsed from the user agent) and #expired? Part of #254
42 lines
1.4 KiB
ERB
42 lines
1.4 KiB
ERB
<div class="rs-auth-card flex flex-col h-full rounded border border-gray-200 p-4"
|
|
data-controller="modal" data-action="keydown.esc->modal#close">
|
|
<div class="flex items-center gap-4">
|
|
<div class="h-16 w-16 flex-none">
|
|
<%= render AppCatalog::WebAppIconComponent.new(web_app: @web_app) %>
|
|
</div>
|
|
<div class="flex-grow min-w-0">
|
|
<h4 class="mb-1 text-lg font-bold truncate"><%= name %></h4>
|
|
<p class="text-sm text-gray-500 truncate"><%= @auth.client_id %></p>
|
|
</div>
|
|
</div>
|
|
|
|
<dl class="mt-4 flex-grow space-y-1 text-sm text-gray-600">
|
|
<div class="flex justify-between gap-2">
|
|
<dt>Access</dt>
|
|
<dd class="text-right"><%= scope_summary %></dd>
|
|
</div>
|
|
<div class="flex justify-between gap-2">
|
|
<dt>Device</dt>
|
|
<dd class="text-right"><%= device_name %></dd>
|
|
</div>
|
|
<div class="flex justify-between gap-2">
|
|
<dt>Status</dt>
|
|
<dd class="text-right <%= "text-red-700" if @auth.expired? %>"><%= expiry_label %></dd>
|
|
</div>
|
|
<% if multiple_authorizations? %>
|
|
<div class="flex justify-between gap-2">
|
|
<dt>Tokens</dt>
|
|
<dd class="text-right text-amber-700"><%= @authorizations.size %></dd>
|
|
</div>
|
|
<% end %>
|
|
</dl>
|
|
|
|
<div class="mt-4">
|
|
<button class="btn-md btn-outline w-full" data-action="click->modal#open">
|
|
Details
|
|
</button>
|
|
</div>
|
|
|
|
<%= render RsAuthDetailsModalComponent.new(authorizations: @authorizations) %>
|
|
</div>
|