clinch/app/views/admin/applications/show.html.erb

<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 %>
      </div>
    </div>
  <% end %>

  <div class="sm:flex sm:items-start sm:justify-between">
    <div class="flex items-start gap-4">
      <% if @application.icon.attached? %>
        <%= image_tag @application.icon, class: "h-16 w-16 rounded-lg object-cover border border-gray-200 dark:border-gray-700 shrink-0", alt: "#{@application.name} icon" %>
      <% else %>
        <div class="h-16 w-16 rounded-lg bg-gray-100 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 flex items-center justify-center shrink-0">
          <svg class="h-8 w-8 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
          </svg>
        </div>
      <% 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 %>
          <% 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-blue-50 dark:bg-blue-900/30 p-4">
              <div class="flex">
                <div class="ml-3">
                  <p class="text-sm text-blue-700 dark:text-blue-300">
                    No groups assigned - all active users can access this application.
                  </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>
</div>