bfad9c4e9d
Some checks failed
When an application has no icon attached, render a deterministic monogram SVG instead of the generic picture-frame placeholder. Initials are picked from capital letters in the name (ShelfLife -> SL); fall back to the first two letters when fewer than two capitals exist (Audiobookshelf -> AU). Background colour is hashed from the name for stable per-app identity across visits. Adds an optional second icon attachment, icon_dark, alongside the main icon. When present, render a <picture> with a prefers-color-scheme: dark source so the browser swaps automatically; when absent, the main icon is used in both modes. The SVG sanitization, content-type fix, and size/format validation now run over both attachments uniformly. Bumps to 0.14.0. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
330 lines
18 KiB
Plaintext
330 lines
18 KiB
Plaintext
<div class="mb-6">
|
|
<% if flash[:client_id] %>
|
|
<div class="bg-yellow-50 dark:bg-yellow-900/30 border border-yellow-200 dark:border-yellow-700 rounded-md p-4 mb-6">
|
|
<h4 class="text-sm font-medium text-yellow-800 dark:text-yellow-200 mb-2">🔐 OIDC Client Credentials</h4>
|
|
<% if flash[:public_client] %>
|
|
<p class="text-xs text-yellow-700 dark:text-yellow-300 mb-3">This is a public client. Copy the client ID below.</p>
|
|
<% else %>
|
|
<p class="text-xs text-yellow-700 dark:text-yellow-300 mb-3">Copy these credentials now. The client secret will not be shown again.</p>
|
|
<% end %>
|
|
<div class="space-y-2">
|
|
<div>
|
|
<span class="text-xs font-medium text-yellow-700 dark:text-yellow-300">Client ID:</span>
|
|
</div>
|
|
<code class="block bg-yellow-100 dark:bg-yellow-900/50 px-3 py-2 rounded font-mono text-xs break-all"><%= flash[:client_id] %></code>
|
|
<% if flash[:client_secret] %>
|
|
<div class="mt-3">
|
|
<span class="text-xs font-medium text-yellow-700 dark:text-yellow-300">Client Secret:</span>
|
|
</div>
|
|
<code class="block bg-yellow-100 dark:bg-yellow-900/50 px-3 py-2 rounded font-mono text-xs break-all"><%= flash[:client_secret] %></code>
|
|
<% elsif flash[:public_client] %>
|
|
<div class="mt-3">
|
|
<span class="text-xs font-medium text-yellow-700 dark:text-yellow-300">Client Secret:</span>
|
|
</div>
|
|
<div class="bg-yellow-100 dark:bg-yellow-900/50 px-3 py-2 rounded text-xs text-yellow-600 dark:text-yellow-400">
|
|
Public clients do not have a client secret. PKCE is required.
|
|
</div>
|
|
<% end %>
|
|
|
|
<% env_lines = oidc_env_lines(@application, client_secret: flash[:client_secret]) %>
|
|
|
|
<div class="mt-4" data-controller="clipboard">
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs font-medium text-yellow-700 dark:text-yellow-300">Environment variables (copy & paste):</span>
|
|
<button type="button"
|
|
data-action="clipboard#copy"
|
|
class="text-xs font-medium text-yellow-700 dark:text-yellow-300 hover:text-yellow-900 dark:hover:text-yellow-100 underline">
|
|
<span data-clipboard-target="label">Copy</span>
|
|
</button>
|
|
</div>
|
|
<textarea data-clipboard-target="source"
|
|
readonly
|
|
rows="<%= env_lines.length %>"
|
|
class="block w-full bg-yellow-100 dark:bg-yellow-900/50 px-3 py-2 rounded font-mono text-xs text-gray-900 dark:text-gray-100 resize-none focus:outline-none focus:ring-1 focus:ring-yellow-500"><%= env_lines.join("\n") %></textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="sm:flex sm:items-start sm:justify-between">
|
|
<div class="flex items-start gap-4">
|
|
<% if @application.icon.attached? %>
|
|
<%= app_icon_picture @application, class: "h-16 w-16 rounded-lg object-cover border border-gray-200 dark:border-gray-700 shrink-0" %>
|
|
<% else %>
|
|
<%= render "shared/app_monogram", name: @application.name, class: "h-16 w-16 rounded-lg shrink-0" %>
|
|
<% end %>
|
|
<div>
|
|
<h1 class="text-2xl font-semibold text-gray-900 dark:text-gray-100"><%= @application.name %></h1>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-gray-400"><%= @application.description %></p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-4 sm:mt-0 flex gap-3">
|
|
<%= link_to "Edit", edit_admin_application_path(@application), class: "rounded-md bg-white dark:bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-900 dark:text-gray-200 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-600 hover:bg-gray-50 dark:hover:bg-gray-600" %>
|
|
<%= button_to "Delete", admin_application_path(@application), method: :delete, data: { turbo_confirm: "Are you sure?" }, class: "rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500" %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<!-- Basic Information -->
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100 mb-4">Basic Information</h3>
|
|
<dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Slug</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100"><code class="bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-2 py-1 rounded"><%= @application.slug %></code></dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Type</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% case @application.app_type %>
|
|
<% when "oidc" %>
|
|
<span class="inline-flex items-center rounded-full bg-purple-100 dark:bg-purple-900/50 px-2 py-1 text-xs font-medium text-purple-700 dark:text-purple-300">OIDC</span>
|
|
<% when "forward_auth" %>
|
|
<span class="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/50 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-300">Forward Auth</span>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Status</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @application.active? %>
|
|
<span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/50 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-300">Active</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-300">Inactive</span>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
<div class="sm:col-span-2">
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Landing URL</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @application.landing_url.present? %>
|
|
<%= link_to @application.landing_url, @application.landing_url, target: "_blank", rel: "noopener noreferrer", class: "text-blue-600 hover:text-blue-800 underline" %>
|
|
<% else %>
|
|
<span class="text-gray-400 dark:text-gray-500 italic">Not configured</span>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- OIDC Configuration (only for OIDC apps) -->
|
|
<% if @application.oidc? %>
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">OIDC Configuration</h3>
|
|
<%= button_to "Regenerate Credentials", regenerate_credentials_admin_application_path(@application), method: :post, data: { turbo_confirm: "This will invalidate the current credentials. Continue?" }, class: "text-sm text-red-600 hover:text-red-900" %>
|
|
</div>
|
|
<dl class="space-y-4">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Client Type</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @application.public_client? %>
|
|
<span class="inline-flex items-center rounded-full bg-blue-100 dark:bg-blue-900/50 px-2 py-1 text-xs font-medium text-blue-700 dark:text-blue-300">Public</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-300">Confidential</span>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">PKCE</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @application.requires_pkce? %>
|
|
<span class="inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/50 px-2 py-1 text-xs font-medium text-green-700 dark:text-green-300">Required</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-1 text-xs font-medium text-gray-700 dark:text-gray-300">Optional</span>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
<% unless flash[:client_id] %>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Client ID</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<code class="block bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-3 py-2 rounded font-mono text-xs break-all"><%= @application.client_id %></code>
|
|
</dd>
|
|
</div>
|
|
<% if @application.confidential_client? %>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Client Secret</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<div class="bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded text-xs text-gray-500 dark:text-gray-400 italic">
|
|
🔒 Client secret is stored securely and cannot be displayed
|
|
</div>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
To get a new client secret, use the "Regenerate Credentials" button above.
|
|
</p>
|
|
</dd>
|
|
</div>
|
|
<% else %>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Client Secret</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<div class="bg-blue-50 dark:bg-blue-900/30 px-3 py-2 rounded text-xs text-blue-600 dark:text-blue-400">
|
|
Public clients do not use a client secret. PKCE is required for authorization.
|
|
</div>
|
|
</dd>
|
|
</div>
|
|
<% end %>
|
|
<div>
|
|
<details class="border border-gray-200 dark:border-gray-700 rounded-lg">
|
|
<summary class="cursor-pointer bg-gray-50 dark:bg-gray-700 px-4 py-3 hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg text-sm font-medium text-gray-700 dark:text-gray-300">
|
|
Environment variables
|
|
</summary>
|
|
<div class="px-4 py-3" data-controller="clipboard">
|
|
<% env_lines = oidc_env_lines(@application) %>
|
|
<div class="flex items-center justify-between mb-2">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">
|
|
<%= @application.confidential_client? ? "Replace <your-client-secret> with your saved secret." : "Public client — no secret required." %>
|
|
</span>
|
|
<button type="button"
|
|
data-action="clipboard#copy"
|
|
class="text-xs font-medium text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 underline">
|
|
<span data-clipboard-target="label">Copy</span>
|
|
</button>
|
|
</div>
|
|
<textarea data-clipboard-target="source"
|
|
readonly
|
|
rows="<%= env_lines.length %>"
|
|
class="block w-full bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded font-mono text-xs text-gray-900 dark:text-gray-100 resize-none focus:outline-none focus:ring-1 focus:ring-gray-500"><%= env_lines.join("\n") %></textarea>
|
|
</div>
|
|
</details>
|
|
</div>
|
|
<% end %>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Redirect URIs</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @application.redirect_uris.present? %>
|
|
<% @application.parsed_redirect_uris.each do |uri| %>
|
|
<code class="block bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-3 py-2 rounded font-mono text-xs break-all mb-2"><%= uri %></code>
|
|
<% end %>
|
|
<% else %>
|
|
<span class="text-gray-400 dark:text-gray-500">No redirect URIs configured</span>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
|
|
Backchannel Logout URI
|
|
<% if @application.supports_backchannel_logout? %>
|
|
<span class="ml-2 inline-flex items-center rounded-full bg-green-100 dark:bg-green-900/50 px-2 py-0.5 text-xs font-medium text-green-700 dark:text-green-300">Enabled</span>
|
|
<% end %>
|
|
</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @application.backchannel_logout_uri.present? %>
|
|
<code class="block bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-3 py-2 rounded font-mono text-xs break-all"><%= @application.backchannel_logout_uri %></code>
|
|
<p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
|
|
When users log out, Clinch will send logout notifications to this endpoint for immediate session termination.
|
|
</p>
|
|
<% else %>
|
|
<span class="text-gray-400 dark:text-gray-500 italic">Not configured</span>
|
|
<p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
Backchannel logout is optional. Configure it if the application supports OpenID Connect Backchannel Logout.
|
|
</p>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Forward Auth Configuration (only for Forward Auth apps) -->
|
|
<% if @application.forward_auth? %>
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100 mb-4">Forward Auth Configuration</h3>
|
|
<dl class="space-y-4">
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Domain Pattern</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<code class="block bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-3 py-2 rounded font-mono text-xs"><%= @application.domain_pattern %></code>
|
|
</dd>
|
|
</div>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400">Headers Configuration</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @application.headers_config.present? && @application.headers_config.any? %>
|
|
<code class="block bg-gray-100 dark:bg-gray-700 dark:text-gray-200 px-3 py-2 rounded font-mono text-xs whitespace-pre-wrap"><%= JSON.pretty_generate(@application.headers_config) %></code>
|
|
<% else %>
|
|
<div class="bg-gray-100 dark:bg-gray-700 px-3 py-2 rounded text-xs text-gray-500 dark:text-gray-400">
|
|
Using default headers: X-Remote-User, X-Remote-Email, X-Remote-Name, X-Remote-Username, X-Remote-Groups, X-Remote-Admin
|
|
</div>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Group Access Control -->
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100 mb-4">Access Control</h3>
|
|
<div>
|
|
<dt class="text-sm font-medium text-gray-500 dark:text-gray-400 mb-2">Allowed Groups</dt>
|
|
<dd class="mt-1 text-sm text-gray-900 dark:text-gray-100">
|
|
<% if @allowed_groups.empty? %>
|
|
<div class="rounded-md bg-amber-50 dark:bg-amber-900/30 p-4">
|
|
<div class="flex">
|
|
<div class="ml-3">
|
|
<p class="text-sm text-amber-700 dark:text-amber-300">
|
|
No groups assigned — no one can access this application. Attach a group to grant access.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<ul class="divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-md">
|
|
<% @allowed_groups.each do |group| %>
|
|
<li class="px-4 py-3 flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= group.name %></p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400"><%= pluralize(group.users.count, "member") %></p>
|
|
</div>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% end %>
|
|
</dd>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users with access -->
|
|
<div class="bg-white dark:bg-gray-800 shadow sm:rounded-lg">
|
|
<div class="px-4 py-5 sm:p-6">
|
|
<h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100 mb-4">
|
|
Users with access (<%= @users_with_access.count %>)
|
|
</h3>
|
|
<% if @users_with_access.any? %>
|
|
<ul class="divide-y divide-gray-200 dark:divide-gray-700 border border-gray-200 dark:border-gray-700 rounded-md">
|
|
<% @users_with_access.each do |user| %>
|
|
<% via = user.groups & @application.allowed_groups %>
|
|
<li class="px-4 py-3 flex items-center justify-between">
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-gray-100"><%= user.email_address %></p>
|
|
<div class="flex flex-wrap gap-1 mt-1">
|
|
<% via.each do |g| %>
|
|
<span class="inline-flex items-center rounded-full bg-gray-100 dark:bg-gray-700 px-2 py-0.5 text-xs font-medium text-gray-700 dark:text-gray-300">via <%= g.name %></span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<%= link_to "View", admin_user_path(user), class: "text-blue-600 hover:text-blue-900 text-sm" %>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% else %>
|
|
<div class="rounded-md bg-gray-50 dark:bg-gray-700 p-4">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">No users currently have access. Attach a group to grant access.</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|