fix cf access login

webapp/includes/app.js

@@ -437,6 +437,35 @@ async function loadShortnames() {
     }
 }
 
+// Load shortnames grid for settings page
+async function loadShortnamesGrid() {
+    const container = document.getElementById('shortnamesContainer');
+    if (!container) return;
+
+    try {
+        const result = await api('shortnames_list');
+
+        if (result.success && result.data.length > 0) {
+            container.innerHTML = `
+                <div style="display: flex; flex-wrap: wrap; gap: 8px;">
+                    ${result.data.map(name => `
+                        <span class="badge badge-secondary" style="padding: 6px 12px; font-size: 13px;">
+                            ${escapeHtml(name)}
+                        </span>
+                    `).join('')}
+                </div>
+                <p style="margin-top: 12px; font-size: 12px; color: var(--text-tertiary);">
+                    Shortnames are automatically created when you add entries with a client short name.
+                </p>
+            `;
+        } else {
+            container.innerHTML = '<p style="color: var(--text-secondary); font-size: 14px;">No client shortnames found. Add entries with a client short name to create shortnames.</p>';
+        }
+    } catch (error) {
+        container.innerHTML = '<p style="color: var(--error); font-size: 14px;">Failed to load shortnames</p>';
+    }
+}
+
 // Load logos grid
 async function loadLogosGrid() {
     const grid = document.getElementById('logoGrid');

webapp/settings.php

@@ -396,16 +396,11 @@ require_once __DIR__ . '/includes/header.php';
                     </svg>
                     Client Shortnames
                 </h2>
-                <p class="advanced-section-desc">Manage client shortnames for organizing geofeed entries.</p>
+                <p class="advanced-section-desc">Client shortnames currently in use across geofeed entries.</p>
 
                 <div id="shortnamesContainer" style="margin-top: 16px;">
                     <div class="loading"><div class="spinner"></div></div>
                 </div>
-
-                <div style="display: flex; gap: 12px; margin-top: 16px;">
-                    <input type="text" class="form-input" id="newShortname" placeholder="New shortname" style="max-width: 200px;">
-                    <button class="btn btn-primary" onclick="addShortname()">Add Shortname</button>
-                </div>
             </div>
 
             <!-- Company Logos -->
@@ -627,6 +622,7 @@ document.addEventListener("DOMContentLoaded", function() {
             loadAuditLog();
             break;
         case "advanced":
+            loadShortnamesGrid();
             loadShortnames();
             loadLogosGrid();
             break;