Update app.py

app.py

@@ -14,10 +14,7 @@ script_dir = Path(__file__).resolve().parent
 env_path = script_dir / '.env'
 load_dotenv(dotenv_path=env_path)
 
-script_dir = Path(__file__).resolve().parent
-env_path = script_dir / '.env'
-load_dotenv(dotenv_path=env_path)
-
+# Helper functions (unchanged)
 def fetch_api_endpoints_yaml(spec_url):
     try:
         response = requests.get(spec_url)
@@ -39,21 +36,17 @@ def fetch_api_endpoints_yaml(spec_url):
         if not methods or not isinstance(methods, dict):
             continue
         
-        # Get common parameters defined at path level
         common_params = methods.get("parameters", [])
-        
         for method, details in methods.items():
             if method.lower() not in valid_methods:
                 continue
             
-            # Combine path-level and method-level parameters
             method_params = details.get("parameters", [])
             all_params = common_params + method_params
-            
             endpoint_info = {
                 "summary": details.get("summary", ""),
                 "description": details.get("description", ""),
-                "parameters": all_params  # Include all parameters
+                "parameters": all_params
             }
             endpoints[path][method.lower()] = endpoint_info
     return endpoints
@@ -78,21 +71,17 @@ def fetch_api_endpoints_json(spec_url):
         if not methods or not isinstance(methods, dict):
             continue
         
-        # Get common parameters defined at path level
         common_params = methods.get("parameters", [])
-        
         for method, details in methods.items():
             if method.lower() not in valid_methods:
                 continue
             
-            # Combine path-level and method-level parameters
             method_params = details.get("parameters", [])
             all_params = common_params + method_params
-            
             endpoint_info = {
                 "summary": details.get("summary", ""),
                 "description": details.get("description", ""),
-                "parameters": all_params  # Include all parameters
+                "parameters": all_params
             }
             endpoints[path][method.lower()] = endpoint_info
     return endpoints
@@ -111,790 +100,740 @@ def get_endpoints(spec_choice):
     return fetch_api_endpoints_yaml(spec_url)
 
 def group_endpoints(endpoints, spec_choice):
-    """Group endpoints with special handling for Okta API"""
     groups = {}
-    
-    # Special handling for Okta endpoints
     if spec_choice == "Okta (JSON)":
         for path, methods in endpoints.items():
-            # Remove /api/v1/ prefix and get the first segment
             clean_path = path.replace('/api/v1/', '')
             segments = clean_path.strip("/").split("/")
             group_key = segments[0] if segments else "other"
-            
             if group_key not in groups:
                 groups[group_key] = {}
             groups[group_key][path] = methods
     else:
-        # Original grouping logic for other APIs
         for path, methods in endpoints.items():
             segments = path.strip("/").split("/")
             group_key = segments[0] if segments[0] != "" else "other"
             if group_key not in groups:
                 groups[group_key] = {}
             groups[group_key][path] = methods
-    
     return groups
 
 def verify_credentials(spec_choice, api_base_url, grant_type=None, client_id=None, 
                       client_secret=None, api_token=None, iiq_username=None, iiq_password=None):
-    """Verify API credentials using existing handlers"""
-    
-    # Base URL validation
     if not api_base_url or not api_base_url.strip():
         return (
-            gr.update(value="❌ API Base URL is required", visible=True),
-            False,  # endpoints_vis
-            False   # fetch_vis
+            gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> API Base URL is required</div>", visible=True),
+            False,
+            False
         )
 
     try:
-        # Credential validation based on API type
         if spec_choice == "Okta (JSON)":
             if not api_token or not api_token.strip():
                 return (
-                    gr.update(value="❌ API Token is required", visible=True),
+                    gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> API Token is required</div>", visible=True),
                     False,
                     False
                 )
-            
-            # Test Okta connection
             result = handle_okta_call(api_base_url, api_token, "", {}, ["/api/v1/users/me"])
+            
+            # Check the response for the specific endpoint
+            if isinstance(result[0], dict) and "/api/v1/users/me" in result[0]:
+                response = result[0]["/api/v1/users/me"]
+                
+                # Check if response is an error string
+                if isinstance(response, str) and response.startswith("Error:"):
+                    return (
+                        gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {response}</div>", visible=True),
+                        False,
+                        False
+                    )
+                
+                # Check if response is an error dict
+                if isinstance(response, dict) and "error" in response:
+                    return (
+                        gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {response['error']}</div>", visible=True),
+                        False,
+                        False
+                    )
+            else:
+                # Unexpected response format
+                return (
+                    gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> Invalid API response format from Okta</div>", visible=True),
+                    False,
+                    False
+                )
 
         elif spec_choice == "SailPoint IdentityNow (YAML)":
-            # Validate all required IdentityNow credentials
-            if not all([
-                grant_type and grant_type.strip(),
-                client_id and client_id.strip(),
-                client_secret and client_secret.strip()
-            ]):
+            if not all([grant_type and grant_type.strip(), client_id and client_id.strip(), client_secret and client_secret.strip()]):
                 return (
-                    gr.update(value="❌ All IdentityNow credentials (Grant Type, Client ID, Client Secret) are required", visible=True),
+                    gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> All IdentityNow credentials are required</div>", visible=True),
                     False,
                     False
                 )
+            result = handle_identitynow_call(api_base_url, grant_type, client_id, client_secret, "", {}, ["/beta/test-connection"])
             
-            # Test IdentityNow connection
-            result = handle_identitynow_call(
-                api_base_url, 
-                grant_type, 
-                client_id, 
-                client_secret,
-                "",  # session_id
-                {},  # param_values
-                []   # endpoints
-            )
+            # Check the response
+            if isinstance(result[0], dict):
+                # Check for direct error in response
+                if "error" in result[0]:
+                    return (
+                        gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {result[0]['error']}</div>", visible=True),
+                        False,
+                        False
+                    )
+                
+                # Check for endpoint-specific error
+                if "/beta/test-connection" in result[0]:
+                    response = result[0]["/beta/test-connection"]
+                    if isinstance(response, str) and response.startswith("Error:"):
+                        return (
+                            gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {response}</div>", visible=True),
+                            False,
+                            False
+                        )
+                    if isinstance(response, dict) and "error" in response:
+                        return (
+                            gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {response['error']}</div>", visible=True),
+                            False,
+                            False
+                        )
+            else:
+                return (
+                    gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> Invalid API response format from IdentityNow</div>", visible=True),
+                    False,
+                    False
+                )
 
         elif spec_choice == "Sailpoint IIQ (YAML)":
-            # Validate IIQ credentials
-            if not all([
-                iiq_username and iiq_username.strip(),
-                iiq_password and iiq_password.strip()
-            ]):
+            if not all([iiq_username and iiq_username.strip(), iiq_password and iiq_password.strip()]):
                 return (
-                    gr.update(value="❌ Both IIQ username and password are required", visible=True),
+                    gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> Both IIQ username and password are required</div>", visible=True),
                     False,
                     False
                 )
+            result = handle_iiq_call(api_base_url, iiq_username, iiq_password, "", {}, ["/ping"])
             
-            # Test IIQ connection
-            result = handle_iiq_call(
-                api_base_url, 
-                iiq_username, 
-                iiq_password,
-                "",  # session_id
-                {},  # param_values
-                []   # endpoints
-            )
-        else:
-            return (
-                gr.update(value="❌ Invalid API type selected", visible=True),
-                False,
-                False
-            )
-
-        # Validate API response
-        if not isinstance(result, tuple) or len(result) < 4:
-            return (
-                gr.update(value="❌ Invalid API response format", visible=True),
-                False,
-                False
-            )
-
-        if "error" in result[0]:
-            return (
-                gr.update(value=f"❌ Connection failed: {result[0]['error']}", visible=True),
-                False,
-                False
-            )
+            # Check the response
+            if isinstance(result[0], dict):
+                # Check for direct error in response
+                if "error" in result[0]:
+                    return (
+                        gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {result[0]['error']}</div>", visible=True),
+                        False,
+                        False
+                    )
+                
+                # Check for endpoint-specific error
+                if "/ping" in result[0]:
+                    response = result[0]["/ping"]
+                    if isinstance(response, str) and response.startswith("Error:"):
+                        return (
+                            gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {response}</div>", visible=True),
+                            False,
+                            False
+                        )
+                    if isinstance(response, dict) and "error" in response:
+                        return (
+                            gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> Connection failed: {response['error']}</div>", visible=True),
+                            False,
+                            False
+                        )
+            else:
+                return (
+                    gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> Invalid API response format from IIQ</div>", visible=True),
+                    False,
+                    False
+                )
 
-        # Success case
+        # If no error is detected and response is valid, assume success
         return (
-            gr.update(value="✅ API Connection successful! Credentials verified.", visible=True),
-            True,   # Show endpoints section
-            True    # Show fetch button
+            gr.update(value="<div class='success-message'><i class='fas fa-check-circle'></i> Credentials verified successfully!</div>", visible=True),
+            True,
+            True
         )
 
     except requests.exceptions.ConnectionError:
         return (
-            gr.update(value="❌ Connection Error: Could not reach the API. Please check the URL and your network connection.", visible=True),
+            gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> Could not reach the API. Check URL and network.</div>", visible=True),
             False,
             False
         )
     except Exception as e:
         return (
-            gr.update(value=f"❌ API Error: {str(e)}", visible=True),
+            gr.update(value=f"<div class='error-message'><i class='fas fa-exclamation-circle'></i> API Error: {str(e)}</div>", visible=True),
             False,
             False
         )
 
-# CSS to match dummy.html
+# Custom CSS (unchanged)
 custom_css = """
-    body, .gradio-container {
-        font-family: Arial, sans-serif;
-        background: #f3faf7;
-        color: #333
-    }
-    .container {
-        max-width: 800px;
-        margin: auto;
-        padding: 20px;
-        border-radius: 4px;
-        background: black;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
-    }
-    .container h1 {
-        color: White !important;
-    }
-    .title h1 {
-        color: #ff6347 !important;
-    }
-    .section {
-        margin-bottom: 20px;
-        padding-bottom: 10px;
-        border-bottom: 1px solid #eee;
-    }
-    .section h2 {
-        margin-top: 0;
-    }
-    .section #api_choice {
-        background: #ff6347;
-    }
-    .section-text #api_base_url {
-        background: #ff6347;
-    }
-    .section-acc #acc {
-        background: #ff6347;
-    }
-    .section-acc #lock {
-        background: gray;
-    }
-    .section-acc #unlock {
-        background: gray;
-    }
-    input[type="text"], select, .gr-textbox, .gr-dropdown {
-        width: 100%;
-        padding: 8px;
-        margin-bottom: 10px;
-        border: 1px solid #ccc;
-        border-radius: 4px;
-    }
-    .gr-button {
-        background-color: #007BFF;
-        color: #fff;
-        border: none;
-        padding: 10px 20px;
-        border-radius: 4px;
-        cursor: pointer;
-    }
-    .gr-textbox label {
-        color: black !important;
-    }
-    .gradio-container .label-wrap {
-        color: black !important;
-    }
-    .gr-button:disabled {
-        background-color: #ccc;
-        cursor: not-allowed;
-    }
-    .message {
-        margin-top: 10px;
-        padding: 8px;
-        border-radius: 4px;
-        font-size: 0.9em;
-    }
-    .success { background-color: #d4edda; color: #155724; }
-    .error { background-color: #f8d7da; color: #721c24; }
-    .endpoint { padding: 10px 0; border-bottom: 1px solid #eee; }
-    .endpoint:last-child { border-bottom: none; }
-    .endpoint-params { margin-left: 20px; margin-top: 5px; }
-    .results {
-        border: 1px solid #eee;
-        padding: 10px;
-        background: #fafafa;
-        margin-bottom: 10px;
-        white-space: pre;
-        font-family: monospace;
-    }
-    .download-btn {
-        margin-top: 10px;
-        padding: 5px 10px;
-        font-size: 0.9em;
-        background-color: #007BFF;
-        color: #fff;
-    }
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+
+body, .gradio-container {
+    font-family: 'Arial', sans-serif;
+    background: #f3f3f3;
+    color: #333;
+    margin: 0;
+    padding: 0;
+}
+
+.title {
+    text-align: center;
+    margin: 30px 0;
+    font-size: 2em;
+    color: #222;
+    animation: fadeIn 1s ease-in;
+}
+
+.api-cards {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+    margin-bottom: 30px;
+    animation: slideUp 0.5s ease-out;
+}
+
+.api-card {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    text-align: center;
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+    width: 200px;
+}
+
+.api-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
+}
+
+.api-card i {
+    font-size: 32px;
+    color: #007BFF;
+    margin-bottom: 10px;
+}
+
+.api-card h2 {
+    font-size: 18px;
+    margin: 10px 0;
+}
+
+.api-card p {
+    font-size: 14px;
+    color: #666;
+}
+
+.cred-section {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+    animation: fadeIn 0.5s ease-in;
+}
+
+.action-btn {
+    background-color: #007BFF;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.action-btn:hover {
+    background-color: #0056b3;
+}
+
+.loading-spinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 30px;
+    height: 30px;
+    animation: spin 1s linear infinite;
+    margin: 10px auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.success-message, .error-message {
+    padding: 10px;
+    border-radius: 5px;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    animation: slideIn 0.3s ease-out;
+}
+
+.success-message {
+    background: #d4edda;
+    color: #155724;
+}
+
+.error-message {
+    background: #f8d7da;
+    color: #721c24;
+}
+
+.endpoints-section, .param-group, .fetch-section, .results-section {
+    background: white;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+    margin-bottom: 20px;
+    animation: fadeIn 0.5s ease-in;
+}
+
+.custom-accordion {
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+.custom-accordion .gr-accordion-header {
+    background: #f9f9f9;
+    padding: 10px;
+    cursor: pointer;
+    font-weight: bold;
+}
+
+.custom-checkbox .gr-checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 5px;
+}
+
+.reset-btn {
+    background-color: #6c757d;
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.reset-btn:hover:enabled {
+    background-color: #5a6268;
+}
+
+.gr-json {
+    background: #f9f9f9;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    max-height: 400px;
+    overflow: auto;
+    font-family: monospace;
+}
+
+.download-btn {
+    background-color: #28a745;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+}
+
+.download-btn:hover {
+    background-color: #218838;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+@keyframes slideUp {
+    from { transform: translateY(20px); opacity: 0; }
+    to { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes slideIn {
+    from { transform: translateX(-20px); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+.banner {
+    background-color: #007BFF;
+    color: white;
+    padding: 20px;
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+}
 """
-text_box_css = """    
-    #api_base_url {
-    background: gr.themes.colors.red;
-    }
-    """
 
 with gr.Blocks(css=custom_css) as demo:
-    gr.Markdown("# Connect to Your Data Source", elem_classes="title")
+    gr.HTML("<div class='banner'>Data Connector Demo</div>")
 
-    # Session state
+    # Session states
     session_id_state = gr.State("")
-    confirmed_endpoints_state = gr.State([])
-    display_values_state = gr.State([])
     locked_endpoints_state = gr.State([])
+    required_params_count = gr.State(0)
+
+    # API Selection
+    # Define API options as a list of dictionaries
+    api_options = [
+        {"icon": "fa-cloud", "title": "Okta", "description": "Identity and Access Management", "value": "Okta (JSON)"},
+        {"icon": "fa-user-shield", "title": "SailPoint IdentityNow", "description": "Cloud Identity Governance", "value": "SailPoint IdentityNow (YAML)"},
+        {"icon": "fa-network-wired", "title": "Sailpoint IIQ", "description": "On-premise Identity Governance", "value": "Sailpoint IIQ (YAML)"},
+    ]
+
+    # Generate choices with plain text labels and corresponding values
+    choices = [(opt["title"], opt["value"]) for opt in api_options]
+
+    # Define the radio button component
+    api_choice = gr.Radio(
+        choices=choices,
+        label="",
+        type="value",
+        elem_classes="api-cards"
+    )
 
-    # API Selection Section
-    with gr.Group(elem_classes="section"):
-        gr.Markdown("### Select an API")
-        spec_choice = gr.Dropdown(
-            choices=["Okta (JSON)", "SailPoint IdentityNow (YAML)", "Sailpoint IIQ (YAML)"],
-            value="SailPoint IdentityNow (YAML)",
-            label="Select an API",
-            filterable=True,
-            elem_id="api_choice"
-        )
+    # Credential Sections
+    with gr.Column(visible=False, elem_classes="cred-section") as okta_cred:
+        api_base_url_okta = gr.Textbox(label="API Base URL", placeholder="e.g., https://your-okta-domain.okta.com")
+        api_token = gr.Textbox(label="API Token", type="password", placeholder="Enter your Okta API token")
 
-    # Credentials Section
-    with gr.Group(elem_classes="section-text"):
-        gr.Markdown("### Enter Credentials")
-        api_base_url = gr.Textbox(label="API Base URL", placeholder="Enter your API Base URL", elem_id="api_base_url")
-        
-        # Authentication inputs (dynamically shown)
-        with gr.Column(visible=True) as identitynow_auth:
-            grant_type = gr.Textbox(label="Grant Type", value="client_credentials", elem_id="api_base_url")
-            client_id = gr.Textbox(label="Client ID", placeholder="Enter your Client ID", elem_id="api_base_url")
-            client_secret = gr.Textbox(label="Client Secret", placeholder="Enter your Client Secret", type="password", elem_id="api_base_url")
-        with gr.Column(visible=False) as okta_auth:
-            api_token = gr.Textbox(label="API Token", placeholder="Enter your API Token", type="password", elem_id="api_base_url")
-        with gr.Column(visible=False) as iiq_auth:
-            iiq_username = gr.Textbox(label="Username", placeholder="Enter your IIQ Username", elem_id="api_base_url")
-            iiq_password = gr.Textbox(label="Password", placeholder="Enter your IIQ Password", type="password", elem_id="api_base_url")
-        
-        verify_btn = gr.Button("Verify Credentials")
-        loading_indicator = gr.Markdown("", visible=False)  # Add this
-        credentials_message = gr.Markdown("")
+    with gr.Column(visible=False, elem_classes="cred-section") as inow_cred:
+        api_base_url_inow = gr.Textbox(label="API Base URL", placeholder="e.g., https://your-org.api.identitynow.com")
+        grant_type = gr.Textbox(label="Grant Type", value="client_credentials", interactive=False)
+        client_id = gr.Textbox(label="Client ID", placeholder="Enter your client ID")
+        client_secret = gr.Textbox(label="Client Secret", type="password", placeholder="Enter your client secret")
+
+    with gr.Column(visible=False, elem_classes="cred-section") as iiq_cred:
+        api_base_url_iiq = gr.Textbox(label="API Base URL", placeholder="e.g., https://your-iiq-server.com/identityiq")
+        username = gr.Textbox(label="Username", placeholder="Enter your IIQ username")
+        password = gr.Textbox(label="Password", type="password", placeholder="Enter your IIQ password")
 
+    verify_btn = gr.Button("Verify Credentials", elem_classes="action-btn")
+    loading_indicator = gr.HTML("<div class='loading-spinner'></div>", visible=False)
+    credentials_message = gr.HTML("", visible=False)
+
+    # Endpoints Section
     max_groups = 100
-    # Endpoint Selection Section (hidden until verified)
-    with gr.Group(elem_classes="section-acc", visible=False) as endpoints_section:
-        gr.Markdown("### Choose Endpoints")
+    with gr.Group(elem_classes="endpoints-section", visible=False) as endpoints_section:
+        reset_btn = gr.Button("Reset", interactive=False, elem_classes="reset-btn")
         accordion_placeholders = []
-        with gr.Column():
-            for i in range(max_groups):
-                with gr.Accordion(label="", open=False, visible=False, elem_id= "acc") as acc:
-                    cb = gr.CheckboxGroup(label="", choices=[], value=[])
-                accordion_placeholders.append((acc, cb))
-        
-        with gr.Row():
-            lock_endpoints_btn = gr.Button("Lock Endpoints", variant="primary", elem_id= "lock")
-            unlock_endpoints_btn = gr.Button("Unlock Endpoints", variant="secondary", elem_id="unlock", interactive=False)
-        lock_loading_indicator = gr.Markdown("", visible=False)  # Add loading indicator for lock operation
-
-        # Parameter inputs (dynamically populated)
-        with gr.Group(visible=False) as param_group:
-            param_header = gr.Markdown("### Parameters Required")
-            param_components = []
-            for i in range(5):
-                with gr.Group(visible=False) as group:
-                    param_display = gr.Markdown(visible=False)
-                    param_input = gr.Textbox(label="Parameter Value", visible=False)
-                    param_components.append((group, param_display, param_input))
-
-    # Fetch Data Section (hidden until verified)
-    with gr.Group(elem_classes="section", visible=False) as fetch_section:
-        fetch_btn = gr.Button("Fetch Data", interactive=False)
-        fetch_loading_indicator = gr.Markdown("", visible=False)  # Add loading indicator for fetch operation
-    # Results Section (hidden until data fetched)
-    with gr.Group(elem_classes="section", visible=False) as results_section:
+        for i in range(max_groups):
+            with gr.Accordion(label="", open=False, visible=False, elem_classes="custom-accordion") as acc:
+                cb = gr.CheckboxGroup(label="", choices=[], value=[], elem_classes="custom-checkbox")
+            accordion_placeholders.append((acc, cb))
+        continue_btn = gr.Button("Continue", elem_classes="action-btn")
+
+    # Parameter Section
+    with gr.Group(elem_classes="param-group", visible=False) as param_group:
+        param_header = gr.Markdown("### Parameters Required")
+        param_components = []
+        for i in range(5):
+            with gr.Group(visible=False) as group:
+                param_display = gr.Markdown(visible=False)
+                param_input = gr.Textbox(label="Parameter Value", visible=False)
+                param_components.append((group, param_display, param_input))
+
+    # Fetch Section
+    with gr.Group(elem_classes="fetch-section", visible=False) as fetch_section:
+        fetch_btn = gr.Button("Fetch Data", interactive=False, elem_classes="action-btn")
+        fetch_loading_indicator = gr.HTML("<div class='loading-spinner'></div>", visible=False)
+
+    # Results Section
+    with gr.Group(elem_classes="results-section", visible=False) as results_section:
         gr.Markdown("### Results")
-        results_out = gr.JSON(label="API Responses")
-        download_out = gr.File(label="Download Session Data (ZIP)")
-
-    # Event handlers
-    def update_auth_fields(api_choice):
-        """Update authentication fields and reset UI when API selection changes"""
-        # Update auth field visibility
-        auth_updates = {
-            "Okta (JSON)": [False, True, False],
-            "SailPoint IdentityNow (YAML)": [True, False, False],
-            "Sailpoint IIQ (YAML)": [False, False, True]
-        }
-        visibilities = auth_updates.get(api_choice, [False, False, False])
-        
+        results_out = gr.JSON(label="API Responses", elem_classes="gr-json")
+        download_out = gr.File(label="Download Session Data (ZIP)", elem_classes="download-btn")
+
+    # Event Handlers
+    def update_cred_sections(api_choice):
         return [
-            *[gr.update(visible=v) for v in visibilities],  # auth fields (3)
-            gr.update(visible=False),  # endpoints_section
-            gr.update(visible=False),  # fetch_section
-            gr.update(visible=False),  # results_section
-            gr.update(value=None),     # results_out
-            gr.update(value=None),     # download_out
-            gr.update(value="")        # credentials_message
+            gr.update(visible=api_choice=="Okta (JSON)"),
+            gr.update(visible=api_choice=="SailPoint IdentityNow (YAML)"),
+            gr.update(visible=api_choice=="Sailpoint IIQ (YAML)"),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            gr.update(value=None),
+            gr.update(value=None),
+            gr.update(value="")
         ]
 
-    def verify_and_load_endpoints(spec_choice, api_base_url, grant_type, client_id, client_secret, 
-                api_token, iiq_username, iiq_password):
-        """Verify credentials and load endpoints into accordions"""
-        # Show loading message first
+    def verify_and_load_endpoints(api_choice, api_base_url_okta, api_token, api_base_url_inow, grant_type,
+                                  client_id, client_secret, api_base_url_iiq, username, password):
         yield (
-            gr.update(value="⏳ Verifying credentials and loading endpoints...", visible=True),  # loading indicator
-            gr.update(value="", visible=False),  # credentials message
-            gr.update(visible=False),  # endpoints_section
-            gr.update(visible=False),  # fetch_section
-            *[gr.update(visible=False, label="", value=[]) for _ in range(max_groups * 2)]  # accordion updates
+            gr.update(visible=True),
+            gr.update(value=""),
+            gr.update(visible=False),
+            gr.update(visible=False),
+            *[gr.update(visible=False, label="", value=[]) for _ in range(max_groups * 2)]
         )
 
-        # Verify credentials
-        status, endpoints_vis, fetch_vis = verify_credentials(
-            spec_choice, api_base_url, grant_type, client_id, client_secret, 
-            api_token, iiq_username, iiq_password
-        )
-        
+        if api_choice == "Okta (JSON)":
+            status, endpoints_vis, fetch_vis = verify_credentials(api_choice, api_base_url_okta, api_token=api_token)
+        elif api_choice == "SailPoint IdentityNow (YAML)":
+            status, endpoints_vis, fetch_vis = verify_credentials(api_choice, api_base_url_inow, grant_type=grant_type,
+                                                                 client_id=client_id, client_secret=client_secret)
+        else:
+            status, endpoints_vis, fetch_vis = verify_credentials(api_choice, api_base_url_iiq, iiq_username=username,
+                                                                 iiq_password=password)
+
         if not endpoints_vis:
             yield (
-                gr.update(visible=False),  # hide loading
-                status,  # show error in credentials message
-                gr.update(visible=False),  # endpoints_section
-                gr.update(visible=False),  # fetch_section
+                gr.update(visible=False),
+                status,
+                gr.update(visible=False),
+                gr.update(visible=False),
                 *[gr.update(visible=False, label="", value=[]) for _ in range(max_groups * 2)]
             )
             return
-        
-        try:
-            endpoints = get_endpoints(spec_choice)
-            if not endpoints:
-                yield (
-                    gr.update(visible=False),
-                    gr.update(value="No endpoints found", visible=True),
-                    gr.update(visible=False),
-                    gr.update(visible=False),
-                    *[gr.update(visible=False, label="", value=[]) for _ in range(max_groups * 2)]
-                )
-                return
-            
-            groups = group_endpoints(endpoints, spec_choice)
-            group_keys = list(groups.keys())
-            updates = []
-            
-            # Process each group
-            for i in range(max_groups):
-                if i < len(group_keys):
-                    group = group_keys[i]
-                    choices = []
-                    # Collect GET endpoints for this group
-                    for ep, methods in groups[group].items():
-                        if 'get' in methods:
-                            summary = methods['get'].get('summary', 'No summary')
-                            choices.append(f"{ep} | GET - {summary}")
-                    
-                    # Add updates for this accordion
-                    if choices:
-                        updates.extend([
-                            gr.update(
-                                label=f"Group: {group}",
-                                visible=True,
-                                open=False  # Don't auto-open any accordion
-                            ),
-                            gr.update(
-                                choices=choices,
-                                value=[],
-                                visible=True,
-                                interactive=True  # Make sure checkboxes are interactive
-                            )
-                        ])
-                    else:
-                        updates.extend([
-                            gr.update(visible=False, label=""),
-                            gr.update(visible=False, choices=[], value=[])
-                        ])
-                else:
-                    # Hide unused accordions
-                    updates.extend([
-                        gr.update(visible=False, label=""),
-                        gr.update(visible=False, choices=[], value=[])
-                    ])
-            
-            yield (
-                gr.update(visible=False),  # hide loading
-                gr.update(value="✅ Endpoints loaded successfully", visible=True),
-                gr.update(visible=True),
-                gr.update(visible=True),
-                *updates
-            )
-            
-        except Exception as e:
+
+        endpoints = get_endpoints(api_choice)
+        if not endpoints:
             yield (
-                gr.update(visible=False),  # hide loading
-                gr.update(value=f"Error loading endpoints: {str(e)}", visible=True),
+                gr.update(visible=False),
+                gr.update(value="<div class='error-message'><i class='fas fa-exclamation-circle'></i> No endpoints found</div>", visible=True),
                 gr.update(visible=False),
                 gr.update(visible=False),
                 *[gr.update(visible=False, label="", value=[]) for _ in range(max_groups * 2)]
             )
+            return
 
-    def unlock_selected_endpoints():
-        """Unlock endpoints and reset parameter section"""
-        return [
-            gr.update(value="✅ Endpoints unlocked", visible=True),  # message
-            [],  # locked_endpoints_state
-            gr.update(interactive=True),  # lock button
-            gr.update(interactive=False),  # unlock button - disable when unlocked
-            *[gr.update(interactive=True) for _ in range(max_groups)],  # checkboxes
-            gr.update(visible=False),  # param_group
-            gr.update(visible=False),  # param_header
-            *[gr.update(visible=False) for _ in range(len(param_components) * 3)],  # parameter components
-            gr.update(interactive=False)  # fetch button
-        ]
+        groups = group_endpoints(endpoints, api_choice)
+        group_keys = list(groups.keys())
+        updates = []
+        for i in range(max_groups):
+            if i < len(group_keys):
+                group = group_keys[i]
+                choices = [f"{ep} | GET - {methods['get'].get('summary', 'No summary')}" for ep, methods in groups[group].items() if 'get' in methods]
+                updates.extend([
+                    gr.update(label=group, visible=bool(choices), open=False),
+                    gr.update(choices=choices, value=[], visible=bool(choices), interactive=True)
+                ])
+            else:
+                updates.extend([gr.update(visible=False, label=""), gr.update(visible=False, choices=[], value=[])])
 
-    def lock_selected_endpoints(*checkbox_values):
-        """Collect and lock all selected endpoints"""
-        # Show loading message first
         yield (
-            gr.update(value="⏳ Locking endpoints and processing parameters...", visible=True),  # loading indicator
-            [],  # locked_endpoints_state - clear state initially
-            gr.update(interactive=False),  # lock button
-            gr.update(interactive=False),  # unlock button
-            *[gr.update(interactive=False) for _ in range(len(checkbox_values))],  # checkboxes
-            gr.update(visible=False),  # param_group
-            gr.update(visible=False),  # param_header
-            *[gr.update(visible=False) for _ in range(len(param_components) * 3)],  # parameter components
-            gr.update(interactive=False)  # fetch button
+            gr.update(visible=False),
+            gr.update(value="<div class='success-message'><i class='fas fa-check-circle'></i> Endpoints loaded successfully</div>", visible=True),
+            gr.update(visible=True),
+            gr.update(visible=True),
+            *updates
         )
 
-        all_selected = []
-        for checkbox_group in checkbox_values:
-            if isinstance(checkbox_group, list) and checkbox_group:
-                all_selected.extend(checkbox_group)
+    def lock_selected_endpoints(*checkbox_values):
+        all_selected = [sel for group in checkbox_values if isinstance(group, list) for sel in group]
+        print("Selected endpoints:", all_selected)
         
+        # Handle empty selection case
         if not all_selected:
-            base_updates = [
-                gr.update(visible=False),  # loading indicator
-                [],  # locked_endpoints_state - keep empty
-                gr.update(interactive=True),  # lock button
-                gr.update(interactive=False),  # unlock button
-                *[gr.update(interactive=True) for _ in range(len(checkbox_values))]  # checkboxes
-            ]
-            param_updates = [
-                gr.update(visible=False),  # param_group
-                gr.update(visible=False),  # param_header
-                *[gr.update(visible=False) for _ in range(len(param_components) * 3)]  # parameter components
+            return [
+                [],  # Raw empty list for locked_endpoints_state
+                gr.update(interactive=True),
+                gr.update(interactive=False),
+                *[gr.update(interactive=True) for _ in range(max_groups)],
+                gr.update(visible=False),
+                gr.update(visible=False),
+                *[gr.update(visible=False) for _ in range(len(param_components) * 3)],
+                gr.update(interactive=False),
+                gr.update(value=0)
             ]
-            yield base_updates + param_updates + [gr.update(interactive=False)]  # fetch button
-            return
 
-        base_updates = [
-            gr.update(visible=False),  # loading indicator
-            all_selected,  # locked_endpoints_state - update with selected endpoints
-            gr.update(interactive=False),  # lock button
-            gr.update(interactive=True),  # unlock button
-            *[gr.update(interactive=False) for _ in range(len(checkbox_values))]  # checkboxes
-        ]
-        
-        param_updates = update_params(spec_choice.value, all_selected)
-        fetch_update = [gr.update(interactive=True)]
+        # Process selected endpoints
+        all_parameters = get_required_params(api_choice.value, all_selected)
+        param_updates = update_params(api_choice.value, all_selected)
+        has_params = len(all_parameters) > 0
+        fetch_update = gr.update(interactive=not has_params)
         
-        yield base_updates + param_updates + fetch_update
+        # Create return list with raw endpoints list as first item
+        print("About to return with value:", all_selected)
+        return [
+            all_selected,  # Raw list for locked_endpoints_state
+            gr.update(interactive=False),
+            gr.update(interactive=True),
+            *[gr.update(interactive=False) for _ in range(max_groups)],
+            *param_updates,
+            fetch_update,
+            gr.update(value=len(all_parameters))
+        ]
 
-    def update_params(spec_choice_value, locked_endpoints):
-        """Update parameter inputs based on selected endpoints"""
-        if not locked_endpoints:
-            return [gr.update(visible=False), gr.update(visible=False)] + [gr.update(visible=False)] * (len(param_components) * 3)
+    def unlock_selected_endpoints():
+        return [
+            gr.update(value=[]),
+            gr.update(interactive=True),
+            gr.update(interactive=False),
+            *[gr.update(interactive=True) for _ in range(max_groups)],
+            gr.update(visible=False),
+            gr.update(visible=False),
+            *[gr.update(visible=False) for _ in range(len(param_components) * 3)],
+            gr.update(interactive=False),
+            gr.update(value=0)
+        ]
 
-        # Get the API spec
-        endpoints = get_endpoints(spec_choice_value)
-        
-        # First pass: collect all parameters from all selected endpoints
-        all_parameters = []  # This will store ALL parameters from ALL endpoints
-        required_params_count = 0
-        
-        # Collect parameters from all endpoints first
-        for ep in locked_endpoints:
+    def get_required_params(spec_choice, selected_endpoints):
+        endpoints = get_endpoints(spec_choice)
+        all_params = []
+        for ep in selected_endpoints:
             endpoint = ep.split(" | GET")[0].strip()
             endpoint_spec = endpoints.get(endpoint, {}).get('get', {})
-            
-            # Collect path parameters
             path_params = extract_path_params(endpoint)
-            for param in path_params:
-                all_parameters.append({
-                    'endpoint': endpoint,
-                    'type': 'path',
-                    'name': param,
-                    'required': True,
-                    'description': f"Required path parameter for {endpoint}"
-                })
-                required_params_count += 1
-            
-            # Collect required query parameters
             query_params = extract_query_params(endpoint_spec)
-            for param_type, name, required, description in query_params:
+            for param in path_params:
+                all_params.append({"endpoint": endpoint, "type": "path", "name": param, "description": "Path parameter"})
+            for _, name, required, desc in query_params:
                 if required:
-                    all_parameters.append({
-                        'endpoint': endpoint,
-                        'type': 'query',
-                        'name': name,
-                        'required': True,
-                        'description': description
-                    })
-                    required_params_count += 1
-
-        # Create updates for components
-        updates = []
+                    all_params.append({"endpoint": endpoint, "type": "query", "name": name, "description": desc or "Query parameter"})
+        return all_params
 
-        if not required_params_count:
+    def update_params(spec_choice_value, locked_endpoints):
+        all_parameters = get_required_params(spec_choice_value, locked_endpoints)
+        updates = []
+        if not all_parameters:
             updates.extend([
-                gr.update(visible=False),  # param_group
-                gr.update(value="✅ No parameters required. You can proceed to call the API.", visible=True)  # param_header
+                gr.update(visible=True),
+                gr.update(value="✅ No parameters are required. Press 'Fetch Data' to get data.", visible=True)
             ])
-            updates.extend([gr.update(visible=False)] * (len(param_components) * 3))
+            updates.extend([gr.update(visible=False) for _ in range(len(param_components) * 3)])
         else:
-            # Show parameter section
             updates.extend([
-                gr.update(visible=True),  # param_group
-                gr.update(value=f"⚠️ Required Parameters ({required_params_count})", visible=True)  # param_header
+                gr.update(visible=True),
+                gr.update(value=f"⚠️ Required Parameters ({len(all_parameters)})", visible=True)
             ])
-
-            # Update parameter components (limited to first 5 parameters)
             for i in range(5):
                 if i < len(all_parameters):
-                    param = all_parameters[i]  # Get parameter from the collected list
+                    param = all_parameters[i]
                     emoji = "🔑" if param['type'] == 'path' else "🔍"
                     updates.extend([
-                        gr.update(visible=True),  # group
-                        gr.update(
-                            visible=True,
-                            value=f"Endpoint: {param['endpoint']} - {param['type'].title()} Parameter"
-                        ),  # display
-                        gr.update(
-                            visible=True,
-                            label=f"{emoji} Enter {param['type']} parameter: {param['name']}",
-                            placeholder=param['description']
-                        )  # input
+                        gr.update(visible=True),
+                        gr.update(visible=True, value=f"Endpoint: {param['endpoint']} - {param['type'].title()} Parameter"),
+                        gr.update(visible=True, label=f"{emoji} {param['name']}", placeholder=param['description'])
                     ])
                 else:
-                    # Hide unused parameter components
-                    updates.extend([
-                        gr.update(visible=False),
-                        gr.update(visible=False, value=""),
-                        gr.update(visible=False, label="")
-                    ])
-
+                    updates.extend([gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)])
         return updates
-    
-    def update_fetch_button(*param_values):
-        """Enable fetch button if all required parameters are filled"""
-        if all(val.strip() for val in param_values if val is not None):
+
+    def update_fetch_button(required_params_count, *param_values):
+        if required_params_count == 0:
             return gr.update(interactive=True)
-        return gr.update(interactive=False)
-    
-    for _, _, input_box in param_components:
-        input_box.change(
-            fn=update_fetch_button,
-            inputs=[input_box for _, _, input_box in param_components],
-            outputs=[fetch_btn]
-        )
+        filled = all(val and val.strip() for val in param_values[:required_params_count])
+        return gr.update(interactive=filled)
 
-    def handle_api_call(spec_choice, api_base_url, grant_type, client_id, client_secret, api_token, 
-                   iiq_username, iiq_password, locked_endpoints, *param_values):
-        """Handle API calls for selected endpoints with parameters"""
-        
+    def handle_api_call(api_choice, api_base_url_okta, api_token, api_base_url_inow, grant_type, client_id,
+                    client_secret, api_base_url_iiq, username, password, locked_endpoints, *param_values):
+        print("API call received endpoints:", locked_endpoints)
         yield (
-            gr.update(value="⏳ Fetching data from API...", visible=True),  # loading indicator
-            gr.update(visible=False),  # results_section
-            gr.update(value=None),  # results_out
-            gr.update(value=None)  # download_out
+            gr.update(visible=True),
+            gr.update(visible=False),
+            gr.update(value=None),
+            gr.update(value=None)
         )
 
-        if not locked_endpoints:
-            yield (
-                gr.update(visible=False),  # hide loading
-                gr.update(visible=True),
-                {"error": "No endpoints selected"},
-                None
-            )
-            return
-
-        # Initialize parameter dictionaries
-        path_params = {}
-        query_params = {}
+        param_dict = {}
         param_idx = 0
-        endpoints = get_endpoints(spec_choice)
-
-        # Process each endpoint and map parameters
+        endpoints = get_endpoints(api_choice)
         for ep in locked_endpoints:
-            endpoint = ep.split(" | GET")[0].strip()  # Extract endpoint path
+            endpoint = ep.split(" | GET")[0].strip()
             endpoint_spec = endpoints.get(endpoint, {}).get('get', {})
-            
-            # Get path parameters
-            path_params_list = extract_path_params(endpoint)
-            for param in path_params_list:
-                if param_idx < len(param_values) and param_values[param_idx]:
-                    path_params[param] = param_values[param_idx]
+            for param in extract_path_params(endpoint):
+                if param_idx < len(param_values):
+                    param_dict[param] = param_values[param_idx]
                 param_idx += 1
-            
-            # Get query parameters
-            query_params_list = extract_query_params(endpoint_spec)
-            for _, name, required, _ in query_params_list:
-                if required and param_idx < len(param_values) and param_values[param_idx]:
-                    query_params[name] = param_values[param_idx]
+            for _, name, required, _ in extract_query_params(endpoint_spec):
+                if required and param_idx < len(param_values):
+                    param_dict[name] = param_values[param_idx]
                 param_idx += 1
 
-        try:
-            # Call appropriate API handler based on selection
-            if spec_choice == "Okta (JSON)":
-                result = handle_okta_call(
-                    api_base_url, 
-                    api_token, 
-                    "", # session_id 
-                    path_params, 
-                    query_params,
-                    locked_endpoints
-                )
-            elif spec_choice == "SailPoint IdentityNow (YAML)":
-                result = handle_identitynow_call(
-                    api_base_url, 
-                    grant_type, 
-                    client_id, 
-                    client_secret, 
-                    "", # session_id
-                    path_params, 
-                    query_params,
-                    locked_endpoints
-                )
-            else:  # Sailpoint IIQ
-                result = handle_iiq_call(
-                    api_base_url, 
-                    iiq_username, 
-                    iiq_password, 
-                    "", # session_id
-                    path_params, 
-                    query_params,
-                    locked_endpoints
-                )
+        # Clean the endpoints to pass only the paths to the API call functions
+        clean_endpoints = [ep.split(" | GET")[0].strip() for ep in locked_endpoints]
+        print("Selected endpoints to call:", clean_endpoints)
 
-            # Show results section and return API response
-            yield (
-                gr.update(visible=False),  # hide loading
-                gr.update(visible=True),  # Show results section
-                result[0],  # API response data
-                result[1]   # Download file if any
-            )
+        if api_choice == "Okta (JSON)":
+            # Pass locked_endpoints as the only item in a list to match expected format
+            result = handle_okta_call(api_base_url_okta, api_token, "", param_dict, clean_endpoints)
+        elif api_choice == "SailPoint IdentityNow (YAML)":
+            result = handle_identitynow_call(api_base_url_inow, grant_type, client_id, client_secret, "", param_dict, clean_endpoints)
+        else:
+            result = handle_iiq_call(api_base_url_iiq, username, password, "", param_dict, clean_endpoints)
 
-        except Exception as e:
-            yield (
-                gr.update(visible=False),  # hide loading
-                gr.update(visible=True),
-                {"error": f"API call failed: {str(e)}"},
-                None
-            )
+        # Process the API result for display
+        if not result or not isinstance(result, tuple) or len(result) < 2:
+            data = {"error": "Invalid API response format"}
+            download_file = None
+        else:
+            api_data = result[0]
+            download_file = result[1] if len(result) > 1 else None
+            
+            if isinstance(api_data, dict):
+                data = api_data
+            elif isinstance(api_data, list):
+                data = {"results": api_data}
+            elif api_data is None:
+                data = {"message": "No data returned from the API"}
+            else:
+                data = {"raw_response": str(api_data)}
 
-    # Wire events
-    spec_choice.change(fn=update_auth_fields, inputs=[spec_choice], outputs=[identitynow_auth, okta_auth, iiq_auth])
-    verify_btn.click(
-        fn=verify_and_load_endpoints,
-        inputs=[
-            spec_choice, 
-            api_base_url, 
-            grant_type, 
-            client_id, 
-            client_secret, 
-            api_token, 
-            iiq_username, 
-            iiq_password
-        ],
-        outputs=[
-            loading_indicator,  # Add loading indicator to outputs
-            credentials_message,
-            endpoints_section,
-            fetch_section,
-            *[comp for acc_cb in accordion_placeholders for comp in acc_cb]
-        ]
-    )
+        yield (
+            gr.update(visible=False),
+            gr.update(visible=True),
+            gr.update(value=data),
+            gr.update(value=download_file)
+        )
 
-    spec_choice.change(
-        fn=update_auth_fields, 
-        inputs=[spec_choice], 
-        outputs=[
-            identitynow_auth,  # auth columns
-            okta_auth,
-            iiq_auth,
-            endpoints_section,  # sections
-            fetch_section,
-            results_section,
-            results_out,       # results
-            download_out,
-            credentials_message  # message
-        ]
+    # Wire Events
+    api_choice.change(
+        fn=update_cred_sections,
+        inputs=[api_choice],
+        outputs=[okta_cred, inow_cred, iiq_cred, endpoints_section, fetch_section, results_section, results_out, download_out, credentials_message]
     )
 
+    verify_btn.click(
+        fn=verify_and_load_endpoints,
+        inputs=[api_choice, api_base_url_okta, api_token, api_base_url_inow, grant_type, client_id, client_secret, api_base_url_iiq, username, password],
+        outputs=[loading_indicator, credentials_message, endpoints_section, fetch_section] + [comp for acc, cb in accordion_placeholders for comp in (acc, cb)]
+    )
 
-    lock_endpoints_btn.click(
+    continue_btn.click(
         fn=lock_selected_endpoints,
         inputs=[cb for _, cb in accordion_placeholders],
-        outputs=[
-            lock_loading_indicator,  # Add loading indicator
-            locked_endpoints_state,  # Add state to outputs
-            lock_endpoints_btn,
-            unlock_endpoints_btn,
-            *[cb for _, cb in accordion_placeholders],
-            param_group,
-            param_header,
-            *[comp for group, display, input_box in param_components 
-            for comp in (group, display, input_box)],
-            fetch_btn
-        ]
+        outputs=[locked_endpoints_state, continue_btn, reset_btn] + 
+                [cb for _, cb in accordion_placeholders] + 
+                [param_group, param_header] + 
+                [comp for group, display, input_box in param_components for comp in (group, display, input_box)] + 
+                [fetch_btn, required_params_count]
     )
 
-    unlock_endpoints_btn.click(
+    reset_btn.click(
         fn=unlock_selected_endpoints,
         inputs=[],
-        outputs=[
-            credentials_message,
-            locked_endpoints_state,
-            lock_endpoints_btn,
-            unlock_endpoints_btn,
-            *[cb for _, cb in accordion_placeholders],
-            param_group,
-            param_header,
-            *[comp for group, display, input_box in param_components 
-            for comp in (group, display, input_box)],
-            fetch_btn
-        ]
+        outputs=[locked_endpoints_state, continue_btn, reset_btn] + 
+                [cb for _, cb in accordion_placeholders] + 
+                [param_group, param_header] + 
+                [comp for group, display, input_box in param_components for comp in (group, display, input_box)] + 
+                [fetch_btn, required_params_count]
     )
-        
+
+    for _, _, input_box in param_components:
+        input_box.change(
+            fn=update_fetch_button,
+            inputs=[required_params_count] + [input_box for _, _, input_box in param_components],
+            outputs=[fetch_btn]
+        )
+
     fetch_btn.click(
         fn=handle_api_call,
-        inputs=[
-            spec_choice, 
-            api_base_url, 
-            grant_type, 
-            client_id, 
-            client_secret, 
-            api_token, 
-            iiq_username, 
-            iiq_password,
-            locked_endpoints_state,
-            *[input_box for _, _, input_box in param_components]
-        ],
-        outputs=[
-            fetch_loading_indicator,  # Add loading indicator
-            results_section,
-            results_out,
-            download_out
-        ]
+        inputs=[api_choice, api_base_url_okta, api_token, api_base_url_inow, grant_type, client_id, client_secret, api_base_url_iiq, username, password, locked_endpoints_state] + 
+               [input_box for _, _, input_box in param_components],
+        outputs=[fetch_loading_indicator, results_section, results_out, download_out]
     )
 
 if __name__ == "__main__":