Update flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

flare-ui/src/app/dialogs/api-edit-dialog/api-edit-dialog.component.html

@@ -127,6 +127,71 @@
       </div>
     </mat-tab>
 
+    <!-- Auth Tab -->
+    <mat-tab label="Authentication">
+      <div class="tab-content" [formGroup]="$any(form.get('auth'))">
+        <mat-checkbox formControlName="enabled">
+          Enable Authentication
+        </mat-checkbox>
+
+        @if (form.get('auth.enabled')?.value) {
+          <mat-divider></mat-divider>
+
+          <div class="auth-section">
+            <h3>Token Configuration</h3>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Token Endpoint</mat-label>
+              <input matInput formControlName="token_endpoint" placeholder="https://api.example.com/auth/token">
+              <mat-hint>URL to obtain authentication token</mat-hint>
+              @if (form.get('auth.token_endpoint')?.hasError('required') && form.get('auth.token_endpoint')?.touched) {
+                <mat-error>Token endpoint is required when auth is enabled</mat-error>
+              }
+            </mat-form-field>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Token Response Path</mat-label>
+              <input matInput formControlName="response_token_path" placeholder="token">
+              <mat-hint>JSON path to extract token from response</mat-hint>
+              @if (form.get('auth.response_token_path')?.hasError('required') && form.get('auth.response_token_path')?.touched) {
+                <mat-error>Token path is required when auth is enabled</mat-error>
+              }
+            </mat-form-field>
+
+            <app-json-editor
+              formControlName="token_request_body"
+              label="Token Request Body"
+              placeholder='{"username": "api_user", "password": "api_pass"}'
+              hint="JSON body for token request"
+              [rows]="6"
+              [availableVariables]="getTemplateVariables()"
+              [variableReplacer]="replaceVariablesForValidation">
+            </app-json-editor>
+
+            <mat-divider></mat-divider>
+
+            <h3>Token Refresh (Optional)</h3>
+
+            <mat-form-field appearance="outline">
+              <mat-label>Refresh Endpoint</mat-label>
+              <input matInput formControlName="token_refresh_endpoint" placeholder="https://api.example.com/auth/refresh">
+              <mat-hint>URL to refresh expired token</mat-hint>
+            </mat-form-field>
+
+            <app-json-editor
+              formControlName="token_refresh_body"
+              label="Refresh Request Body"
+              placeholder='{"refresh_token": "your_refresh_token"}'
+              hint="JSON body for refresh request"
+              [rows]="4"
+              [availableVariables]="getTemplateVariables()"
+              [variableReplacer]="replaceVariablesForValidation">
+            </app-json-editor>
+          </div>
+        }
+      </div>
+    </mat-tab>
+    
     <!-- Response Tab -->
     <mat-tab label="Response">
       <div class="tab-content">
@@ -323,70 +388,6 @@
       </div>
     </mat-tab>
 
-    <!-- Auth Tab -->
-    <mat-tab label="Authentication">
-      <div class="tab-content" [formGroup]="$any(form.get('auth'))">
-        <mat-checkbox formControlName="enabled">
-          Enable Authentication
-        </mat-checkbox>
-
-        @if (form.get('auth.enabled')?.value) {
-          <mat-divider></mat-divider>
-
-          <div class="auth-section">
-            <h3>Token Configuration</h3>
-
-            <mat-form-field appearance="outline">
-              <mat-label>Token Endpoint</mat-label>
-              <input matInput formControlName="token_endpoint" placeholder="https://api.example.com/auth/token">
-              <mat-hint>URL to obtain authentication token</mat-hint>
-              @if (form.get('auth.token_endpoint')?.hasError('required') && form.get('auth.token_endpoint')?.touched) {
-                <mat-error>Token endpoint is required when auth is enabled</mat-error>
-              }
-            </mat-form-field>
-
-            <mat-form-field appearance="outline">
-              <mat-label>Token Response Path</mat-label>
-              <input matInput formControlName="response_token_path" placeholder="token">
-              <mat-hint>JSON path to extract token from response</mat-hint>
-              @if (form.get('auth.response_token_path')?.hasError('required') && form.get('auth.response_token_path')?.touched) {
-                <mat-error>Token path is required when auth is enabled</mat-error>
-              }
-            </mat-form-field>
-
-            <app-json-editor
-              formControlName="token_request_body"
-              label="Token Request Body"
-              placeholder='{"username": "api_user", "password": "api_pass"}'
-              hint="JSON body for token request"
-              [rows]="6"
-              [availableVariables]="getTemplateVariables()"
-              [variableReplacer]="replaceVariablesForValidation">
-            </app-json-editor>
-
-            <mat-divider></mat-divider>
-
-            <h3>Token Refresh (Optional)</h3>
-
-            <mat-form-field appearance="outline">
-              <mat-label>Refresh Endpoint</mat-label>
-              <input matInput formControlName="token_refresh_endpoint" placeholder="https://api.example.com/auth/refresh">
-              <mat-hint>URL to refresh expired token</mat-hint>
-            </mat-form-field>
-
-            <app-json-editor
-              formControlName="token_refresh_body"
-              label="Refresh Request Body"
-              placeholder='{"refresh_token": "your_refresh_token"}'
-              hint="JSON body for refresh request"
-              [rows]="4"
-              [availableVariables]="getTemplateVariables()"
-              [variableReplacer]="replaceVariablesForValidation">
-            </app-json-editor>
-          </div>
-        }
-      </div>
-    </mat-tab>
   </mat-tab-group>
 </mat-dialog-content>