Move API token creation form to modal, add 'Add Token' button

templates/api_tokens.html

@@ -38,7 +38,8 @@
 <div class="container">
         <div class="tokens-card">
             <div class="card-header">
-                <h3><i class="fas fa-plus"></i> Generate New API Token</h3>
+                <h3><i class="fas fa-key"></i> Your API Tokens</h3>
+                <button onclick="openAddTokenModal()" class="btn" style="margin-left: auto;"><i class="fas fa-plus"></i> Add Token</button>
             </div>
 
             {% with messages = get_flashed_messages(with_categories=true) %}
@@ -49,16 +50,6 @@
             {% endif %}
             {% endwith %}
 
-            <form method="post" action="/api_tokens/generate">
-                <div class="form-group">
-                    <label for="token_name">Token Name</label>
-                    <input type="text" id="token_name" name="token_name" placeholder="e.g., My App Token" required>
-                </div>
-
-                <button type="submit" class="btn">Generate Token</button>
-            </form>
-        </div>
-
         <div class="tokens-card">
             <div class="card-header">
                 <h3><i class="fas fa-key"></i> Your API Tokens</h3>
@@ -96,6 +87,28 @@
         </div>
     </div>
 
+    <!-- Add Token Modal -->
+    <div id="addTokenModal" class="modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h3><i class="fas fa-plus"></i> Generate New API Token</h3>
+                <span onclick="closeAddTokenModal()" style="cursor: pointer; font-size: 1.5rem;">&times;</span>
+            </div>
+            <form method="post" action="/api_tokens/generate">
+                <div class="modal-body">
+                    <div class="form-group">
+                        <label for="modal_token_name">Token Name</label>
+                        <input type="text" id="modal_token_name" name="token_name" placeholder="e.g., My App Token" required>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" onclick="closeAddTokenModal()" class="btn" style="background: #6b7280;">Cancel</button>
+                    <button type="submit" class="btn">Generate Token</button>
+                </div>
+            </form>
+        </div>
+    </div>
+
     <!-- Token Generated Modal -->
     {% if generated_token %}
     <div id="tokenModal" class="modal" style="display: block;">
@@ -166,6 +179,14 @@
             document.getElementById('deleteModal').style.display = 'none';
         }
 
+        function openAddTokenModal() {
+            document.getElementById('addTokenModal').style.display = 'block';
+        }
+
+        function closeAddTokenModal() {
+            document.getElementById('addTokenModal').style.display = 'none';
+        }
+
         function closeTokenModal() {
             document.getElementById('tokenModal').style.display = 'none';
             location.reload(); // Reload the page
@@ -189,6 +210,10 @@
 
         // Close modal when clicking outside
         window.onclick = function(event) {
+            const addModal = document.getElementById('addTokenModal');
+            if (addModal && event.target == addModal) {
+                closeAddTokenModal();
+            }
             const deleteModal = document.getElementById('deleteModal');
             if (deleteModal && event.target == deleteModal) {
                 closeDeleteModal();