From 696236e76bdd1bcaa6709447031c12083338e8b0 Mon Sep 17 00:00:00 2001
From: Linty <lintydev@gmail.com>
Date: Wed, 29 Oct 2025 13:00:24 +0100
Subject: [PATCH] fixes #2426 move authorization section into test section

Moved API key authentication input from a separate card to the test form section for improved clarity. Updated related CSS for better layout and consistency, and adjusted descriptions to highlight API key usage in Piwigo 16.
---
 tools/ws.htm    | 26 +++++++++++---------------
 tools/ws/ws.css | 13 +++++++------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/tools/ws.htm b/tools/ws.htm
index 296f471c7..7c52683a9 100644
--- a/tools/ws.htm
+++ b/tools/ws.htm
@@ -75,6 +75,11 @@
               This page lists all API methods available on your Piwigo installation, part of the Piwigo core or added by third-party plugins.
               For each method you can consult required and optional parameters, and even test them in direct live!
             </p>
+
+            <p class="header-description"> Introduced in Piwigo 16, you can now use an API key in the HTTP header 
+              to perform authenticated requests without a user session.
+              For more details, check out our <a href="https://github.com/Piwigo/Piwigo/wiki/Piwigo-Web-API#api-key-authentication" target="_blank">documentation</a>.
+            </p>
     
             <p>
               For more information you can consult our Wiki <a href="https://github.com/Piwigo/Piwigo/wiki#web-api" target="_blank">Piwigo Web API</a> and <a href="https://piwigo.org/forum" target="_blank">our forums</a>.
@@ -84,21 +89,6 @@
   
   
         <form id="methodWrapper" style="display:none;">
-          <div class="card">
-            <h3 class="card-title"><i class="icon-cog-alt"></i>Authenticate with API Key (Header)</h3>
-            <div class="card-content">
-              <p class="header-description"> Introduced in Piwigo 16, you can now use an API key in the HTTP header 
-                to perform authenticated requests without a user session.
-                For more details, check out our <a href="https://github.com/Piwigo/Piwigo/wiki/Piwigo-Web-API#api-key-authentication" target="_blank">documentation</a>.
-              </p>
-              <p class="header-warning">Doesn't work when you use "INVOKE (new window)"</p>
-              <div class="header-setting">
-                <p>Authorization:</p>
-                <input type="text" id="apiKey" placeholder="pkid-xxxxxxxx-xxxxxxxxxxxxxxxxxxxx:xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />
-              </div>
-            </div>
-          </div> <!-- methodHeader -->
-
           <div class="card" id="methodDescription" style="display:none;">
             <h3 class="card-title"><i class="icon-book"></i>Description</h3>
             <blockquote>
@@ -133,6 +123,12 @@
               <div class="card" id="testForm">
                 <h3 class="card-title"><i class="icon-wrench"></i>Test</h3>
                 <div class="card-content">
+
+                  <div class="header-setting">
+                    <p class="header-label">Authorization:</p>
+                    <p class="header-warning">Doesn't work when you use "INVOKE (new window)"</p>
+                    <input type="text" id="apiKey" placeholder="pkid-xxxxxxxx-xxxxxxxxxxxxxxxxxxxx:yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy" />
+                  </div>
     
                   <div class="select-group">
                     <label for='requestFormat'>Request format</label>
diff --git a/tools/ws/ws.css b/tools/ws/ws.css
index ee8bdaa07..6ed1a95e2 100644
--- a/tools/ws/ws.css
+++ b/tools/ws/ws.css
@@ -350,14 +350,11 @@ input[type="text"] {
 }
 
 .header-setting {
-    display: flex;
-    align-items: center;
-    gap: 10px;
+    margin-bottom: 10px;
 }
 
 .header-setting input {
-    max-width: 580px;
-    width: 100%;
+    width: 98%;
 }
 
 .header-description {
@@ -368,10 +365,14 @@ input[type="text"] {
 .header-warning {
     margin: 0;
     color: red;
-    font-size: 12px;
+    font-size: 10px;
     font-style: italic;
 }
 
+.header-label {
+    margin-bottom: 0;
+}
+
 /* #requestResultDisplay {
     background: white;
 } */