Fix CSP errors - migrate inline JS to stimulus controllers. Add a URL for applications so users can discover them

.env.example

@@ -19,6 +19,30 @@ SMTP_ENABLE_STARTTLS=true
 CLINCH_HOST=http://localhost:3000
 CLINCH_FROM_EMAIL=noreply@example.com
 
+# WebAuthn / Passkey Configuration
+# Required for passkeys to work in production (HTTPS required)
+#
+# CLINCH_RP_ID is the Relying Party Identifier - the domain that owns the passkeys
+# - If your site is auth.example.com, use either "auth.example.com" or "example.com"
+# - Using parent domain (e.g., "example.com") allows passkeys to work across all subdomains
+# - Using subdomain (e.g., "auth.example.com") restricts passkeys to that specific subdomain
+#
+# CLINCH_RP_NAME is shown to users when creating/using passkeys
+#
+# Examples:
+#   For https://auth.example.com:
+#     CLINCH_HOST=https://auth.example.com
+#     CLINCH_RP_ID=example.com
+#     CLINCH_RP_NAME="Example Company"
+#
+#   For https://sso.mycompany.com:
+#     CLINCH_HOST=https://sso.mycompany.com
+#     CLINCH_RP_ID=mycompany.com
+#     CLINCH_RP_NAME="My Company Identity"
+#
+CLINCH_RP_ID=localhost
+CLINCH_RP_NAME="Clinch Identity Provider"
+
 # DNS Rebinding Protection Configuration
 # Set to service name (e.g., 'clinch') if running in same Docker compose as Caddy
 CLINCH_DOCKER_SERVICE_NAME=

app/controllers/admin/applications_controller.rb

@@ -99,7 +99,7 @@ module Admin
     def application_params
       params.require(:application).permit(
         :name, :slug, :app_type, :active, :redirect_uris, :description, :metadata,
-        :domain_pattern, headers_config: {}
+        :domain_pattern, :landing_url, headers_config: {}
       )
     end
   end

app/controllers/dashboard_controller.rb

@@ -8,5 +8,10 @@ class DashboardController < ApplicationController
 
     # User must be authenticated
     @user = Current.session.user
+
+    # Load user's accessible applications
+    @applications = Application.active.select do |app|
+      app.user_allowed?(@user)
+    end
   end
 end

app/javascript/controllers/login_form_controller.js

@@ -0,0 +1,92 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Handles login form UI changes based on WebAuthn availability
+export default class extends Controller {
+  static targets = ["webauthnSection", "passwordSection", "statusMessage", "loadingOverlay"]
+
+  connect() {
+    // Listen for WebAuthn availability events from the webauthn controller
+    this.element.addEventListener('webauthn:webauthn-available', this.handleWebAuthnAvailable.bind(this));
+
+    // Listen for WebAuthn registration events (from profile page)
+    this.element.addEventListener('webauthn:passkey-registered', this.handlePasskeyRegistered.bind(this));
+
+    // Listen for authentication start/end to show/hide loading
+    document.addEventListener('webauthn:authenticate-start', this.showLoading.bind(this));
+    document.addEventListener('webauthn:authenticate-end', this.hideLoading.bind(this));
+  }
+
+  disconnect() {
+    // Clean up event listeners
+    document.removeEventListener('webauthn:authenticate-start', this.showLoading.bind(this));
+    document.removeEventListener('webauthn:authenticate-end', this.hideLoading.bind(this));
+  }
+
+  handleWebAuthnAvailable(event) {
+    const detail = event.detail;
+
+    if (!this.hasWebauthnSectionTarget || !this.hasPasswordSectionTarget) {
+      return;
+    }
+
+    if (detail.hasWebauthn) {
+      this.webauthnSectionTarget.classList.remove('hidden');
+
+      // If WebAuthn is required, hide password section
+      if (detail.requiresWebauthn) {
+        this.passwordSectionTarget.classList.add('hidden');
+      } else {
+        // Show both options with a divider
+        this.passwordSectionTarget.classList.add('border-t', 'pt-4', 'mt-4');
+        this.addOrDivider();
+      }
+    }
+  }
+
+  handlePasskeyRegistered(event) {
+    if (!this.hasStatusMessageTarget) {
+      return;
+    }
+
+    // Show success message
+    this.statusMessageTarget.className = 'mt-4 p-3 rounded-md bg-green-50 text-green-800 border border-green-200';
+    this.statusMessageTarget.textContent = 'Passkey registered successfully!';
+    this.statusMessageTarget.classList.remove('hidden');
+
+    // Hide after 3 seconds
+    setTimeout(() => {
+      this.statusMessageTarget.classList.add('hidden');
+    }, 3000);
+  }
+
+  showLoading() {
+    if (this.hasLoadingOverlayTarget) {
+      this.loadingOverlayTarget.classList.remove('hidden');
+    }
+  }
+
+  hideLoading() {
+    if (this.hasLoadingOverlayTarget) {
+      this.loadingOverlayTarget.classList.add('hidden');
+    }
+  }
+
+  addOrDivider() {
+    // Check if divider already exists
+    if (this.element.querySelector('.login-divider')) {
+      return;
+    }
+
+    const orDiv = document.createElement('div');
+    orDiv.className = 'relative my-4 login-divider';
+    orDiv.innerHTML = `
+      <div class="absolute inset-0 flex items-center">
+        <div class="w-full border-t border-gray-300"></div>
+      </div>
+      <div class="relative flex justify-center text-sm">
+        <span class="px-2 bg-white text-gray-500">Or</span>
+      </div>
+    `;
+    this.webauthnSectionTarget.parentNode.insertBefore(orDiv, this.passwordSectionTarget);
+  }
+}

app/javascript/controllers/modal_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Generic modal controller for showing/hiding modal dialogs
+export default class extends Controller {
+  static targets = ["dialog"]
+
+  show(event) {
+    // If called from a button with data-modal-id, find and show that modal
+    const modalId = event.currentTarget?.dataset?.modalId;
+    if (modalId) {
+      const modal = document.getElementById(modalId);
+      if (modal) {
+        modal.classList.remove("hidden");
+      }
+    } else if (this.hasDialogTarget) {
+      // Otherwise show the dialog target
+      this.dialogTarget.classList.remove("hidden");
+    } else {
+      // Or show this element itself
+      this.element.classList.remove("hidden");
+    }
+  }
+
+  hide() {
+    if (this.hasDialogTarget) {
+      this.dialogTarget.classList.add("hidden");
+    } else {
+      this.element.classList.add("hidden");
+    }
+  }
+
+  // Close modal when clicking backdrop
+  closeOnBackdrop(event) {
+    // Only close if clicking directly on the backdrop (not child elements)
+    if (event.target === this.element || event.target.classList.contains('modal-backdrop')) {
+      this.hide();
+    }
+  }
+
+  // Close modal on Escape key
+  closeOnEscape(event) {
+    if (event.key === "Escape") {
+      this.hide();
+    }
+  }
+}

app/models/application.rb

@@ -15,6 +15,7 @@ class Application < ApplicationRecord
   validates :client_id, uniqueness: { allow_nil: true }
   validates :client_secret, presence: true, if: :oidc?
   validates :domain_pattern, presence: true, uniqueness: { case_sensitive: false }, if: :forward_auth?
+  validates :landing_url, format: { with: URI::regexp(%w[http https]), allow_nil: true, message: "must be a valid URL" }
 
   normalizes :slug, with: ->(slug) { slug.strip.downcase }
   normalizes :domain_pattern, with: ->(pattern) { pattern&.strip&.downcase }

app/views/admin/applications/_form.html.erb

@@ -34,6 +34,12 @@
     <%= form.text_area :description, rows: 3, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "Optional description of this application" %>
   </div>
 
+  <div>
+    <%= form.label :landing_url, "Landing URL", class: "block text-sm font-medium text-gray-700" %>
+    <%= form.url_field :landing_url, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", placeholder: "https://app.example.com" %>
+    <p class="mt-1 text-sm text-gray-500">The main URL users will visit to access this application. This will be shown as a link on their dashboard.</p>
+  </div>
+
   <div>
     <%= form.label :app_type, "Application Type", class: "block text-sm font-medium text-gray-700" %>
     <%= form.select :app_type, [["OpenID Connect (OIDC)", "oidc"], ["Forward Auth (Reverse Proxy)", "forward_auth"]], {}, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm", disabled: application.persisted? %>

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

@@ -59,6 +59,16 @@
             <% end %>
           </dd>
         </div>
+        <div class="sm:col-span-2">
+          <dt class="text-sm font-medium text-gray-500">Landing URL</dt>
+          <dd class="mt-1 text-sm text-gray-900">
+            <% 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 italic">Not configured</span>
+            <% end %>
+          </dd>
+        </div>
       </dl>
     </div>
   </div>

app/views/dashboard/index.html.erb

@@ -93,6 +93,64 @@
   <% end %>
 </div>
 
+<!-- Your Applications Section -->
+<div class="mt-8">
+  <h2 class="text-xl font-semibold text-gray-900 mb-4">Your Applications</h2>
+
+  <% if @applications.any? %>
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
+      <% @applications.each do |app| %>
+        <div class="bg-white rounded-lg border border-gray-200 shadow-sm hover:shadow-md transition">
+          <div class="p-6">
+            <div class="flex items-center justify-between mb-3">
+              <h3 class="text-lg font-semibold text-gray-900 truncate">
+                <%= app.name %>
+              </h3>
+              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
+                <% if app.oidc? %>
+                  bg-blue-100 text-blue-800
+                <% else %>
+                  bg-green-100 text-green-800
+                <% end %>">
+                <%= app.app_type.humanize %>
+              </span>
+            </div>
+
+            <p class="text-sm text-gray-600 mb-4">
+              <% if app.oidc? %>
+                OIDC Application
+              <% else %>
+                ForwardAuth Protected Application
+              <% end %>
+            </p>
+
+            <% if app.landing_url.present? %>
+              <%= link_to "Open Application", app.landing_url,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  class: "w-full flex justify-center items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition" %>
+            <% else %>
+              <div class="text-sm text-gray-500 italic">
+                No landing URL configured
+              </div>
+            <% end %>
+          </div>
+        </div>
+      <% end %>
+    </div>
+  <% else %>
+    <div class="bg-gray-50 rounded-lg border border-gray-200 p-8 text-center">
+      <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
+      </svg>
+      <h3 class="mt-4 text-lg font-medium text-gray-900">No applications available</h3>
+      <p class="mt-2 text-sm text-gray-500">
+        You don't have access to any applications yet. Contact your administrator if you think this is an error.
+      </p>
+    </div>
+  <% end %>
+</div>
+
 <% if @user.admin? %>
   <div class="mt-8">
     <h2 class="text-xl font-semibold text-gray-900 mb-4">Admin Quick Actions</h2>

app/views/profiles/show.html.erb

@@ -102,10 +102,16 @@
             </div>
           </div>
           <div class="mt-4 flex gap-3">
-            <button type="button" onclick="showDisable2FAModal()" class="inline-flex items-center rounded-md border border-red-300 bg-white px-4 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">
+            <button type="button"
+                    data-action="click->modal#show"
+                    data-modal-id="disable-2fa-modal"
+                    class="inline-flex items-center rounded-md border border-red-300 bg-white px-4 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">
               Disable 2FA
             </button>
-            <button type="button" onclick="showViewBackupCodesModal()" class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 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">
+            <button type="button"
+                    data-action="click->modal#show"
+                    data-modal-id="view-backup-codes-modal"
+                    class="inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 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">
               View Backup Codes
             </button>
           </div>
@@ -119,7 +125,10 @@
   </div>
 
   <!-- Disable 2FA Modal -->
-  <div id="disable-2fa-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
+  <div id="disable-2fa-modal"
+       data-controller="modal"
+       data-action="click->modal#closeOnBackdrop keyup@window->modal#closeOnEscape"
+       class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
     <div class="bg-white rounded-lg px-4 pt-5 pb-4 shadow-xl max-w-md w-full">
       <div class="sm:flex sm:items-start">
         <div class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
@@ -143,7 +152,9 @@
             <div class="mt-4 flex gap-3">
               <%= form.submit "Disable 2FA",
                   class: "inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2" %>
-              <button type="button" onclick="hideDisable2FAModal()" class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 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">
+              <button type="button"
+                      data-action="click->modal#hide"
+                      class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 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">
                 Cancel
               </button>
             </div>
@@ -154,7 +165,10 @@
   </div>
 
   <!-- View Backup Codes Modal -->
-  <div id="view-backup-codes-modal" class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
+  <div id="view-backup-codes-modal"
+       data-controller="modal"
+       data-action="click->modal#closeOnBackdrop keyup@window->modal#closeOnEscape"
+       class="hidden fixed inset-0 bg-gray-500 bg-opacity-75 flex items-center justify-center z-50">
     <div class="bg-white rounded-lg px-4 pt-5 pb-4 shadow-xl max-w-md w-full">
       <div>
         <h3 class="text-lg font-medium leading-6 text-gray-900">View Backup Codes</h3>
@@ -172,7 +186,9 @@
           <div class="mt-4 flex gap-3">
             <%= form.submit "View Codes",
                 class: "inline-flex justify-center rounded-md border border-transparent bg-blue-600 px-4 py-2 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" %>
-            <button type="button" onclick="hideViewBackupCodesModal()" class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 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">
+            <button type="button"
+                    data-action="click->modal#hide"
+                    class="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 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">
               Cancel
             </button>
           </div>
@@ -302,22 +318,4 @@
       </div>
     </div>
   </div>
-
-  <script>
-    function showDisable2FAModal() {
-      document.getElementById('disable-2fa-modal').classList.remove('hidden');
-    }
-
-    function hideDisable2FAModal() {
-      document.getElementById('disable-2fa-modal').classList.add('hidden');
-    }
-
-    function showViewBackupCodesModal() {
-      document.getElementById('view-backup-codes-modal').classList.remove('hidden');
-    }
-
-    function hideViewBackupCodesModal() {
-      document.getElementById('view-backup-codes-modal').classList.add('hidden');
-    }
-  </script>
 </div>

app/views/sessions/new.html.erb

@@ -1,4 +1,4 @@
-<div class="mx-auto md:w-2/3 w-full" data-controller="webauthn" data-webauthn-check-url-value="/webauthn/check">
+<div class="mx-auto md:w-2/3 w-full" data-controller="webauthn login-form" data-webauthn-check-url-value="/webauthn/check">
   <div class="mb-8">
     <h1 class="font-bold text-4xl">Sign in to Clinch</h1>
   </div>
@@ -18,7 +18,7 @@
     </div>
 
     <!-- WebAuthn section - initially hidden -->
-    <div id="webauthn-section" class="my-5 hidden">
+    <div id="webauthn-section" data-login-form-target="webauthnSection" class="my-5 hidden">
       <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4">
         <div class="flex items-center">
           <svg class="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -41,7 +41,7 @@
     </div>
 
     <!-- Password section - shown by default, hidden if WebAuthn is required -->
-    <div id="password-section">
+    <div id="password-section" data-login-form-target="passwordSection">
       <div class="my-5">
         <%= form.label :password, class: "block font-medium text-sm text-gray-700" %>
         <%= form.password_field :password,
@@ -64,7 +64,7 @@
   <% end %>
 
   <!-- Loading overlay -->
-  <div id="loading-overlay" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
+  <div id="loading-overlay" data-login-form-target="loadingOverlay" class="hidden fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50">
     <div class="bg-white rounded-lg p-6 flex items-center">
       <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
@@ -75,76 +75,5 @@
   </div>
 
   <!-- Status messages -->
-  <div id="status-message" class="hidden mt-4 p-3 rounded-md"></div>
+  <div id="status-message" data-login-form-target="statusMessage" class="hidden mt-4 p-3 rounded-md"></div>
 </div>
-
-<script>
-document.addEventListener('DOMContentLoaded', function() {
-  const webauthnController = document.querySelector('[data-controller="webauthn"]');
-
-  if (webauthnController) {
-    // Listen for WebAuthn availability events
-    webauthnController.addEventListener('webauthn:webauthn-available', function(event) {
-      console.debug("Received webauthn-available event:", event.detail);
-      const detail = event.detail;
-      const webauthnSection = document.getElementById('webauthn-section');
-      const passwordSection = document.getElementById('password-section');
-
-      if (detail.hasWebauthn) {
-        console.debug("Showing WebAuthn section");
-        webauthnSection.classList.remove('hidden');
-
-        // If WebAuthn is required, hide password section
-        if (detail.requiresWebauthn) {
-          passwordSection.classList.add('hidden');
-        } else {
-          // Show both options
-          passwordSection.classList.add('border-t pt-4 mt-4');
-
-          // Add an "or" divider
-          const orDiv = document.createElement('div');
-          orDiv.className = 'relative my-4';
-          orDiv.innerHTML = `
-            <div class="absolute inset-0 flex items-center">
-              <div class="w-full border-t border-gray-300"></div>
-            </div>
-            <div class="relative flex justify-center text-sm">
-              <span class="px-2 bg-white text-gray-500">Or</span>
-            </div>
-          `;
-          webauthnSection.parentNode.insertBefore(orDiv, webauthnSection);
-        }
-      } else {
-        console.debug("WebAuthn not available, keeping section hidden");
-      }
-    });
-
-    // Listen for WebAuthn registration events (from profile page)
-    webauthnController.addEventListener('webauthn:passkey-registered', function(event) {
-      // Show success message
-      const statusMessage = document.getElementById('status-message');
-      statusMessage.className = 'mt-4 p-3 rounded-md bg-green-50 text-green-800 border border-green-200';
-      statusMessage.textContent = 'Passkey registered successfully!';
-      statusMessage.classList.remove('hidden');
-
-      // Hide after 3 seconds
-      setTimeout(() => {
-        statusMessage.classList.add('hidden');
-      }, 3000);
-    });
-  }
-
-  // Loading overlay management
-  function showLoading() {
-    document.getElementById('loading-overlay').classList.remove('hidden');
-  }
-
-  function hideLoading() {
-    document.getElementById('loading-overlay').classList.add('hidden');
-  }
-
-  // Show loading when WebAuthn authentication starts
-  document.addEventListener('webauthn:authenticate-start', showLoading);
-  document.addEventListener('webauthn:authenticate-end', hideLoading);
-});
-</script>

db/migrate/20251104054909_add_landing_url_to_applications.rb

@@ -0,0 +1,5 @@
+class AddLandingUrlToApplications < ActiveRecord::Migration[8.1]
+  def change
+    add_column :applications, :landing_url, :string
+  end
+end

db/schema.rb

@@ -10,7 +10,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema[8.1].define(version: 2025_11_04_042206) do
+ActiveRecord::Schema[8.1].define(version: 2025_11_04_054909) do
   create_table "application_groups", force: :cascade do |t|
     t.integer "application_id", null: false
     t.datetime "created_at", null: false
@@ -30,6 +30,7 @@ ActiveRecord::Schema[8.1].define(version: 2025_11_04_042206) do
     t.text "description"
     t.string "domain_pattern"
     t.json "headers_config", default: {}, null: false
+    t.string "landing_url"
     t.text "metadata"
     t.string "name", null: false
     t.text "redirect_uris"