From fbaf775e2a5fa53a06bbc68249e3fe1799ab80da Mon Sep 17 00:00:00 2001
From: jackyliu <jacky.liu@boardware.com>
Date: Tue, 2 Sep 2025 07:33:48 +0000
Subject: [PATCH] feat: Add API URL input field to login form for dynamic
 endpoint configuration

---
 frontend/applications.html | 64 +++++++++++++++++++++++++-------------
 frontend/login.html        |  8 +++--
 2 files changed, 48 insertions(+), 24 deletions(-)
diff --git a/frontend/applications.html b/frontend/applications.html
index 3e30680..f13dac4 100644
--- a/frontend/applications.html
+++ b/frontend/applications.html
@@ -5,7 +5,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>OCDP Application Manager</title>
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Lucide icons for UI elements -->
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
         body {
@@ -49,7 +48,6 @@
 </head>
 <body class="bg-gray-900 text-gray-200">
 
-<!-- Main Application Manager -->
 <div id="mainAppPage" class="container mx-auto p-4 md:p-8">
     <header class="mb-8 flex flex-col sm:flex-row justify-between items-center gap-4">
         <div class="flex items-center gap-4">
@@ -60,6 +58,7 @@
             </div>
         </div>
         <div class="w-full sm:w-auto mt-4 sm:mt-0">
+            <input type="text" id="apiBaseUrlInput" placeholder="Enter API Base URL (e.g., http://localhost:8000)" class="w-full sm:w-80 bg-gray-900/50 text-white border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition mb-2">
             <input type="text" id="tokenInput" placeholder="Enter JWT Token" class="w-full sm:w-80 bg-gray-900/50 text-white border border-gray-600 rounded-lg px-4 py-2 focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition">
         </div>
     </header>
@@ -71,19 +70,16 @@
         </div>
 
         <div id="contentAvailable" class="tab-content">
-            <!-- Loading indicator for available apps -->
             <p id="availableLoading" class="text-center text-blue-400 hidden">Loading available applications...</p>
             <div id="availableAppsList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
         </div>
         <div id="contentInstalled" class="tab-content hidden">
-            <!-- Loading indicator for installed apps -->
             <p id="installedLoading" class="text-center text-blue-400 hidden">Loading installed applications...</p>
             <div id="installedAppsList" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"></div>
         </div>
     </main>
 </div>
 
-<!-- Modals -->
 <div id="installModal" class="fixed inset-0 modal hidden justify-center items-center">
     <div class="card p-8 w-full max-w-lg">
         <h3 class="text-2xl font-bold text-white mb-4">Install Application</h3>
@@ -134,10 +130,11 @@
     const API_ORCHESTRATION_PATH = "/api/v1/orchestration";
     
     // Global variables
-    let API_BASE_URL = "http://10.6.14.233:8000";
+    let API_BASE_URL = "http://10.6.14.233:8000"; // Default value
     let TOKEN = "";
     
     // DOM Elements
+    const apiBaseUrlInput = document.getElementById('apiBaseUrlInput');
     const tokenInput = document.getElementById('tokenInput');
     const tabAvailable = document.getElementById('tabAvailable');
     const tabInstalled = document.getElementById('tabInstalled');
@@ -165,11 +162,11 @@
             renderAvailableApps(apps);
         } catch (error) {
             console.error("Error fetching available apps:", error);
-            let errorMessage = `Failed to load data: ${error.message}`;
+            let errorMessage = `Failed to load data from ${API_BASE_URL}: ${error.message}`;
             if (error instanceof TypeError && error.message === 'Failed to fetch') {
-                errorMessage = 'Network Error: Failed to fetch. Please ensure your API server is running and has CORS enabled.';
+                errorMessage = `Network Error: Failed to fetch from ${API_BASE_URL}. Please check the URL and ensure the API server is running with CORS enabled.`;
             }
-            availableAppsList.innerHTML = `<p class="text-center text-red-400">${errorMessage}</p>`;
+            availableAppsList.innerHTML = `<p class="text-center text-red-400 col-span-full">${errorMessage}</p>`;
         } finally {
             // Hide loading indicator
             availableLoading.classList.add('hidden');
@@ -193,11 +190,11 @@
             renderInstalledApps(apps);
         } catch (error) {
             console.error("Error fetching installed apps:", error);
-            let errorMessage = `Failed to load data: ${error.message}`;
+            let errorMessage = `Failed to load data from ${API_BASE_URL}: ${error.message}`;
             if (error instanceof TypeError && error.message === 'Failed to fetch') {
-                errorMessage = 'Network Error: Failed to fetch. Please ensure your API server is running and has CORS enabled.';
+                errorMessage = `Network Error: Failed to fetch from ${API_BASE_URL}. Please check the URL and ensure the API server is running with CORS enabled.`;
             }
-            installedAppsList.innerHTML = `<p class="text-center text-red-400">${errorMessage}</p>`;
+            installedAppsList.innerHTML = `<p class="text-center text-red-400 col-span-full">${errorMessage}</p>`;
         } finally {
             // Hide loading indicator
             installedLoading.classList.add('hidden');
@@ -224,7 +221,6 @@
     }
     
     async function uninstallRelease(namespace, app_template_name, mode) {
-        // Use a custom modal instead of alert/confirm
         if (!confirm(`Are you sure you want to uninstall the Helm release for ${app_template_name}?`)) return;
         try {
             const response = await fetch(`${API_BASE_URL}${API_ORCHESTRATION_PATH}/application-instances/${namespace}/${app_template_name}?mode=${mode}`, {
@@ -243,7 +239,6 @@
     }
 
     async function deleteNamespace(namespace) {
-        // Use a custom modal instead of alert/confirm
         if (!confirm(`WARNING: This will permanently delete the entire namespace '${namespace}' and all its resources.'`)) return;
         try {
             const response = await fetch(`${API_BASE_URL}${API_ORCHESTRATION_PATH}/application-instances/${namespace}`, {
@@ -370,7 +365,6 @@
             try {
                 userOverrides = JSON.parse(userOverridesText);
             } catch (error) {
-                // Use a custom modal instead of alert
                 showResultModal("Invalid JSON for user overrides.", "Please ensure your JSON is correctly formatted.", "error");
                 return;
             }
@@ -440,6 +434,8 @@
 
     function viewStatusDetails(namespace, app_template_name, mode) {
         document.getElementById('statusContent').innerHTML = `<p class="text-center text-blue-400">Loading status...</p>`;
+        statusModal.classList.remove('hidden');
+        statusModal.classList.add('flex');
         fetchAndRenderStatus(namespace, app_template_name, mode);
     }
 
@@ -462,21 +458,45 @@
     tabAvailable.addEventListener('click', () => switchTab('tabAvailable'));
     tabInstalled.addEventListener('click', () => switchTab('tabInstalled'));
 
-    // --- Added: Real-time token update on input ---
+    apiBaseUrlInput.addEventListener('input', (e) => {
+        API_BASE_URL = e.target.value;
+        localStorage.setItem('apiBaseUrl', API_BASE_URL);
+        // Refresh the current tab's data when URL changes
+        if (tabAvailable.classList.contains('active')) {
+            fetchAvailableApps();
+        } else {
+            fetchInstalledApps();
+        }
+    });
+    
     tokenInput.addEventListener('input', (e) => {
         TOKEN = e.target.value;
+        localStorage.setItem('jwtToken', TOKEN);
+        // Refresh installed apps when token changes, as it's required for auth
+        if (tabInstalled.classList.contains('active')) {
+            fetchInstalledApps();
+        }
     });
 
-    // Initial page load check
+    // Initial page load
     window.onload = () => {
-        // The API_BASE_URL is now a default value and can be manually changed.
-        // We'll also remove the token from localStorage for a clean start.
-        localStorage.removeItem('jwtToken');
-        localStorage.removeItem('apiBaseUrl');
+        // Load saved API URL or use default
+        const savedApiUrl = localStorage.getItem('apiBaseUrl');
+        if (savedApiUrl) {
+            API_BASE_URL = savedApiUrl;
+        }
+        apiBaseUrlInput.value = API_BASE_URL;
+
+        // Load saved token
+        const savedToken = localStorage.getItem('jwtToken');
+        if (savedToken) {
+            TOKEN = savedToken;
+            tokenInput.value = TOKEN;
+        }
         
         switchTab('tabAvailable'); // Default to the "Available Applications" tab
     };
 
 </script>
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/frontend/login.html b/frontend/login.html
index f31e357..2c00a34 100644
--- a/frontend/login.html
+++ b/frontend/login.html
@@ -41,6 +41,10 @@
             </header>
             
             <form id="loginForm" class="space-y-4">
+                <div>
+                    <label for="apiUrl" class="block text-sm font-medium text-gray-300">API URL</label>
+                    <input type="text" id="apiUrl" name="apiUrl" value="http://127.0.0.1:8000/api/v1/auth/login" class="mt-1 block w-full bg-gray-900/50 border border-gray-600 rounded-md shadow-sm p-2 text-white focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., http://your-domain.com/api/v1/auth/login" required>
+                </div>
                 <div>
                     <label for="username" class="block text-sm font-medium text-gray-300">Username</label>
                     <input type="text" id="username" name="username" class="mt-1 block w-full bg-gray-900/50 border border-gray-600 rounded-md shadow-sm p-2 text-white focus:ring-blue-500 focus:border-blue-500" required>
@@ -73,9 +77,8 @@
     </div>
 
     <script>
-        const API_URL = "http://10.6.14.233:8000/api/v1/auth/login";
-        
         const loginForm = document.getElementById('loginForm');
+        const apiUrlInput = document.getElementById('apiUrl');
         const usernameInput = document.getElementById('username');
         const passwordInput = document.getElementById('password');
         const resultContainer = document.getElementById('resultContainer');
@@ -87,6 +90,7 @@
         loginForm.addEventListener('submit', async (e) => {
             e.preventDefault();
 
+            const API_URL = apiUrlInput.value;
             const username = usernameInput.value;
             const password = passwordInput.value;
 
